dragging overhaul
authorMarcin Koziej <marcin.koziej@nowoczesnapolska.org.pl>
Wed, 16 Jan 2013 15:54:28 +0000 (16:54 +0100)
committerMarcin Koziej <marcin.koziej@nowoczesnapolska.org.pl>
Wed, 16 Jan 2013 15:54:28 +0000 (16:54 +0100)
lib/librarian
redakcja/static/edumed/css/edumed.css
redakcja/static/edumed/js/edumed.coffee
redakcja/static/edumed/js/edumed.js

index aeed223..3a04fe7 160000 (submodule)
@@ -1 +1 @@
-Subproject commit aeed223c57f453d068216f86941b7de963190536
+Subproject commit 3a04fe720cdaef17c5dfa12c011a540a6f77dfc5
index 186a6e4..a19bec5 100644 (file)
@@ -473,14 +473,20 @@ em.person {
     border: 1px solid;
 }
 
-.przyporzadkuj .lista.predicate {
+.excercise .lista.predicate {
     list-style: none;
     position: relative;
     clear: both;
     padding-left: 0;
 }
 
-.przyporzadkuj .lista.predicate > li {
+
+.excercise .subjects {
+    padding-left: 0;
+}
+
+
+.excercise .lista.predicate > li {
     list-style: none;
     display: block;
     float: left;
@@ -488,27 +494,50 @@ em.person {
     margin: 2px;
 }
 
-.przyporzadkuj.wide .lista.predicate > li {
+.excercise.wide .lista.predicate > li {
     width: 100%;
     margin: 2px;
 }
 
-.przyporzadkuj .lista.predicate .droppable {
+.excercise .lista.predicate .droppable {
     min-height: 50px;
     border: 1px dotted black;
 }
 
 
-.przyporzadkuj .draggable {
+.excercise .draggable {
     padding: 3px;
     border: 1px dotted black;
     display: inline-block;
 }
 
-.przyporzadkuj .lista.subjects {
+.excercise .draggable.disabled {
+    background-color: grey;
+}
+
+.excercise .placeholder {
+    padding: 3px;
+    border: 1px dotted black;
+    display: inline-block;
+    min-width: 200px;
+    min-height: 1em;
+}
+
+
+.excercise .lista.subjects {
     padding-left: 0px;
 }
 
+
+.draggable .remove {
+    font-family: sans-serif;
+    padding: 2px 4px;
+    background-color: #ee6666;
+    margin-left: 5px;
+}
+
+/* utils */
+
 .clr {
     clear: both;
 }
index 771e7c7..2c02cd8 100644 (file)
@@ -64,6 +64,98 @@ class Excercise extends Binding
     $(".message", @element).text("Wynik: #{score[0]} / #{score[1]}")
 
 
+  draggable_equal: ($draggable1, $draggable2) ->
+    return false
+
+  draggable_accept: ($draggable, $droppable) ->
+    dropped = $droppable.closest("ul, ol").find(".draggable")
+    for d in dropped
+      if @draggable_equal $draggable, $(d)
+        return false
+    return true
+
+  draggable_dropped: ($draggable) ->
+    $draggable.append('<span class="close">x</span>')
+
+  dragging: (ismultiple, issortable) ->
+    $(".question", @element).each (i, question) =>
+      draggable_opts =
+        revert: 'invalid'
+        helper: 'clone'
+
+      $(".draggable", question).draggable(draggable_opts)
+      self = this
+      $(".placeholder", question).droppable
+        accept: (draggable) ->
+          $draggable = $(draggable)
+          if not $draggable.is(".draggable")
+            return false
+          return self.draggable_accept $draggable, $(this)
+
+        drop: (ev, ui) ->
+          added = $(ui.draggable).clone()
+          $added = added
+          $added.data("original", ui.draggable)
+          if not ismultiple
+            $(ui.draggable).addClass('disabled').draggable('disable')
+
+          $(ev.target).after(added)
+          if not $(ev.target).hasClass('multiple')
+            $(ev.target).hide()
+          $added.append('<span class="remove">x</span>')
+          $('.remove', added).click (ev) =>
+            $added.prev(".placeholder:not(.multiple)").show()
+            if not ismultiple
+              $added.data('original').removeClass('disabled').draggable('enable')
+            $(added).remove()
+
+
+
+#       $(".droppable", question).each (i, droppable) =>
+#         $droppable = $(droppable)
+#         $droppable.droppable
+#           accept: (draggable) =>
+#             return false
+#             $draggable = $(draggable)
+#             if not $draggable.is(".draggable")
+#               console.log('not draggable?')
+#               return false
+
+#             for added in $droppable.children(".draggable")
+#               if @draggable_equal($(added), $draggable)
+#                 console.log('already here:' + $draggable.text())
+#                 return false
+
+#             return @draggable_accept $draggable
+
+#           drop: (ev, ui) =>
+#             added = ui.draggable.clone()
+# #          added.attr('style', '')
+#             $(ev.target).append(added)
+#             added.draggable(draggable_opts)
+#             @draggable_dropped added
+
+#             if not @multiple
+#               $(ui.draggable).draggable("disable")
+
+
+      # if issortable
+      #   $(".droppable", question).sortable
+      #     items: "> li"
+
+      #     receive: (event, ui) =>
+      #       console.log("receive " + $(ui.item).text())
+      #       if not accept(ui.item, event.target)
+      #         console.log("REVERT")
+      #         $(event.target).sortable('cancel')
+
+          # over: (event, ui) =>
+          #   if not accept(ui.item, event.target)
+          #     $(event.target).sortable('disable')
+          # out: (event, ui) =>
+          #   $(event.target).sortable('enable')
+
+
 class Wybor extends Excercise
   constructor: (element) ->
     super element
@@ -126,12 +218,14 @@ class Uporzadkuj extends Excercise
 class Luki extends Excercise
   constructor: (element) ->
     super element
+    @dragging false, false
 
   check: ->
     all = 0
     correct = 0
-    $(".question-piece", @element).each (i, qpiece) =>
-      if $(qpiece).data('solution') == $(qpiece).val()
+    $(".placeholder + .question-piece", @element).each (i, qpiece) =>
+      $placeholder = $(qpiece).prev(".placeholder")
+      if $placeholder.data('solution') == $(qpiece).data('no')
         @piece_correct qpiece
         correct += 1
       else
@@ -220,60 +314,11 @@ class Przyporzadkuj extends Excercise
 
     @multiple = @is_multiple()
 
-    $(".question", @element).each (i, question) =>
-      draggable_opts =
-        revert: 'invalid'
-      if @multiple
-        helper_opts = { helper: "clone" }
-      else helper_opts = {}
-
-      $(".draggable", question).draggable($.extend({}, draggable_opts,
-        helper_opts))
-
-      $(".predicate .droppable", question).parent().droppable
-        accept: (draggable) ->
-          $draggable = $(draggable)
-          if not $draggable.is(".draggable")
-            console.log('not draggable?')
-            return false
-          $predicate = $(this)
-
-          for added in $predicate.find("li")
-            if $(added).text() == $draggable.text()
-              console.log('already here:' + $draggable.text())
-              return false
-          return true
-
-        drop: (ev, ui) =>
-          added = ui.draggable.clone()
-
-          added.attr('style', '')
-          $(ev.target).find(".droppable").append(added)
-          added.draggable(draggable_opts)
-
-          if not @multiple or ui.draggable.closest(".predicate").length > 0
-            ui.draggable.remove()
-
-      $(".predicate .droppable", question).sortable
-        items: "> li"
-
-      $(".subject", question).droppable
-        accept: ".draggable"
-        drop: (ev, ui) =>
-          # this is to prevent a situation of dragging out and
-          # dropping back to the same place
-          if $(ui.draggable).closest(".subject").length > 0
-            return
-
-
-          added = ui.draggable.clone()
+    @dragging @multiple, true
 
-          added.attr('style', '')
-          if not @multiple
-            $(ev.target).append(added)
-            added.draggable($.extend({}, draggable_opts, helper_opts))
+  draggable_equal: (d1, d2) ->
+    return d1.data("no") == d2.data("no")
 
-          ui.draggable.remove()
 
   check_question: (question) ->
     # subjects placed in predicates
index 5709aeb..622ed0e 100644 (file)
       return $(".message", this.element).text("Wynik: " + score[0] + " / " + score[1]);
     };
 
+    Excercise.prototype.draggable_equal = function($draggable1, $draggable2) {
+      return false;
+    };
+
+    Excercise.prototype.draggable_accept = function($draggable, $droppable) {
+      var d, dropped, _i, _len;
+      dropped = $droppable.closest("ul, ol").find(".draggable");
+      for (_i = 0, _len = dropped.length; _i < _len; _i++) {
+        d = dropped[_i];
+        if (this.draggable_equal($draggable, $(d))) return false;
+      }
+      return true;
+    };
+
+    Excercise.prototype.draggable_dropped = function($draggable) {
+      return $draggable.append('<span class="close">x</span>');
+    };
+
+    Excercise.prototype.dragging = function(ismultiple, issortable) {
+      var _this = this;
+      return $(".question", this.element).each(function(i, question) {
+        var draggable_opts, self;
+        draggable_opts = {
+          revert: 'invalid',
+          helper: 'clone'
+        };
+        $(".draggable", question).draggable(draggable_opts);
+        self = _this;
+        return $(".placeholder", question).droppable({
+          accept: function(draggable) {
+            var $draggable;
+            $draggable = $(draggable);
+            if (!$draggable.is(".draggable")) return false;
+            return self.draggable_accept($draggable, $(this));
+          },
+          drop: function(ev, ui) {
+            var $added, added,
+              _this = this;
+            added = $(ui.draggable).clone();
+            $added = added;
+            $added.data("original", ui.draggable);
+            if (!ismultiple) {
+              $(ui.draggable).addClass('disabled').draggable('disable');
+            }
+            $(ev.target).after(added);
+            if (!$(ev.target).hasClass('multiple')) $(ev.target).hide();
+            $added.append('<span class="remove">x</span>');
+            return $('.remove', added).click(function(ev) {
+              $added.prev(".placeholder:not(.multiple)").show();
+              if (!ismultiple) {
+                $added.data('original').removeClass('disabled').draggable('enable');
+              }
+              return $(added).remove();
+            });
+          }
+        });
+      });
+    };
+
     return Excercise;
 
   })(Binding);
 
     function Luki(element) {
       Luki.__super__.constructor.call(this, element);
+      this.dragging(false, false);
     }
 
     Luki.prototype.check = function() {
         _this = this;
       all = 0;
       correct = 0;
-      $(".question-piece", this.element).each(function(i, qpiece) {
-        if ($(qpiece).data('solution') === $(qpiece).val()) {
+      $(".placeholder + .question-piece", this.element).each(function(i, qpiece) {
+        var $placeholder;
+        $placeholder = $(qpiece).prev(".placeholder");
+        if ($placeholder.data('solution') === $(qpiece).data('no')) {
           _this.piece_correct(qpiece);
           correct += 1;
         } else {
     };
 
     function Przyporzadkuj(element) {
-      var _this = this;
       Przyporzadkuj.__super__.constructor.call(this, element);
       this.multiple = this.is_multiple();
-      $(".question", this.element).each(function(i, question) {
-        var draggable_opts, helper_opts;
-        draggable_opts = {
-          revert: 'invalid'
-        };
-        if (_this.multiple) {
-          helper_opts = {
-            helper: "clone"
-          };
-        } else {
-          helper_opts = {};
-        }
-        $(".draggable", question).draggable($.extend({}, draggable_opts, helper_opts));
-        $(".predicate .droppable", question).parent().droppable({
-          accept: function(draggable) {
-            var $draggable, $predicate, added, _i, _len, _ref;
-            $draggable = $(draggable);
-            if (!$draggable.is(".draggable")) {
-              console.log('not draggable?');
-              return false;
-            }
-            $predicate = $(this);
-            _ref = $predicate.find("li");
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              added = _ref[_i];
-              if ($(added).text() === $draggable.text()) {
-                console.log('already here:' + $draggable.text());
-                return false;
-              }
-            }
-            return true;
-          },
-          drop: function(ev, ui) {
-            var added;
-            added = ui.draggable.clone();
-            added.attr('style', '');
-            $(ev.target).find(".droppable").append(added);
-            added.draggable(draggable_opts);
-            if (!_this.multiple || ui.draggable.closest(".predicate").length > 0) {
-              return ui.draggable.remove();
-            }
-          }
-        });
-        $(".predicate .droppable", question).sortable({
-          items: "> li"
-        });
-        return $(".subject", question).droppable({
-          accept: ".draggable",
-          drop: function(ev, ui) {
-            var added;
-            if ($(ui.draggable).closest(".subject").length > 0) return;
-            added = ui.draggable.clone();
-            added.attr('style', '');
-            if (!_this.multiple) {
-              $(ev.target).append(added);
-              added.draggable($.extend({}, draggable_opts, helper_opts));
-            }
-            return ui.draggable.remove();
-          }
-        });
-      });
+      this.dragging(this.multiple, true);
     }
 
+    Przyporzadkuj.prototype.draggable_equal = function(d1, d2) {
+      return d1.data("no") === d2.data("no");
+    };
+
     Przyporzadkuj.prototype.check_question = function(question) {
       var all, all_multiple, count, mandatory, optional, pn, pred, qp, v, _i, _j, _len, _len2, _ref, _ref2;
       count = 0;