1+ import "./utils/surveyjs_importer.js" ;
2+
3+ var widget = {
4+ areaStyle : "border: 1px solid #1ab394; width:100%; minHeight:50px" ,
5+ itemStyle : "background-color:#1ab394;color:#fff;margin:5px;padding:10px;" ,
6+ name : "sortablelist" ,
7+ isFit : function ( question ) { return question . getType ( ) === 'sortablelist' ; } ,
8+ htmlTemplate : "<div></div>" ,
9+ activatedByChanged : function ( activatedBy ) {
10+ Survey . JsonObject . metaData . addClass ( "sortablelist" , [ { name :"hasOther" , visible : false } ] , null , "checkbox" ) ;
11+ Survey . JsonObject . metaData . addProperty ( "sortablelist" , { name : "emptyText" , default : "Move items here." } ) ;
12+ } ,
13+ afterRender : function ( question , el ) {
14+ var rootWidget = this ;
15+ el . style . width = "100%" ;
16+ var resultEl = document . createElement ( "div" ) ;
17+ var emptyEl = document . createElement ( "span" ) ;
18+ var sourceEl = document . createElement ( "div" ) ;
19+ resultEl . style . cssText = rootWidget . areaStyle ;
20+ emptyEl . innerHTML = question . emptyText ;
21+ resultEl . appendChild ( emptyEl ) ;
22+ sourceEl . style . cssText = rootWidget . areaStyle ;
23+ sourceEl . style . marginTop = "10px" ;
24+ el . appendChild ( resultEl ) ;
25+ el . appendChild ( sourceEl ) ;
26+ var hasValueInResults = function ( val ) {
27+ res = question . value ;
28+ if ( ! Array . isArray ( res ) ) return false ;
29+ for ( var i = 0 ; i < res . length ; i ++ ) {
30+ if ( res [ i ] == val ) return true ;
31+ }
32+ return false ;
33+ } ;
34+ var isUpdatingQuestionValue = false ;
35+ var updateValueHandler = function ( ) {
36+ if ( isUpdatingQuestionValue ) return ;
37+ resultEl . innerHTML = "" ;
38+ resultEl . appendChild ( emptyEl ) ;
39+ sourceEl . innerHTML = "" ;
40+ var wasInResults = false ;
41+ question . activeChoices . forEach ( function ( choice ) {
42+ var inResutls = hasValueInResults ( choice . value ) ;
43+ wasInResults = wasInResults || inResutls ;
44+ var srcEl = inResutls ? resultEl : sourceEl ;
45+ var newEl = document . createElement ( "div" ) ;
46+ newEl . innerHTML = "<div style='" + rootWidget . itemStyle + "'>" + choice . text + "</div>" ;
47+ newEl [ "data-value" ] = choice . value ;
48+ srcEl . appendChild ( newEl ) ;
49+ } ) ;
50+ emptyEl . style . display = wasInResults ? "none" : "" ;
51+ } ;
52+ Sortable . create ( $ ( resultEl ) [ 0 ] , {
53+ animation : 150 ,
54+ group : {
55+ name : 'top3' ,
56+ pull : true ,
57+ put : true
58+ } ,
59+ onSort : function ( evt ) {
60+ var result = [ ] ;
61+ if ( evt . to . children . length === 1 ) {
62+ emptyEl . style . display = "" ;
63+ } else {
64+ emptyEl . style . display = "none" ;
65+ for ( var i = 1 ; i < evt . to . children . length ; i ++ ) {
66+ result . push ( evt . to . children [ i ] . dataset . value )
67+ }
68+ }
69+ isUpdatingQuestionValue = true ;
70+ question . value = result ;
71+ isUpdatingQuestionValue = false ;
72+ }
73+ } ) ;
74+ Sortable . create ( $ ( sourceEl ) [ 0 ] , {
75+ animation : 150 ,
76+ group : {
77+ name : 'top3' ,
78+ pull : true ,
79+ put : true
80+ }
81+ } ) ;
82+ question . valueChangedCallback = updateValueHandler ;
83+ updateValueHandler ( ) ;
84+ } ,
85+ willUnmount : function ( question , el ) {
86+ }
87+ }
88+
89+ Survey . CustomWidgetCollection . Instance . addCustomWidget ( widget , "customtype" ) ;
0 commit comments