a90ded445e985aad71114be70bd05b4a501a8557
[fnpeditor.git] / src / editor / plugins / core / edumed / order / view.js
1 define(function(require) {
2     
3 'use strict';
4 var $ = require('libs/jquery');
5
6 var _ = require('libs/underscore'),
7     Backbone = require('libs/backbone'),
8     viewTemplate = require('libs/text!./view.html'),
9     viewItemTemplate = require('libs/text!./viewItem.html');
10
11
12 var OrderExerciseView = function(element) {
13     this.element = element;
14     this.dom = $(_.template(viewTemplate)());
15     this.modePills = this.dom.find('.modePills');
16     this.list = this.dom.find('ol');
17     this.addButton = this.dom.find('button.add');
18     this.description = this.dom.find('.description');
19     this.itemViews = [];
20
21     this.addButton.on('click', function(e) {
22         e.stopPropagation();
23         e.preventDefault();
24         this.trigger('newItemRequested');
25         //_.last(this.itemViews).editStart();
26     }.bind(this));
27
28     this.modePills.find('a').on('click', function(e) {
29         e.stopPropagation();
30         e.preventDefault();
31         this.setMode($(e.target).parent().attr('mode'));
32     }.bind(this));
33
34     this.mode = 'initial';
35
36     var dropTargets = this.dom.find('.placeholder-top');
37
38     dropTargets.on('dragend', function() {
39         dropTargets.removeClass('dragged');
40     });
41
42     dropTargets.on('dragenter', function() {
43         var first = this.itemViews[0];
44         if(this.mode === 'correct') {
45             first = this.itemViews.slice(0)
46                 .sort(function(view1, view2) {
47                     if(view1.item.getAnswer() > view2.item.getAnswer()) {
48                         return 1;
49                     }
50                     return -1;
51                 })[0];
52         }
53         if(!this.allowDropAt(first, true)) {
54             return;
55         }
56         dropTargets.addClass('active');
57     }.bind(this));
58
59     dropTargets.on('dragleave', function() {
60         dropTargets.removeClass('active');
61     }.bind(this));
62
63     dropTargets.on('dragover', function(e) {
64         e.preventDefault();
65         e.originalEvent.dataTransfer.dropEffect = 'move';
66     });
67
68     dropTargets.on('drop', function(e) {
69         var vid = e.originalEvent.dataTransfer.getData('text');
70         var droppedItem = $('[vid='+vid+']').data('viewInstance');
71
72         var first = this.itemViews[0];
73         if(this.mode === 'correct') {
74             first = this.itemViews.slice(0)
75                 .sort(function(view1, view2) {
76                     if(view1.item.getAnswer() > view2.item.getAnswer()) {
77                         return 1;
78                     }
79                     return -1;
80                 })[0];
81         }
82
83         this.trigger(this.mode === 'initial' ? 'moveItem' : 'moveAnswer', droppedItem.item, first.item, 'before');
84         dropTargets.removeClass('active');
85         e.preventDefault();
86     }.bind(this));
87 };
88 _.extend(OrderExerciseView.prototype, Backbone.Events, {
89     addItem: function(item) {
90         var view = new ItemView(item, this);
91         view.on('edit', function(text) {
92             this.trigger('itemEdited', item, text);
93         }.bind(this));
94         view.on('receivedDrop', function(droppedItem) {
95             this.trigger(this.mode === 'initial' ? 'moveItem' : 'moveAnswer', droppedItem.item, item, 'after');
96         }.bind(this));
97         view.on('dragStarted', function(view) {
98             this.draggedView = view;
99         }.bind(this));
100         this.list.append(view.dom);
101         this.itemViews.push(view);
102
103         if(this.mode === 'correct') {
104             this.setMode(this.mode);
105         }
106     },
107     clearItems: function() {
108         this.list.empty();
109         this.itemViews.forEach(function(view) {
110             view.remove();
111         });
112         this.itemViews = [];
113     },
114     setMode: function(mode) {
115         this.modePills.find('li').removeClass('active');
116         this.modePills.find('[mode='+mode+']').addClass('active');
117         this.mode = mode;
118         this.list.children().detach();
119
120         if(this.mode === 'initial') {
121             this.itemViews.forEach(function(itemView) {
122                 this.list.append(itemView.dom);
123             }.bind(this));
124         } else {
125             this.itemViews.slice(0)
126                 .sort(function(view1, view2) {
127                     if(view1.item.getAnswer() > view2.item.getAnswer()) {
128                         return 1;
129                     }
130                     return -1;
131                 })
132                 .forEach(function(itemView) {
133                     this.list.append(itemView.dom);
134                 }.bind(this));
135         }
136     },
137     allowDropAt: function(view, up) {
138         var arr = [this.draggedView.dom[0]];
139         if(!up) {
140             arr.push(this.draggedView.dom.prev()[0]);
141         }
142         return !_.contains(arr, view.dom[0]);
143     }
144 });
145
146 var ItemView = function(item, exerciseView) {
147     this.item = item;
148     this.exerciseView = exerciseView;
149     this.dom = $(_.template(viewItemTemplate)());
150     this.content = this.dom.find('.content');
151
152
153     var dropTargets = this.dom.find('.placeholder'),
154         dragSources = this.dom.find('.handle');
155
156     dragSources.on('dragstart', function(e) {
157         this.dom.addClass('dragged');
158         e.originalEvent.dataTransfer.setData('text', this.dom.attr('vid'));
159         e.originalEvent.effectAllowed = 'move';
160         this.trigger('dragStarted', this);
161
162     }.bind(this));
163
164     dropTargets.on('dragend', function() {
165         this.dom.removeClass('dragged');
166     });
167
168     dropTargets.on('dragenter', function() {
169         if(!this.exerciseView.allowDropAt(this)) {
170             return;
171         }
172         dropTargets.addClass('active');
173     }.bind(this));
174
175     dropTargets.on('dragleave', function() {
176         dropTargets.removeClass('active');
177     }.bind(this));
178
179     dropTargets.on('dragover', function(e) {
180         e.preventDefault();
181         e.originalEvent.dataTransfer.dropEffect = 'move';
182     });
183
184     dropTargets.on('drop', function(e) {
185         var vid = e.originalEvent.dataTransfer.getData('text');
186         var droppedItem = $('[vid='+vid+']').data('viewInstance');
187         e.preventDefault();
188         this.trigger('receivedDrop', droppedItem);
189     }.bind(this));
190
191     var content = this.content;
192     this.container = exerciseView.element.createContainer(item.node.contents(), {
193         resetBackground: true,
194         manages: function(node, originaParent) {
195             return item.node.sameNode(node.parent() || originaParent);
196         },
197         dom: content
198     });
199
200     this.dom.data('viewInstance', this);
201     this.dom.attr('vid', _.uniqueId());
202 };
203
204 _.extend(ItemView.prototype, Backbone.Events, {
205     remove: function() {
206         this.container.remove();
207     }
208 });
209
210 return OrderExerciseView;
211
212 });
213
214