app/assets/javascripts/admin/banners/banners.js in tb_banners-1.1.6 vs app/assets/javascripts/admin/banners/banners.js in tb_banners-1.2.0.beta1
- old
+ new
@@ -1,55 +1,41 @@
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
-spud.admin.banners = new function(){
+(function(){
- var self = this;
- var html5upload = false;
- var bannerEditId = false;
+var html5upload = false;
+var bannerEditId = false;
+spud.admin.banners = {
+
// Index Page
/////////////
-
- this.init = function(){
+ init: function(){
if(typeof(FormData) != 'undefined'){
html5upload = true;
}
- $('.admin-banner-set-item-add').on('click', self.clickedAddNewBanner);
- $('.admin-banner-set-items-container').on('click', '.admin-banner-set-item-edit', self.clickedEditBanner);
- $('.admin-banner-set-items-container').on('click', '.admin-banner-set-item-delete', self.clickedDeleteBanner);
- $('.modal-body').on('submit', '.spud_banner_form', self.submittedBannerForm);
-
+ $('.admin-banner-set-item-add').on('click', clickedAddNewBanner);
+ $('.admin-banner-set-items-container').on('click', '.admin-banner-set-item-edit', clickedEditBanner);
+ $('.admin-banner-set-items-container').on('click', '.admin-banner-set-item-delete', clickedDeleteBanner);
+ $('.modal-body').on('submit', '.admin-banner-form', submittedBannerForm);
$('.admin-banner-set-items-container').sortable({
- stop: self.sortedBanners,
+ stop: sortedBanners,
helper: fixHelper
});
+ }
+};
- /*
- * Workaround for bug when using Bootstrap 2 + Tinymce 4 that prevents the creation of hyperlinks while
- * running in a modal dialog
- *
- * See: http://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable
- *
- * NOTE: REMOVE THIS CODE WHEN UPGRADING TO BOOTSTRAP 3
- */
- $(document).on('focusin', function(e) {
- if($(e.target).closest(".mce-window").length){
- e.stopImmediatePropagation();
- }
- });
- };
+// http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
+var fixHelper = function(e, ui) {
+ ui.children().each(function() {
+ $(this).width($(this).width());
+ });
+ return ui;
+};
- // http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
- var fixHelper = function(e, ui) {
- ui.children().each(function() {
- $(this).width($(this).width());
- });
- return ui;
- };
-
- self.clickedAddNewBanner = function(e){
+var clickedAddNewBanner = function(e){
e.preventDefault();
bannerEditId = false;
$.ajax({
url: $(this).attr('href'),
dataType: 'html',
@@ -61,157 +47,154 @@
initForm();
}
});
};
- self.clickedEditBanner = function(e){
- e.preventDefault();
- spud.admin.editor.unload();
- bannerEditId = parseInt($(this).parents('.admin-banner-set-item').attr('data-id'), 10);
- $.ajax({
- url: $(this).attr('href'),
- dataType: 'html',
- success: function(html, textStatus, jqXHR){
- spud.admin.modal.displayWithOptions({
- title: 'Edit Banner',
- html: html
- });
- initForm();
- }
- });
- };
-
- self.clickedDeleteBanner = function(e){
- e.preventDefault();
- var el = $(this);
- $.ajax({
- url: el.attr('href'),
- type: 'post',
- data: {'_method':'delete'},
- complete: function(jqXHR, textStatus){
- var parent = el.parents('.admin-banner-set-item');
- parent.fadeOut(200, function(){
- parent.remove();
- });
- if(textStatus != 'success'){
- console.warn('Something went wrong:', jqXHR);
- }
- }
- });
- };
-
- self.submittedBannerForm = function(e){
- if(html5upload){
- e.preventDefault();
-
- var form = $(this);
- var fd = new FormData();
-
- $('input[type=text], input[type=hidden], select').each(function(index, element){
- var input = $(element);
- var name = input.attr('name');
- var value = input.val();
- fd.append(name, value);
+var clickedEditBanner = function(e){
+ e.preventDefault();
+ spud.admin.editor.unload();
+ bannerEditId = parseInt($(this).parents('.admin-banner-set-item').attr('data-id'), 10);
+ $.ajax({
+ url: $(this).attr('href'),
+ dataType: 'html',
+ success: function(html, textStatus, jqXHR){
+ spud.admin.modal.displayWithOptions({
+ title: 'Edit Banner',
+ html: html
});
+ initForm();
+ }
+ });
+};
- var richText = form.find('.spud_banner_rich_text');
- if(richText.length > 0){
- fd.append('spud_banner[rich_text]', richText.val());
+var clickedDeleteBanner = function(e){
+ e.preventDefault();
+ var el = $(this);
+ $.ajax({
+ url: el.attr('href'),
+ type: 'post',
+ data: {'_method':'delete'},
+ complete: function(jqXHR, textStatus){
+ var parent = el.parents('.admin-banner-set-item');
+ parent.fadeOut(200, function(){
+ parent.remove();
+ });
+ if(textStatus != 'success'){
+ console.warn('Something went wrong:', jqXHR);
}
- else{
- fd.append('spud_banner[rich_text]', '');
- }
+ }
+ });
+};
- var file = form.find('#spud_banner_banner')[0].files[0];
- if(file){
- fd.append('spud_banner[banner]', file);
- $('.spud_banner_upload_progress').show();
- }
+var submittedBannerForm = function(e){
+ if(html5upload){
+ e.preventDefault();
- var xhr = new XMLHttpRequest();
- xhr.upload.addEventListener('progress', self.onFileUploadProgress);
- xhr.addEventListener('load', self.onFileUploadComplete);
- xhr.addEventListener('error', self.onFileUploadError);
- xhr.addEventListener('abort', self.onFileUploadAbort);
- xhr.open('POST', form.attr('action'));
- xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
- xhr.send(fd);
- return false;
- }
- };
+ var form = $(this);
+ var fd = new FormData();
+
+ $('input[type=text], input[type=hidden], select').each(function(index, element){
+ var input = $(element);
+ var name = input.attr('name');
+ var value = input.val();
+ fd.append(name, value);
+ });
- self.onFileUploadProgress = function(e){
- var percent = Math.round(e.loaded * 100 / e.total);
- var progress = $('.spud_banner_upload_progress');
- progress.find('.bar').css({width: percent + '%'});
- if(percent == 100){
- progress.addClass('progress-success');
+ var richText = form.find('.admin-banner-rich-text');
+ if(richText.length > 0){
+ fd.append('spud_banner[rich_text]', richText.val());
}
- };
+ else{
+ fd.append('spud_banner[rich_text]', '');
+ }
- self.onFileUploadComplete = function(e){
- switch(this.status){
- case 200:
- self.onLegacyUploadComplete(e.target.response);
- break;
- case 422:
- self.onLegacyUploadError(e.target.response);
- break;
- default:
- window.alert("Whoops! Something has gone wrong.");
+ var file = form.find('#spud_banner_banner')[0].files[0];
+ if(file){
+ fd.append('spud_banner[banner]', file);
+ $('.admin-banner-upload-progress').show();
}
- };
- self.onFileUploadError = function(e){
+ var xhr = new XMLHttpRequest();
+ xhr.upload.addEventListener('progress', onFileUploadProgress);
+ xhr.addEventListener('load', onFileUploadComplete);
+ xhr.addEventListener('error', onFileUploadError);
+ xhr.addEventListener('abort', onFileUploadAbort);
+ xhr.open('POST', form.attr('action'));
+ xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+ xhr.send(fd);
+ return false;
+ }
+};
- };
+var onFileUploadProgress = function(e){
+ var percent = Math.round(e.loaded * 100 / e.total);
+ var progress = $('.admin-banner-upload-progress');
+ progress.find('.bar').css({width: percent + '%'});
+ if(percent == 100){
+ progress.addClass('progress-success');
+ }
+};
- self.onFileUploadAbort = function(e){
+var onFileUploadComplete = function(e){
+ switch(this.status){
+ case 200:
+ spud.admin.banners.onLegacyUploadComplete(e.target.response);
+ break;
+ case 422:
+ spud.admin.banners.onLegacyUploadError(e.target.response);
+ break;
+ default:
+ window.alert("Whoops! Something has gone wrong.");
+ }
+};
- };
+var onFileUploadError = function(e){
- // Non-html5 upload
- self.onLegacyUploadComplete = function(html){
- if(bannerEditId){
- var item = $('.admin-banner-set-item[data-id="'+bannerEditId+'"]');
- item.replaceWith(html);
- }
- else{
- $('.admin-banner-set-items-container').append(html);
- }
- spud.admin.modal.hide();
- };
+};
- self.onLegacyUploadError = function(html){
- $('.spud_banner_form').replaceWith(html);
- initForm();
- };
+var onFileUploadAbort = function(e){
- self.sortedBanners = function(e, ui){
- var ids = [];
- $('.admin-banner-set-item').each(function(){
- ids.push($(this).attr('data-id'));
- });
- $.ajax({
- url: '/admin/banners/sort',
- type: 'post',
- data: {spud_banner_ids:ids, _method:'put'}
- });
- };
+};
- // Form Page
- ////////////
+// Non-html5 upload
+spud.admin.banners.onLegacyUploadComplete = function(html){
+ if(bannerEditId){
+ var item = $('.admin-banner-set-item[data-id="'+bannerEditId+'"]');
+ item.replaceWith(html);
+ }
+ else{
+ $('.admin-banner-set-items-container').append(html);
+ }
+ spud.admin.modal.hide();
+};
- var initForm = function(){
- var richText = $('#spud_banner_rich_text');
- if(richText){
- tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'spud_banner_rich_text');
- spud.admin.editor.init({
- selector: '#spud_banner_rich_text',
- buttons: ['bold','italic','underline','formatselect','|','bullist','numlist','|','link','unlink','anchor', '|', 'code'],
- height: 300,
- width: 500
- });
- }
- };
+spud.admin.banners.onLegacyUploadError = function(html){
+ $('.admin-banner-form').replaceWith(html);
+ initForm();
+};
-}();
+var sortedBanners = function(e, ui){
+ var ids = [];
+ $('.admin-banner-set-item').each(function(){
+ ids.push($(this).attr('data-id'));
+ });
+ $.ajax({
+ url: '/admin/banners/sort',
+ type: 'post',
+ data: {spud_banner_ids:ids, _method:'put'}
+ });
+};
+
+var initForm = function(){
+ var richText = $('#admin-banner-rich-text');
+ if(richText){
+ tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'admin-banner-rich-text');
+ spud.admin.editor.init({
+ selector: '#admin-banner-rich-text',
+ buttons: ['bold','italic','underline','formatselect','|','bullist','numlist','|','link','unlink','anchor', '|', 'code'],
+ height: 300,
+ width: 500
+ });
+ }
+};
+
+})();