| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /** |
| A | 2 | Image editable input. |
| 3 | **/ | |
| 4 | (function ($) { | |
| 5 | "use strict"; | |
| 6 | ||
| 7 | var Image = function (options) { | |
| 8 | this.init('image', options, Image.defaults); | |
| 9 | ||
| 10 | if('on_error' in options.image) { | |
| 11 | this.on_error = options.image['on_error']; | |
| 12 | delete options.image['on_error'] | |
| 13 | } | |
| 14 | if('on_success' in options.image) { | |
| 15 | this.on_success = options.image['on_success']; | |
| 16 | delete options.image['on_success'] | |
| 17 | } | |
| 18 | if('max_size' in options.image) { | |
| 19 | this.max_size = options.image['max_size']; | |
| 20 | delete options.image['max_size'] | |
| 21 | } | |
| 22 | ||
| 23 | this.initImage(options, Image.defaults); | |
| 24 | }; | |
| 25 | ||
| 26 | //inherit from Abstract input | |
| 27 | $.fn.editableutils.inherit(Image, $.fn.editabletypes.abstractinput); | |
| 28 | ||
| 29 | $.extend(Image.prototype, { | |
| 30 | initImage: function(options, defaults) { | |
| 31 | this.options.image = $.extend({}, defaults.image, options.image); | |
| 32 | this.name = this.options.image.name || 'editable-image-input'; | |
| 33 | }, | |
| 34 | ||
| 35 | /** | |
| 36 | Renders input from tpl | |
| 37 | ||
| 38 | @method render() | |
| 39 | **/ | |
| 40 | render: function() { | |
| 41 | var self = this; | |
| 42 | this.$input = this.$tpl.find('input[type=hidden]:eq(0)'); | |
| 43 | this.$file = this.$tpl.find('input[type=file]:eq(0)'); | |
| 44 | ||
| 45 | this.$file.attr({'name':this.name}); | |
| 46 | this.$input.attr({'name':this.name+'-hidden'}); | |
| 47 | ||
| 48 | ||
| 49 | this.options.image.allowExt = this.options.image.allowExt || ['jpg', 'jpeg', 'png', 'gif']; | |
| 50 | this.options.image.allowMime = this.options.image.allowMime || ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; | |
| 51 | this.options.image.maxSize = self.max_size || this.options.image.maxSize || false; | |
| 52 | ||
| 53 | this.options.image.before_remove = this.options.image.before_remove || function() { | |
| 54 | self.$input.val(null); | |
| 55 | return true; | |
| 56 | } | |
| 57 | ||
| 58 | this.$file.ace_file_input(this.options.image).on('change', function(){ | |
| 59 | var $rand = (self.$file.val() || self.$file.data('ace_input_files')) ? Math.random() + "" + (new Date()).getTime() : null; | |
| 60 | self.$input.val($rand)//set a random value, so that selected file is uploaded each time, even if it's the same file, because inline editable plugin does not update if the value is not changed! | |
| 61 | }).closest('.ace-file-input').css({'width':'150px'}).closest('.editable-input').addClass('editable-image'); | |
| 62 | ||
| 63 | this.$file | |
| 64 | .off('file.error.ace') | |
| 65 | .on('file.error.ace', function(e, info) { | |
| 66 | if( !self.on_error ) return; | |
| 67 | if( info.error_count['ext'] > 0 || info.error_count['mime'] > 0 ) { | |
| 68 | //wrong ext or mime? | |
| 69 | self.on_error(1); | |
| 70 | } | |
| 71 | else if( info.error_count['size'] > 0 ) { | |
| 72 | //wrong size | |
| 73 | self.on_error(2); | |
| 74 | } | |
| 75 | }); | |
| 76 | } | |
| 77 | ||
| 78 | }); | |
| 79 | ||
| 80 | ||
| 81 | Image.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { | |
| 82 | tpl: '<span><input type="hidden" /></span><span><input type="file" /></span>', | |
| 83 | inputclass: '', | |
| 84 | image: | |
| 85 | { | |
| 86 | style: 'well', | |
| 87 | btn_choose: 'Change Image', | |
| 88 | btn_change: null, | |
| 89 | no_icon: 'fa fa-picture-o', | |
| 90 | thumbnail: 'large' | |
| 91 | } | |
| 92 | }); | |
| 93 | ||
| 94 | $.fn.editabletypes.image = Image; | |
| 95 | ||
| 96 | }(window.jQuery)); | |
| 97 | ||
| 98 | ||
| 99 | ||
| 100 | ||
| 101 | ||
| 102 | ||
| 103 | ||
| 104 | ||
| 105 | ||
| 106 | ||
| 107 | //Wysiwyg | |
| 108 | (function ($) { | |
| 109 | "use strict"; | |
| 110 | ||
| 111 | var Wysiwyg = function (options) { | |
| 112 | this.init('wysiwyg', options, Wysiwyg.defaults); | |
| 113 | ||
| 114 | //extend wysiwyg manually as $.extend not recursive | |
| 115 | this.options.wysiwyg = $.extend({}, Wysiwyg.defaults.wysiwyg, options.wysiwyg); | |
| 116 | }; | |
| 117 | ||
| 118 | $.fn.editableutils.inherit(Wysiwyg, $.fn.editabletypes.abstractinput); | |
| 119 | ||
| 120 | $.extend(Wysiwyg.prototype, { | |
| 121 | render: function () { | |
| 122 | this.$editor = this.$input.nextAll('.wysiwyg-editor:eq(0)'); | |
| 123 | ||
| 124 | this.$tpl.parent().find('.wysiwyg-editor').show().ace_wysiwyg(this.options.wysiwyg) | |
| 125 | .prev().addClass('wysiwyg-style2') | |
| 126 | .closest('.editable-input').addClass('editable-wysiwyg') | |
| 127 | .closest('.editable-container').css({'display':'block'});//if display is inline-block, putting large images inside the editor will expand it out of bounding box! | |
| 128 | ||
| 129 | if(this.options.wysiwyg && this.options.wysiwyg.css) | |
| 130 | this.$tpl.closest('.editable-wysiwyg').css(this.options.wysiwyg.css); | |
| 131 | }, | |
| 132 | ||
| 133 | ||
| 134 | value2html: function(value, element) { | |
| 135 | $(element).html(value); | |
| 136 | return false; | |
| 137 | }, | |
| 138 | ||
| 139 | html2value: function(html) { | |
| 140 | return html; | |
| 141 | }, | |
| 142 | ||
| 143 | value2input: function(value) { | |
| 144 | this.$editor.html(value); | |
| 145 | }, | |
| 146 | input2value: function() { | |
| 147 | return this.$editor.html(); | |
| 148 | }, | |
| 149 | ||
| 150 | activate: function() { | |
| 151 | //this.$editor.focus().get(0).setSelectionRange(200,200); | |
| 152 | } | |
| 153 | }); | |
| 154 | ||
| 155 | ||
| 156 | ||
| 157 | Wysiwyg.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { | |
| 158 | tpl: '<input type="hidden" /><div class="wysiwyg-editor"></div>', | |
| 159 | inputclass: 'editable-wysiwyg', | |
| 160 | wysiwyg: { | |
| 161 | toolbar: | |
| 162 | [ | |
| 163 | 'bold', | |
| 164 | 'italic', | |
| 165 | 'strikethrough', | |
| 166 | 'underline', | |
| 167 | null, | |
| 168 | 'foreColor', | |
| 169 | null, | |
| 170 | 'insertImage' | |
| 171 | ] | |
| 172 | } | |
| 173 | }); | |
| 174 | ||
| 175 | $.fn.editabletypes.wysiwyg = Wysiwyg; | |
| 176 | ||
| 177 | }(window.jQuery)); | |
| 178 | ||
| 179 | ||
| 180 | ||
| 181 | ||
| 182 | ||
| 183 | ||
| 184 | ||
| 185 | ||
| 186 | /** | |
| 187 | Spinner editable input. | |
| 188 | **/ | |
| 189 | (function ($) { | |
| 190 | "use strict"; | |
| 191 | ||
| 192 | var Spinner = function (options) { | |
| 193 | this.init('spinner', options, Spinner.defaults); | |
| 194 | this.initSpinner(options, Spinner.defaults); | |
| 195 | ||
| 196 | this.nativeUI = false; | |
| 197 | try { | |
| 198 | var tmp_inp = document.createElement('INPUT'); | |
| 199 | tmp_inp.type = 'number'; | |
| 200 | this.nativeUI = tmp_inp.type === 'number' && this.options.spinner.nativeUI === true | |
| 201 | } catch(e) {} | |
| 202 | }; | |
| 203 | ||
| 204 | //inherit from Abstract input | |
| 205 | $.fn.editableutils.inherit(Spinner, $.fn.editabletypes.abstractinput); | |
| 206 | ||
| 207 | $.extend(Spinner.prototype, { | |
| 208 | initSpinner: function(options, defaults) { | |
| 209 | this.options.spinner = $.extend({}, defaults.spinner, options.spinner); | |
| 210 | }, | |
| 211 | ||
| 212 | /** | |
| 213 | Renders input from tpl | |
| 214 | ||
| 215 | @method render() | |
| 216 | **/ | |
| 217 | render: function() { | |
| 218 | }, | |
| 219 | ||
| 220 | /** | |
| 221 | Activates input: sets focus on the first field. | |
| 222 | ||
| 223 | @method activate() | |
| 224 | **/ | |
| 225 | activate: function() { | |
| 226 | if(this.$input.is(':visible')) { | |
| 227 | this.$input.focus(); | |
| 228 | $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length); | |
| 229 | ||
| 230 | if(!this.nativeUI) { | |
| 231 | var val = parseInt(this.$input.val()); | |
| 232 | var options = $.extend({value:val}, this.options.spinner); | |
| 233 | this.$input.ace_spinner(options); | |
| 234 | } | |
| 235 | else { | |
| 236 | this.$input.get(0).type = 'number'; | |
| 237 | var options = ['min', 'max', 'step'] | |
| 238 | for(var o = 0 ; o < options.length; o++) { | |
| 239 | if(options[o] in this.options.spinner) | |
| 240 | this.$input.attr(options[o] , this.options.spinner[options[o]]) | |
| 241 | } | |
| 242 | } | |
| 243 | } | |
| 244 | }, | |
| 245 | ||
| 246 | /** | |
| 247 | Attaches handler to submit form in case of 'showbuttons=false' mode | |
| 248 | ||
| 249 | @method autosubmit() | |
| 250 | **/ | |
| 251 | autosubmit: function() { | |
| 252 | this.$input.keydown(function (e) { | |
| 253 | if (e.which === 13) { | |
| 254 | $(this).closest('form').submit(); | |
| 255 | } | |
| 256 | }); | |
| 257 | } | |
| 258 | }); | |
| 259 | ||
| 260 | Spinner.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { | |
| 261 | tpl: '<input type="text" />', | |
| 262 | inputclass: '', | |
| 263 | spinner:{ | |
| 264 | min:0, | |
| 265 | max:100, | |
| 266 | step:1, | |
| 267 | icon_up:'fa fa-plus', | |
| 268 | icon_down:'fa fa-minus', | |
| 269 | btn_up_class:'btn-success', | |
| 270 | btn_down_class:'btn-danger' | |
| 271 | } | |
| 272 | }); | |
| 273 | ||
| 274 | $.fn.editabletypes.spinner = Spinner; | |
| 275 | ||
| 276 | }(window.jQuery)); | |
| 277 | ||
| 278 | ||
| 279 | ||
| 280 | ||
| 281 | ||
| 282 | ||
| 283 | ||
| 284 | ||
| 285 | /** | |
| 286 | Slider editable input. | |
| 287 | **/ | |
| 288 | (function ($) { | |
| 289 | "use strict"; | |
| 290 | ||
| 291 | var Slider = function (options) { | |
| 292 | this.init('slider', options, Slider.defaults); | |
| 293 | this.initSlider(options, Slider.defaults); | |
| 294 | ||
| 295 | this.nativeUI = false; | |
| 296 | try { | |
| 297 | var tmp_inp = document.createElement('INPUT'); | |
| 298 | tmp_inp.type = 'range'; | |
| 299 | this.nativeUI = tmp_inp.type === 'range' && this.options.slider.nativeUI === true | |
| 300 | } catch(e) {} | |
| 301 | }; | |
| 302 | ||
| 303 | //inherit from Abstract input | |
| 304 | $.fn.editableutils.inherit(Slider, $.fn.editabletypes.abstractinput); | |
| 305 | ||
| 306 | $.extend(Slider.prototype, { | |
| 307 | initSlider: function(options, defaults) { | |
| 308 | this.options.slider = $.extend({}, defaults.slider, options.slider); | |
| 309 | }, | |
| 310 | ||
| 311 | /** | |
| 312 | Renders input from tpl | |
| 313 | ||
| 314 | @method render() | |
| 315 | **/ | |
| 316 | render: function() { | |
| 317 | }, | |
| 318 | /** | |
| 319 | Activates input: sets focus on the first field. | |
| 320 | ||
| 321 | @method activate() | |
| 322 | **/ | |
| 323 | activate: function() { | |
| 324 | if(this.$input.is(':visible')) { | |
| 325 | this.$input.focus(); | |
| 326 | $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length); | |
| 327 | ||
| 328 | if(!this.nativeUI) { | |
| 329 | var self = this; | |
| 330 | var val = parseInt(this.$input.val()); | |
| 331 | var width = this.options.slider.width || 200; | |
| 332 | var options = $.extend(this.options.slider , { | |
| 333 | value:val, | |
| 334 | slide: function( event, ui ) { | |
| 335 | var val = parseInt(ui.value); | |
| 336 | self.$input.val(val); | |
| 337 | ||
| 338 | if(ui.handle.firstChild == null) {//no tooltips attached to it | |
| 339 | $(ui.handle).prepend("<div class='tooltip top in' style='display:none; top:-38px; left:-5px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>"); | |
| 340 | } | |
| 341 | $(ui.handle.firstChild).show().children().eq(1).text(val); | |
| 342 | } | |
| 343 | }); | |
| 344 | this.$input.parent().addClass('editable-slider').css('width', width+'px').slider(options); | |
| 345 | } | |
| 346 | else { | |
| 347 | this.$input.get(0).type = 'range'; | |
| 348 | var options = ['min', 'max', 'step'] | |
| 349 | for(var o = 0 ; o < options.length; o++) { | |
| 350 | if(options[o] in this.options.slider) { | |
| 351 | this.$input[0][options[o]] = this.options.slider[options[o]] | |
| 352 | } | |
| 353 | } | |
| 354 | var width = this.options.slider.width || 200; | |
| 355 | this.$input.parent().addClass('editable-slider').css('width', width+'px'); | |
| 356 | } | |
| 357 | ||
| 358 | } | |
| 359 | }, | |
| 360 | ||
| 361 | value2html: function(value, element) { | |
| 362 | }, | |
| 363 | ||
| 364 | /** | |
| 365 | Attaches handler to submit form in case of 'showbuttons=false' mode | |
| 366 | ||
| 367 | @method autosubmit() | |
| 368 | **/ | |
| 369 | autosubmit: function() { | |
| 370 | this.$input.keydown(function (e) { | |
| 371 | if (e.which === 13) { | |
| 372 | $(this).closest('form').submit(); | |
| 373 | } | |
| 374 | }); | |
| 375 | } | |
| 376 | }); | |
| 377 | ||
| 378 | Slider.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { | |
| 379 | tpl: '<input type="text" /><span class="inline ui-slider-green"><span class="slider-display"></span></span>', | |
| 380 | inputclass: '', | |
| 381 | slider:{ | |
| 382 | min:1, | |
| 383 | max:100, | |
| 384 | step:1, | |
| 385 | range: "min" | |
| 386 | } | |
| 387 | }); | |
| 388 | ||
| 389 | $.fn.editabletypes.slider = Slider; | |
| 390 | ||
| 391 | }(window.jQuery)); | |
| 392 | ||
| 393 | ||
| 394 | ||
| 395 | ||
| 396 | ||
| 397 | ||
| 398 | ||
| 399 | ||
| 400 | ||
| 401 | /** | |
| 402 | ADate editable input. | |
| 403 | **/ | |
| 404 | (function ($) { | |
| 405 | "use strict"; | |
| 406 | ||
| 407 | ||
| 408 | ||
| 409 | ||
| 410 | var ADate = function (options) { | |
| 411 | this.init('adate', options, ADate.defaults); | |
| 412 | this.initDate(options, ADate.defaults); | |
| 413 | ||
| 414 | this.nativeUI = false; | |
| 415 | try { | |
| 416 | var tmp_inp = document.createElement('INPUT'); | |
| 417 | tmp_inp.type = 'date'; | |
| 418 | this.nativeUI = tmp_inp.type === 'date' && this.options.date.nativeUI === true | |
| 419 | } catch(e) {} | |
| 420 | }; | |
| 421 | ||
| 422 | //inherit from Abstract input | |
| 423 | $.fn.editableutils.inherit(ADate, $.fn.editabletypes.abstractinput); | |
| 424 | ||
| 425 | $.extend(ADate.prototype, { | |
| 426 | initDate: function(options, defaults) { | |
| 427 | this.options.date = $.extend({}, defaults.date, options.date); | |
| 428 | }, | |
| 429 | ||
| 430 | /** | |
| 431 | Renders input from tpl | |
| 432 | ||
| 433 | @method render() | |
| 434 | **/ | |
| 435 | render: function() { | |
| 436 | this.$input = this.$tpl.find('input.date'); | |
| 437 | }, | |
| 438 | /** | |
| 439 | Activates input: sets focus on the first field. | |
| 440 | ||
| 441 | @method activate() | |
| 442 | **/ | |
| 443 | activate: function() { | |
| 444 | if(this.$input.is(':visible')) { | |
| 445 | this.$input.focus(); | |
| 446 | } | |
| 447 | ||
| 448 | if(!this.nativeUI) { | |
| 449 | var inp = this.$input; | |
| 450 | this.$input.datepicker(this.options.date) | |
| 451 | var picker = inp.data('datepicker'); | |
| 452 | if(picker) { | |
| 453 | inp.on('click', function() { | |
| 454 | picker.show(); | |
| 455 | }) | |
| 456 | .siblings('.input-group-addon').on('click', function(){ | |
| 457 | picker.show(); | |
| 458 | }) | |
| 459 | } | |
| 460 | } | |
| 461 | else { | |
| 462 | this.$input.get(0).type = 'date'; | |
| 463 | } | |
| 464 | ||
| 465 | }, | |
| 466 | ||
| 467 | /** | |
| 468 | Attaches handler to submit form in case of 'showbuttons=false' mode | |
| 469 | ||
| 470 | @method autosubmit() | |
| 471 | **/ | |
| 472 | autosubmit: function() { | |
| 473 | this.$input.keydown(function (e) { | |
| 474 | if (e.which === 13) { | |
| 475 | $(this).closest('form').submit(); | |
| 476 | } | |
| 477 | }); | |
| 478 | } | |
| 479 | }); | |
| 480 | ||
| 481 | ADate.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { | |
| 482 | tpl:'<div class="input-group input-group-compact"><input type="text" class="input-medium date" /><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div>', | |
| 483 | date: { | |
| 484 | weekStart: 0, | |
| 485 | startView: 0, | |
| 486 | minViewMode: 0 | |
| 487 | } | |
| 488 | }); | |
| 489 | ||
| 490 | $.fn.editabletypes.adate = ADate; | |
| 491 | ||
| 492 | }(window.jQuery)); | |
