From: Marcin Koziej Date: Wed, 16 Jan 2013 15:54:28 +0000 (+0100) Subject: dragging overhaul X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/ff191b1dc1ac37864898b775ce973f3900ddda89 dragging overhaul --- diff --git a/lib/librarian b/lib/librarian index aeed223c..3a04fe72 160000 --- a/lib/librarian +++ b/lib/librarian @@ -1 +1 @@ -Subproject commit aeed223c57f453d068216f86941b7de963190536 +Subproject commit 3a04fe720cdaef17c5dfa12c011a540a6f77dfc5 diff --git a/redakcja/static/edumed/css/edumed.css b/redakcja/static/edumed/css/edumed.css index 186a6e47..a19bec54 100644 --- a/redakcja/static/edumed/css/edumed.css +++ b/redakcja/static/edumed/css/edumed.css @@ -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; } diff --git a/redakcja/static/edumed/js/edumed.coffee b/redakcja/static/edumed/js/edumed.coffee index 771e7c72..2c02cd8d 100644 --- a/redakcja/static/edumed/js/edumed.coffee +++ b/redakcja/static/edumed/js/edumed.coffee @@ -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('x') + + 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('x') + $('.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 diff --git a/redakcja/static/edumed/js/edumed.js b/redakcja/static/edumed/js/edumed.js index 5709aeb7..622ed0e5 100644 --- a/redakcja/static/edumed/js/edumed.js +++ b/redakcja/static/edumed/js/edumed.js @@ -106,6 +106,65 @@ 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('x'); + }; + + 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('x'); + 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); @@ -195,6 +254,7 @@ function Luki(element) { Luki.__super__.constructor.call(this, element); + this.dragging(false, false); } Luki.prototype.check = function() { @@ -202,8 +262,10 @@ _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 { @@ -321,72 +383,15 @@ }; 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;