Cleanup and encapsulate javascript module into classes.
Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>
This commit is contained in:
Roberto Rosario
@@ -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('<span class="fa-stack fa-lg"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-times fa-stack-1x text-danger"></i></span>');
|
||||
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 = $(
|
||||
'<span class="label label-tag" style="background: ' + tag.element.style.color + ';"> ' + tag.text + '</span>'
|
||||
);
|
||||
container[0].style.background = tag.element.style.color;
|
||||
return $tag;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var tagResultTemplate = function (tag) {
|
||||
App.tagResultTemplate = function (tag) {
|
||||
if (!tag.element) { return ''; }
|
||||
var $tag = $(
|
||||
'<span class="label label-tag" style="background: ' + tag.element.style.color + ';"> ' + tag.text + '</span>'
|
||||
);
|
||||
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('<span class="fa-stack fa-lg"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-times fa-stack-1x text-danger"></i></span>');
|
||||
// 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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user