mirror of
https://github.com/fergalmoran/dss.git
synced 2026-01-02 23:13:58 +00:00
360 lines
12 KiB
JavaScript
360 lines
12 KiB
JavaScript
/**
|
|
Image editable input.
|
|
**/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var Image = function (options) {
|
|
this.init('image', options, Image.defaults);
|
|
|
|
if ('on_error' in options.image) {
|
|
this.on_error = options.image['on_error'];
|
|
delete options.image['on_error']
|
|
}
|
|
if ('on_success' in options.image) {
|
|
this.on_success = options.image['on_success'];
|
|
delete options.image['on_success']
|
|
}
|
|
if ('max_size' in options.image) {
|
|
this.max_size = options.image['max_size'];
|
|
delete options.image['max_size']
|
|
}
|
|
|
|
this.initImage(options, Image.defaults);
|
|
};
|
|
|
|
//inherit from Abstract input
|
|
$.fn.editableutils.inherit(Image, $.fn.editabletypes.abstractinput);
|
|
|
|
$.extend(Image.prototype, {
|
|
initImage: function (options, defaults) {
|
|
this.options.image = $.extend({}, defaults.image, options.image);
|
|
this.name = this.options.image.name || 'editable-image-input';
|
|
},
|
|
|
|
/**
|
|
Renders input from tpl
|
|
|
|
@method render()
|
|
**/
|
|
render: function () {
|
|
var self = this;
|
|
this.$input = this.$tpl.find('input[type=hidden]:eq(0)');
|
|
this.$file = this.$tpl.find('input[type=file]:eq(0)');
|
|
|
|
this.$file.attr({'name': this.name});
|
|
this.$input.attr({'name': this.name + '-hidden'});
|
|
|
|
|
|
this.options.image.before_change = this.options.image.before_change || function (files, dropped) {
|
|
var file = files[0];
|
|
if (typeof file === "string") {
|
|
//files is just a file name here (in browsers that don't support FileReader API)
|
|
if (!(/\.(jpe?g|png|gif)$/i).test(file)) {
|
|
if (self.on_error) self.on_error(1);
|
|
return false;
|
|
}
|
|
}
|
|
else {//file is a File object
|
|
var type = $.trim(file.type);
|
|
if (( type.length > 0 && !(/^image\/(jpe?g|png|gif)$/i).test(type) )
|
|
|| ( type.length == 0 && !(/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
|
|
) {
|
|
if (self.on_error) self.on_error(1);
|
|
return false;
|
|
}
|
|
if (self.max_size && file.size > self.max_size) {
|
|
if (self.on_error) self.on_error(2);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (self.on_success) self.on_success();
|
|
return true;
|
|
}
|
|
this.options.image.before_remove = this.options.image.before_remove || function () {
|
|
self.$input.val(null);
|
|
return true;
|
|
}
|
|
|
|
this.$file.ace_file_input(this.options.image).on('change',function () {
|
|
var $rand = (self.$file.val() || self.$file.data('ace_input_files')) ? Math.random() + "" + (new Date()).getTime() : null;
|
|
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!
|
|
}).closest('.ace-file-input').css({'width': '150px'}).closest('.editable-input').addClass('editable-image');
|
|
}
|
|
|
|
});
|
|
|
|
|
|
Image.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
|
tpl: '<span><input type="hidden" /></span><span><input type="file" /></span>',
|
|
inputclass: '',
|
|
image: {
|
|
style: 'well',
|
|
btn_choose: 'Change Image',
|
|
btn_change: null,
|
|
no_icon: 'icon-picture',
|
|
thumbnail: 'large'
|
|
}
|
|
});
|
|
|
|
$.fn.editabletypes.image = Image;
|
|
|
|
}(window.jQuery));
|
|
|
|
|
|
//Wysiwyg
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var Wysiwyg = function (options) {
|
|
this.init('wysiwyg', options, Wysiwyg.defaults);
|
|
|
|
//extend wysiwyg manually as $.extend not recursive
|
|
this.options.wysiwyg = $.extend({}, Wysiwyg.defaults.wysiwyg, options.wysiwyg);
|
|
};
|
|
|
|
$.fn.editableutils.inherit(Wysiwyg, $.fn.editabletypes.abstractinput);
|
|
|
|
$.extend(Wysiwyg.prototype, {
|
|
render: function () {
|
|
this.$editor = this.$input.nextAll('.wysiwyg-editor:eq(0)');
|
|
|
|
this.$tpl.parent().find('.wysiwyg-editor').show().ace_wysiwyg({
|
|
toolbar: [
|
|
'font',
|
|
null,
|
|
'fontSize',
|
|
null,
|
|
{name: 'bold', className: 'btn-info'},
|
|
{name: 'italic', className: 'btn-info'},
|
|
{name: 'underline', className: 'btn-info'},
|
|
null,
|
|
{name: 'insertunorderedlist', className: 'btn-success'},
|
|
{name: 'outdent', className: 'btn-purple'},
|
|
{name: 'indent', className: 'btn-purple'},
|
|
null,
|
|
{name: 'justifyleft', className: 'btn-primary'},
|
|
{name: 'justifycenter', className: 'btn-primary'},
|
|
{name: 'justifyright', className: 'btn-primary'},
|
|
{name: 'justifyfull', className: 'btn-inverse'},
|
|
null,
|
|
{name: 'createLink', className: 'btn-pink'},
|
|
{name: 'unlink', className: 'btn-pink'},
|
|
null,
|
|
null,
|
|
'foreColor',
|
|
null,
|
|
{name: 'undo', className: 'btn-grey'},
|
|
{name: 'redo', className: 'btn-grey'}
|
|
],
|
|
speech_button: false
|
|
}).prev().addClass('wysiwyg-style2')
|
|
.closest('.editable-input').addClass('editable-wysiwyg')
|
|
.closest('.editable-container').css({'display': 'block'});//if display is inline-block, putting large images inside the editor will expand it out of bounding box!
|
|
|
|
if (this.options.wysiwyg && this.options.wysiwyg.css)
|
|
this.$tpl.closest('.editable-wysiwyg').css(this.options.wysiwyg.css);
|
|
},
|
|
|
|
|
|
value2html: function (value, element) {
|
|
$(element).html(value);
|
|
return false;
|
|
},
|
|
|
|
html2value: function (html) {
|
|
return html;
|
|
},
|
|
|
|
value2input: function (value) {
|
|
this.$editor.html(value);
|
|
},
|
|
input2value: function () {
|
|
return this.$editor.html();
|
|
},
|
|
|
|
activate: function () {
|
|
//this.$editor.focus().get(0).setSelectionRange(200,200);
|
|
}
|
|
});
|
|
|
|
|
|
Wysiwyg.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
|
tpl: '<input type="hidden" /><div class="wysiwyg-editor"></div>',
|
|
inputclass: 'editable-wysiwyg',
|
|
wysiwyg: {
|
|
|
|
}
|
|
});
|
|
|
|
$.fn.editabletypes.wysiwyg = Wysiwyg;
|
|
|
|
}(window.jQuery));
|
|
|
|
|
|
/**
|
|
Spinner editable input.
|
|
**/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var Spinner = function (options) {
|
|
this.init('spinner', options, Spinner.defaults);
|
|
this.initSpinner(options, Spinner.defaults);
|
|
};
|
|
|
|
//inherit from Abstract input
|
|
$.fn.editableutils.inherit(Spinner, $.fn.editabletypes.abstractinput);
|
|
|
|
$.extend(Spinner.prototype, {
|
|
initSpinner: function (options, defaults) {
|
|
this.options.spinner = $.extend({}, defaults.spinner, options.spinner);
|
|
},
|
|
|
|
/**
|
|
Renders input from tpl
|
|
|
|
@method render()
|
|
**/
|
|
render: function () {
|
|
},
|
|
|
|
/**
|
|
Activates input: sets focus on the first field.
|
|
|
|
@method activate()
|
|
**/
|
|
activate: function () {
|
|
if (this.$input.is(':visible')) {
|
|
this.$input.focus();
|
|
$.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
|
|
|
|
var val = parseInt(this.$input.val());
|
|
var options = $.extend({value: val}, this.options.spinner);
|
|
this.$input.ace_spinner(options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
Attaches handler to submit form in case of 'showbuttons=false' mode
|
|
|
|
@method autosubmit()
|
|
**/
|
|
autosubmit: function () {
|
|
this.$input.keydown(function (e) {
|
|
if (e.which === 13) {
|
|
$(this).closest('form').submit();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
Spinner.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
|
tpl: '<input type="text" />',
|
|
inputclass: '',
|
|
spinner: {
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
icon_up: 'icon-plus',
|
|
icon_down: 'icon-minus',
|
|
btn_up_class: 'btn-success',
|
|
btn_down_class: 'btn-danger'
|
|
}
|
|
});
|
|
|
|
$.fn.editabletypes.spinner = Spinner;
|
|
|
|
}(window.jQuery));
|
|
|
|
|
|
/**
|
|
Slider editable input.
|
|
**/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var Slider = function (options) {
|
|
this.init('slider', options, Slider.defaults);
|
|
this.initSlider(options, Slider.defaults);
|
|
};
|
|
|
|
//inherit from Abstract input
|
|
$.fn.editableutils.inherit(Slider, $.fn.editabletypes.abstractinput);
|
|
|
|
$.extend(Slider.prototype, {
|
|
initSlider: function (options, defaults) {
|
|
this.options.slider = $.extend({}, defaults.slider, options.slider);
|
|
},
|
|
|
|
/**
|
|
Renders input from tpl
|
|
|
|
@method render()
|
|
**/
|
|
render: function () {
|
|
},
|
|
/**
|
|
Activates input: sets focus on the first field.
|
|
|
|
@method activate()
|
|
**/
|
|
activate: function () {
|
|
if (this.$input.is(':visible')) {
|
|
this.$input.focus();
|
|
$.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
|
|
|
|
var self = this;
|
|
var val = parseInt(this.$input.val());
|
|
var width = this.options.slider.width || 200;
|
|
var options = $.extend(this.options.slider, {
|
|
value: val,
|
|
slide: function (event, ui) {
|
|
var val = parseInt(ui.value);
|
|
self.$input.val(val);
|
|
|
|
if (ui.handle.firstChild == null) {/* no tooltips attached to it */
|
|
$(ui.handle).append("<div class='tooltip top in' style='display:none;top:-38px;left:-5px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>");
|
|
}
|
|
$(ui.handle.firstChild).show().children().eq(1).text(val);
|
|
}
|
|
});
|
|
|
|
this.$input.parent().addClass('editable-slider').css('width', width + 'px').slider(options);
|
|
}
|
|
},
|
|
|
|
value2html: function (value, element) {
|
|
},
|
|
|
|
/**
|
|
Attaches handler to submit form in case of 'showbuttons=false' mode
|
|
|
|
@method autosubmit()
|
|
**/
|
|
autosubmit: function () {
|
|
this.$input.keydown(function (e) {
|
|
if (e.which === 13) {
|
|
$(this).closest('form').submit();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
Slider.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
|
tpl: '<input type="text" /><span class="inline ui-slider-green"><span class="slider-display"></span></span>',
|
|
inputclass: '',
|
|
slider: {
|
|
min: 1,
|
|
max: 100,
|
|
step: 1,
|
|
range: "min"
|
|
}
|
|
});
|
|
|
|
$.fn.editabletypes.slider = Slider;
|
|
|
|
}(window.jQuery));
|
|
|