hjg
2024-07-09 30304784e82d4bba24121328da8eb8490aec4f4f
提交 | 用户 | 时间
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));