1 /* 2 * code review by Pavel Yaschenko 3 * 4 * No event's unbindings when component would be destroyed Hint: easy way to 5 * unbind - use namespaces when bind event handlers 6 * 7 */ 8 9 (function($, rf) { 10 11 rf.ui = rf.ui || {}; 12 13 var defaultIndicatorClasses = { 14 rejectClass : "rf-ind-rejt", 15 acceptClass : "rf-ind-acpt", 16 draggingClass : "rf-ind-drag" 17 }; 18 19 var defaultOptions = { 20 }; 21 22 rf.ui.Droppable = function(id, options) { 23 this.options = {}; 24 $.extend(this.options, defaultOptions, options || {}); 25 $super.constructor.call(this, id); 26 27 this.namespace = this.namespace || "." 28 + rf.Event.createNamespace(this.name, this.id); 29 30 this.id = id; 31 32 this.parentId = this.options.parentId; 33 34 this.attachToDom(this.parentId); 35 36 this.dropElement = $(document.getElementById(this.parentId)); 37 this.dropElement.droppable({ 38 addClasses : false 39 }); 40 this.dropElement.data("init", true); 41 42 rf.Event.bind(this.dropElement, 'drop' + this.namespace, this.drop, this); 43 rf.Event.bind(this.dropElement, 'dropover' + this.namespace, this.dropover, this); 44 rf.Event.bind(this.dropElement, 'dropout' + this.namespace, this.dropout, this); 45 46 }; 47 48 rf.BaseNonVisualComponent.extend(rf.ui.Droppable); 49 50 var $super = rf.ui.Droppable.$super; 51 52 $.extend(rf.ui.Droppable.prototype, (function() { 53 return { 54 drop : function(e) { 55 var ui = e.rf.data; 56 if (this.accept(ui.draggable)) { 57 this.__callAjax(e, ui); 58 } 59 var dragIndicatorObj = this.__getIndicatorObject(ui.helper); 60 if (dragIndicatorObj) { 61 ui.helper.removeClass(dragIndicatorObj.getAcceptClass()); 62 ui.helper.removeClass(dragIndicatorObj.getRejectClass()); 63 } else { 64 ui.helper.removeClass(defaultIndicatorClasses.acceptClass); 65 ui.helper.removeClass(defaultIndicatorClasses.rejectClass); 66 } 67 }, 68 69 dropover : function(e) { 70 var ui = e.rf.data; 71 var draggable = ui.draggable; 72 var dragIndicatorObj = this.__getIndicatorObject(ui.helper); 73 this.dropElement.addClass("rf-drp-hvr"); 74 if (dragIndicatorObj) { 75 if (this.accept(draggable)) { 76 ui.helper.removeClass(dragIndicatorObj.getRejectClass()); 77 ui.helper.addClass(dragIndicatorObj.getAcceptClass()); 78 this.dropElement.addClass("rf-drp-hlight"); 79 } else { 80 ui.helper.removeClass(dragIndicatorObj.getAcceptClass()); 81 ui.helper.addClass(dragIndicatorObj.getRejectClass()); 82 this.dropElement.removeClass("rf-drp-hlight"); 83 } 84 } else { 85 if (this.accept(draggable)) { 86 ui.helper.removeClass(defaultIndicatorClasses.rejectClass); 87 ui.helper.addClass(defaultIndicatorClasses.acceptClass); 88 this.dropElement.addClass("rf-drp-hlight"); 89 } else { 90 ui.helper.removeClass(defaultIndicatorClasses.acceptClass); 91 ui.helper.addClass(defaultIndicatorClasses.rejectClass); 92 this.dropElement.removeClass("rf-drp-hlight"); 93 } 94 } 95 }, 96 97 dropout : function(e) { 98 var ui = e.rf.data; 99 var draggable = ui.draggable; 100 var dragIndicatorObj = this.__getIndicatorObject(ui.helper); 101 this.dropElement.removeClass("rf-drp-hvr rf-drp-hlight"); 102 if (dragIndicatorObj) { 103 ui.helper.removeClass(dragIndicatorObj.getAcceptClass()); 104 ui.helper.removeClass(dragIndicatorObj.getRejectClass()); 105 } else { 106 ui.helper.removeClass(defaultIndicatorClasses.acceptClass); 107 ui.helper.removeClass(defaultIndicatorClasses.rejectClass); 108 } 109 }, 110 111 accept : function(draggable) { 112 var accept = false; 113 var acceptType = draggable.data("type"); 114 if (acceptType && this.options.acceptedTypes) { 115 $.each(this.options.acceptedTypes, function() { 116 if (this == "@none") { 117 return false; 118 } 119 120 if (this == acceptType || this == "@all") { 121 accept = true; 122 return false; 123 } 124 }); 125 } 126 return accept; 127 }, 128 129 __getIndicatorObject: function(helper) { 130 var indicatorCloneId = helper.attr('id'); 131 if (indicatorCloneId) { 132 var indicatorId = indicatorCloneId.match(/(.*)Clone$/)[1]; 133 return rf.component(indicatorId); 134 } 135 }, 136 137 __callAjax : function(e, ui) { 138 if (ui.draggable) { 139 var dragSource = ui.draggable.data("id"); 140 var ajaxFunc = this.options.ajaxFunction; 141 if (ajaxFunc && typeof ajaxFunc == 'function') { 142 ajaxFunc.call(this, e, dragSource); 143 } 144 } 145 }, 146 147 destroy : function() { 148 // clean up code here 149 this.detach(this.parentId); 150 rf.Event.unbind(this.dropElement, this.namespace); 151 152 // call parent's destroy method 153 $super.destroy.call(this); 154 155 } 156 157 158 } 159 })()); 160 161 })(RichFaces.jQuery, window.RichFaces);