| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | <title>Bug #929 Test</title> |
|---|
| 4 | |
|---|
| 5 | <script type="text/javascript" src="js/jQuery-1.1/jquery.js"></script> |
|---|
| 6 | <script type="text/javascript" src="js/jQuery-1.1/jquery.compat-1.0.js"></script> |
|---|
| 7 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/interface.js"></script> |
|---|
| 8 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/iutil.js"></script> |
|---|
| 9 | |
|---|
| 10 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/ifx.js"></script> |
|---|
| 11 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/ifxslide.js"></script> |
|---|
| 12 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/iautocompleter.js"></script> |
|---|
| 13 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/idrag.js"></script> |
|---|
| 14 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/idrop.js"></script> |
|---|
| 15 | <script type="text/javascript" src="js/jQuery-1.1/interface-1.1.2/src/isortables.js"></script> |
|---|
| 16 | |
|---|
| 17 | <script type="text/javascript"> |
|---|
| 18 | /** |
|---|
| 19 | * Adapted from: http://www.dyve.net/jquery/?editable |
|---|
| 20 | */ |
|---|
| 21 | |
|---|
| 22 | $.fn.editable = function(options) { |
|---|
| 23 | // Options |
|---|
| 24 | options = arrayMerge({ |
|---|
| 25 | "callin": null, |
|---|
| 26 | "url": "url", |
|---|
| 27 | "idName": "id", |
|---|
| 28 | "valName": "val", |
|---|
| 29 | "callback": null, |
|---|
| 30 | "saving": "saving ...", |
|---|
| 31 | "delayOnBlur": 0, |
|---|
| 32 | "extraParams": {}, |
|---|
| 33 | "editClass": null |
|---|
| 34 | }, options); |
|---|
| 35 | // Set up |
|---|
| 36 | this.click(function(e) { |
|---|
| 37 | if (this.editing) return; |
|---|
| 38 | if (!this.editable) this.editable = function() { |
|---|
| 39 | var me = this; |
|---|
| 40 | if (options.callin) { |
|---|
| 41 | options.callin($(me).attr(options.idName)); |
|---|
| 42 | } |
|---|
| 43 | var width = $(me).width(); |
|---|
| 44 | me.editing = true; |
|---|
| 45 | me.orgHTML = $(me).html(); |
|---|
| 46 | me.innerHTML = ""; |
|---|
| 47 | if (options.editClass) $(me).addClass(options.editClass); |
|---|
| 48 | var i = createInputElement(me.orgHTML); |
|---|
| 49 | $(i).addClass(options.editClass); |
|---|
| 50 | $(i).css("width", width+20); |
|---|
| 51 | var t = 0; |
|---|
| 52 | me.appendChild(i); |
|---|
| 53 | i.focus(); |
|---|
| 54 | $(i).blur( |
|---|
| 55 | options.delayOnBlur ? function() { t = setTimeout(reset, options.delayOnBlur) } : reset |
|---|
| 56 | ) |
|---|
| 57 | .keydown(function(e) { |
|---|
| 58 | if (e.keyCode == 27) { // ESC |
|---|
| 59 | e.preventDefault; |
|---|
| 60 | reset |
|---|
| 61 | } else if (e.keyCode == 13) { // ENTER |
|---|
| 62 | e.preventDefault; |
|---|
| 63 | var p = {}; |
|---|
| 64 | p[options.idName] = $(me).attr(options.idName); |
|---|
| 65 | p[$(i).name()] = $(i).val(); |
|---|
| 66 | p = arrayMerge(p, options.extraParams); |
|---|
| 67 | $(me).html(options.saving); |
|---|
| 68 | $.post( |
|---|
| 69 | options.url, |
|---|
| 70 | p, |
|---|
| 71 | function(data) { |
|---|
| 72 | if (options.callback) { |
|---|
| 73 | options.callback(me, data); |
|---|
| 74 | } |
|---|
| 75 | m.editing = false; |
|---|
| 76 | }); |
|---|
| 77 | } |
|---|
| 78 | }); |
|---|
| 79 | /*$(f).submit(function(e) { |
|---|
| 80 | if (t) clearTimeout(t); |
|---|
| 81 | e.preventDefault(); |
|---|
| 82 | var p = {}; |
|---|
| 83 | p[i.name] = $(i).val(); |
|---|
| 84 | $(me).html(options.saving).load(options.url, arrayMerge(options.extraParams, p), function() { |
|---|
| 85 | // Remove script tags |
|---|
| 86 | me.innerHTML = me.innerHTML.replace(/<\s*script\s*.*>.*<\/\s*script\s*.*>/gi, ""); |
|---|
| 87 | // Callback if necessary |
|---|
| 88 | if (options.callback) options.callback(me); |
|---|
| 89 | // Release |
|---|
| 90 | me.editing = false; |
|---|
| 91 | }); |
|---|
| 92 | }); */ |
|---|
| 93 | function reset() { |
|---|
| 94 | me.innerHTML = me.orgHTML; |
|---|
| 95 | if (options.editClass) $(me).removeClass(options.editClass); |
|---|
| 96 | me.editing = false; |
|---|
| 97 | } |
|---|
| 98 | }; |
|---|
| 99 | this.editable(); |
|---|
| 100 | }) |
|---|
| 101 | ; |
|---|
| 102 | // Don't break the chain |
|---|
| 103 | return this; |
|---|
| 104 | // Helper functions |
|---|
| 105 | function arrayMerge(a, b) { |
|---|
| 106 | if (a) { |
|---|
| 107 | if (b) for(var i in b) a[i] = b[i]; |
|---|
| 108 | return a; |
|---|
| 109 | } else { |
|---|
| 110 | return b; |
|---|
| 111 | } |
|---|
| 112 | }; |
|---|
| 113 | function createInputElement(v) { |
|---|
| 114 | var i = document.createElement("input"); |
|---|
| 115 | i.type = "text"; |
|---|
| 116 | $(i).val(v); |
|---|
| 117 | i.name = options.valName; |
|---|
| 118 | return i; |
|---|
| 119 | } |
|---|
| 120 | }; |
|---|
| 121 | |
|---|
| 122 | </script> |
|---|
| 123 | |
|---|
| 124 | <style type="text/css"> |
|---|
| 125 | .editClass { |
|---|
| 126 | display: inline; |
|---|
| 127 | } |
|---|
| 128 | </style> |
|---|
| 129 | |
|---|
| 130 | </head> |
|---|
| 131 | |
|---|
| 132 | <script type="text/javascript"> |
|---|
| 133 | |
|---|
| 134 | var blankFn = function() {} |
|---|
| 135 | |
|---|
| 136 | var disableDrag = function(id) { |
|---|
| 137 | $("#"+id).DraggableDestroy(); |
|---|
| 138 | } |
|---|
| 139 | |
|---|
| 140 | $(document).ready(function() { |
|---|
| 141 | $(".dropZone").Sortable({ |
|---|
| 142 | accept: 'dropItem', |
|---|
| 143 | opacity: 0.4, |
|---|
| 144 | revert: true, |
|---|
| 145 | ghosting: true, |
|---|
| 146 | tolerance: 'intersect', |
|---|
| 147 | fit: true, |
|---|
| 148 | fx: 200 |
|---|
| 149 | }); |
|---|
| 150 | $(".dropItem").editable({ |
|---|
| 151 | editClass: "editClass", |
|---|
| 152 | idName: "id", |
|---|
| 153 | valName: "name", |
|---|
| 154 | callin: disableDrag |
|---|
| 155 | }); |
|---|
| 156 | }); |
|---|
| 157 | |
|---|
| 158 | </script> |
|---|
| 159 | |
|---|
| 160 | <body> |
|---|
| 161 | <ul class="dropZone"> |
|---|
| 162 | <li class="dropItem" id="e1">Hello, I could be edited</li> |
|---|
| 163 | <li class="dropItem" id="e2">Me too!</li> |
|---|
| 164 | <li class="dropItem" id="e3">Me three!</li> |
|---|
| 165 | <li class="dropItem" id="e4">I don't want to be edited :-(</li> |
|---|
| 166 | </ul> |
|---|
| 167 | <hr> |
|---|
| 168 | <ul class="dropZone"> |
|---|
| 169 | <li class="dropItem" id="e5">I'm also editable!</li> |
|---|
| 170 | </ul> |
|---|
| 171 | </body> |
|---|
| 172 | </html> |
|---|
| 173 | |
|---|
