From 489b6ae1907ecbc9827c26456087b7ab8c907f81 Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Sat, 1 Jul 2017 17:54:27 -0400 Subject: [PATCH] Cleanup and encapsulate javascript module into classes. Signed-off-by: Roberto Rosario --- .../appearance/static/appearance/js/base.js | 275 ++++++++++-------- 1 file changed, 147 insertions(+), 128 deletions(-) diff --git a/mayan/apps/appearance/static/appearance/js/base.js b/mayan/apps/appearance/static/appearance/js/base.js index 2fa2826638..52e5079c21 100644 --- a/mayan/apps/appearance/static/appearance/js/base.js +++ b/mayan/apps/appearance/static/appearance/js/base.js @@ -1,74 +1,131 @@ 'use strict'; -var resizeFullHeight = function () { - $('.full-height').height($(window).height() - $('.full-height').data('height-difference')); -}; +var App = function (parameters) { + var self = this; -var set_image_noninteractive = function (image) { - // Remove border to indicate non interactive image - image.removeClass('thin_border'); - var container = image.parent().parent(); - // Save img HTML - var html = image.parent().html(); - // Remove anchor - image.parent().remove(); - // Place again img - container.html(html); -}; + parameters = parameters || {} -var dismissAlert = function (element) { - element.addClass('fadeOutUp').fadeOut('slow'); -}; + this.window = $(window); +} -var onImageError = function (image) { - image.parent().parent().html(''); - set_image_noninteractive(image); -}; - -var loadImage = function (image) { - image.error(function(event) { - onImageError(image); - }); - - image.attr('src', image.attr('data-url')); -}; - - -var tagSelectionTemplate = function (tag, container) { +App.tagSelectionTemplate = function (tag, container) { var $tag = $( ' ' + tag.text + '' ); container[0].style.background = tag.element.style.color; return $tag; -}; +} - -var tagResultTemplate = function (tag) { +App.tagResultTemplate = function (tag) { if (!tag.element) { return ''; } var $tag = $( ' ' + tag.text + '' ); return $tag; -}; - -toastr.options = { - 'closeButton': true, - 'debug': false, - 'newestOnTop': true, - 'positionClass': 'toast-top-right', - 'preventDuplicates': false, - 'onclick': null, - 'showDuration': '300', - 'hideDuration': '1000', - 'timeOut': '5000', - 'extendedTimeOut': '1000', - 'showEasing': 'swing', - 'hideEasing': 'linear', - 'showMethod': 'fadeIn', - 'hideMethod': 'fadeOut' } -var doToastrMessages = function () { +App.prototype.setupScrollView = function () { + $('.scrollable').scrollview(); +} + +App.prototype.setupTableSelector = function () { + $('th input:checkbox').click(function(e) { + var table = $(e.target).closest('table'); + var checked = $(e.target).prop('checked'); + $('td input:checkbox', table).prop('checked', checked); + }); +} + +App.prototype.setupWindowPopUp = function () { + $('a.new_window').click(function(event) { + event.preventDefault(); + var newWindow = window.open($(this).attr('href'), '_blank'); + newWindow.focus(); + }); +} + +App.prototype.setupSelect2 = function () { + $('.select2').select2({ + dropdownAutoWidth: true, + width: '100%' + }); + + $('.select2-tags').select2({ + templateSelection: App.tagSelectionTemplate, + templateResult: App.tagResultTemplate, + width: '100%' + }); +} + +App.prototype.setupFullHeightResizing = function () { + this.resizeFullHeight(); + + this.window.resize(function() { + app.resizeFullHeight(); + }); +} + +App.prototype.resizeFullHeight = function () { + $('.full-height').height(this.window.height() - $('.full-height').data('height-difference')); +} + +App.prototype.doMayanImages = function () { + $('a.fancybox').fancybox({ + beforeShow : function(){ + this.title = $(this.element).data('caption'); + }, + openEffect : 'elastic', + closeEffect : 'elastic', + prevEffect : 'none', + nextEffect : 'none', + titleShow : true, + type : 'image', + autoResize : true, + }); + + $('img.lazy-load').lazyload({ + appear: function(elements_left, settings) { + new MayanImage({element: $(this)}); + }, + }); + + $('img.lazy-load-carousel').lazyload({ + appear: function(elements_left, settings) { + new MayanImage({element: $(this)}); + }, + container: $('#carousel-container'), + threshold: 400 + }); + + $('.lazy-load').on('load', function() { + $(this).siblings('.spinner').remove(); + $(this).removeClass('lazy-load'); + }); + + $('.lazy-load-carousel').on('load', function() { + $(this).siblings('.spinner').remove(); + $(this).removeClass('lazy-load-carousel'); + }); +} + +App.prototype.doToastrMessages = function () { + toastr.options = { + 'closeButton': true, + 'debug': false, + 'newestOnTop': true, + 'positionClass': 'toast-top-right', + 'preventDuplicates': false, + 'onclick': null, + 'showDuration': '300', + 'hideDuration': '1000', + 'timeOut': '5000', + 'extendedTimeOut': '1000', + 'showEasing': 'swing', + 'hideEasing': 'linear', + 'showMethod': 'fadeIn', + 'hideMethod': 'fadeOut' + } + // Add invisible bootstrap messages to copy the styles to toastr.js $('body').append('\ @@ -108,87 +165,49 @@ var doToastrMessages = function () { }); } +var MayanImage = function (options) { + this.element = options.element; + this.load(); +} + +MayanImage.prototype.onImageError = function () { + this.element.parent().parent().html(''); + // Remove border to indicate non interactive image + this.element.removeClass('thin_border'); + + var container = this.element.parent().parent(); + // Save img HTML + var html = this.element.parent().html(); + // Remove anchor + this.element.parent().remove(); + // Place again img + container.html(html); +}; + +MayanImage.prototype.load = function () { + var self = this; + + this.element.error(function(event) { + self.onImageError(); + }); + + this.element.attr('src', this.element.attr('data-url')); +}; + jQuery(document).ready(function() { - doToastrMessages(); + var app = new App(); - $('.lazy-load').on('load', function() { - $(this).siblings('.spinner').remove(); - $(this).removeClass('lazy-load'); - }); + app.setupFullHeightResizing(); - $('.lazy-load-carousel').on('load', function() { - $(this).siblings('.spinner').remove(); - $(this).removeClass('lazy-load-carousel'); - }); + app.doMayanImages(); - resizeFullHeight(); + app.doToastrMessages(); - $(window).resize(function() { - resizeFullHeight(); - }); + app.setupSelect2(); - $('.scrollable').scrollview(); - - $('a.fancybox').fancybox({ - beforeShow : function(){ - this.title = $(this.element).data('caption'); - }, - openEffect : 'elastic', - closeEffect : 'elastic', - prevEffect : 'none', - nextEffect : 'none', - titleShow : true, - type : 'image', - autoResize : true, - }); - - $('img.lazy-load').lazyload({ - appear: function(elements_left, settings) { - loadImage($(this)); - }, - }); - - $('img.lazy-load-carousel').lazyload({ - appear: function(elements_left, settings) { - loadImage($(this)); - }, - container: $("#carousel-container"), - threshold: 400 - }); - - $('th input:checkbox').click(function(e) { - var table = $(e.target).closest('table'); - var checked = $(e.target).prop('checked'); - $('td input:checkbox', table).prop('checked', checked); - }); - - $('a.new_window').click(function(event) { - event.preventDefault(); - var newWindow = window.open($(this).attr('href'), '_blank'); - newWindow.focus(); - }); - - $('.alert button.close').click(function() { - dismissAlert($(this).parent()); - }); - - setTimeout(function() { - $('.alert-success').each(function() { - dismissAlert($(this)); - }); - - }, 3000); - - $('.select2').select2({ - dropdownAutoWidth: true, - width: '100%' - }); - - $('.select2-tags').select2({ - templateSelection: tagSelectionTemplate, - templateResult: tagResultTemplate, - width: '100%' - }); + app.setupScrollView(); + app.setupTableSelector(); + app.setupWindowPopUp(); });