var InplaceEditingManager = {
bindText: function(element) { $(element).best_in_place(); }, tryBindText: function(parentElementOrSelector) { var self = this; $.each($(parentElementOrSelector).find('.best_in_place.inplace_editor'), function(index, element) { self.bindText(element); }); }, bindImage: function(imageForm) { return new asyncImageForm({ formElement: $(imageForm), inputFileElement: $(imageForm).find('input[type=file]'), imagePreviewElement: $(imageForm).find('img.editable-preview'), imageChangerElement: $(imageForm).find('a.insert-image, .image-container'), errorsGroup: '#{localized_object.class.name.downcase}', events: { imageChanged: function() { $(imageForm).find('a.insert-image').hide(); $(imageForm).find('.actions-container').show(); $(imageForm).find('.actions-container input').prop('disabled', false); }, imageUploading: function() { $(imageForm).find('.actions-container input').prop('disabled', true) }, imageUploadSuccess: function() { $(imageForm).find('.actions-container').hide(); }, imageUploadFail: function() { $(imageForm).find('.actions-container').show(); $(imageForm).find('.actions-container input').prop('disabled', false) } } }); }, tryBindImage: function(parentElementOrSelector) { var self = this; $.each($(parentElementOrSelector).find('.inplace_editor_image'), function(index, element) { self.bindImage(element); }); }, bindImageBG: function(imageBGContainer) { return new asyncImageBGForm({ containerElement: $(imageBGContainer), formElement: $(imageBGContainer).find('form'), inputFileElement: $(imageBGContainer).find('input[type=file]'), imageChangerElement: $(imageBGContainer).find('a.insert-image, a.edit-image'), errorsGroup: '#{localized_object.class.name.downcase}', events: { imageChanged: function() { $(imageBGContainer).find('a.insert-image').hide(); $(imageBGContainer).find('.actions-container').show(); $(imageBGContainer).find('.actions-container input').prop('disabled', false); }, imageUploading: function() { $(imageBGContainer).find('.actions-container input').prop('disabled', true) }, imageUploadSuccess: function() { $(imageBGContainer).find('.actions-container').hide(); }, imageUploadFail: function() { $(imageBGContainer).find('.actions-container').show(); $(imageBGContainer).find('.actions-container input').prop('disabled', false) } } }); }, tryBindImageBG: function(parentElementOrSelector) { var self = this; $.each($(parentElementOrSelector).find('.inplace_editor_image_bg'), function(index, element) { self.bindImageBG(element); }); }, bindAll: function(parentElement) { var self = this; if (!parentElement) parentElement = 'body'; self.tryBindText(parentElement); self.tryBindImage(parentElement); self.tryBindImageBG(parentElement); }
}
function asyncImageForm(config) {
var image_form = this; this.config = config; this.config.setConfigOrSelector = function(prefix) { var self = this; var key = prefix + 'Element'; if (!self.hasOwnProperty(key) || !self[key]) { self[key] = $(self[prefix + 'Selector']); } }; // var config = { // formSelector: 'form.async-republic-image', // formElement: null, // inputFileSelector: 'form.async-republic-image .input_addPictureButton', // inputFileElement: null, // imagePreviewSelector: 'form.async-republic-image img.preview', // imagePreviewElement: null, // imageChangerSelector: 'form.async-republic-image img.preview', // imageChangerElement: null, // errorsGroup: 'republic_image', // events: { // imageChanged: function() {}, // imageUploading: function() {}, // imageUploadSuccess: function() {}, // imageUploadFail: function() {} // } // } var elementProperties = ['form', 'inputFile', 'imagePreview', 'imageChanger']; for (var i = 0; i < elementProperties.length; i++) { image_form.config.setConfigOrSelector(elementProperties[i]); } image_form.config.inputFileElement.change(function(){ setImagePreview(this, image_form.config.imagePreviewElement); image_form.config.events.imageChanged(this); }); image_form.config.imageChangerElement.click(function(e){ if(typeof e.preventDefault === 'function') e.preventDefault(); image_form.config.inputFileElement.click(); return false; }); image_form.config.formElement.submit(function (event) { event.preventDefault(); //grab all form data var formData = new FormData($(this)[0]); image_form.config.events.imageUploading(this); $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: formData, cache: false, contentType: false, processData: false, success: function (responseData) { image_form.config.events.imageUploadSuccess(responseData); }, error: function () { image_form.config.events.imageUploadFail(this); } }); return false; });
};
function setImagePreview(input, imageElement, noImageElement) {
if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { if (noImageElement) noImageElement.hide(); imageElement.attr('src', e.target.result); imageElement.show(); } reader.readAsDataURL(input.files[0]); } else { if (noImageElement) noImageElement.show(); imageElement.hide(); }
}
function asyncImageBGForm(config) {
var image_bg_form = this; this.config = config; this.config.setConfigOrSelector = function(prefix) { var self = this; var key = prefix + 'Element'; if (!self.hasOwnProperty(key) || !self[key]) { self[key] = $(self[prefix + 'Selector']); } }; // var config = { // containerSelector: '.image_bg_container', // containerElement: null, // formSelector: 'form.async-republic-image', // formElement: null, // inputFileSelector: 'form.async-republic-image .input_addPictureButton', // inputFileElement: null, // imageChangerSelector: 'form.async-republic-image img.preview', // imageChangerElement: null, // errorsGroup: 'republic_image', // events: { // imageChanged: function() {}, // imageUploading: function() {}, // imageUploadSuccess: function() {}, // imageUploadFail: function() {} // } // } var elementProperties = ['container', 'form', 'inputFile', 'imageChanger']; for (var i = 0; i < elementProperties.length; i++) { image_bg_form.config.setConfigOrSelector(elementProperties[i]); } image_bg_form.config.inputFileElement.change(function(){ setImageBGPreview(this, image_bg_form.config.containerElement); image_bg_form.config.events.imageChanged(this); }); image_bg_form.config.imageChangerElement.click(function(e){ if(typeof e.preventDefault === 'function') e.preventDefault(); image_bg_form.config.inputFileElement.click(); return false; }); image_bg_form.config.formElement.submit(function (event) { event.preventDefault(); //grab all form data var formData = new FormData($(this)[0]); image_bg_form.config.events.imageUploading(this); $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: formData, cache: false, contentType: false, processData: false, success: function (responseData) { image_bg_form.config.events.imageUploadSuccess(responseData); }, error: function () { image_bg_form.config.events.imageUploadFail(this); } }); return false; });
};
function setImageBGPreview(input, imageElement, noImageElement) {
if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { if (noImageElement) noImageElement.hide(); var originalBG = $(imageElement).attr('data-background-image'); if (!originalBG) $(imageElement).attr('data-background-image', $(imageElement).css('background-image')); $(imageElement).css('background-image', 'url(' + e.target.result + ')'); } reader.readAsDataURL(input.files[0]); } else { if (noImageElement) noImageElement.show(); var originalBG = $(imageElement).attr('data-background-image'); if (originalBG && originalBG.length) $(imageElement).css('background-image', originalBG); }
}