/config/js/backend-scripts.js
JavaScript | 326 lines | 258 code | 38 blank | 30 comment | 17 complexity | 2b4ccf60af7bb6780a377f7ab3df7c5b MD5 | raw file
- /**
- * Scripts for dynamic backend management tasks in the config screen.
- */
- $(document).ready(function () {
- $.each(modulesInUse, function (index, value) {
- $('.module-' + value).hide()
- })
- })
- // Remove red border on input fields when they have focus, since the user might input missing data now.
- $('input[type="text"]').focus(function () {
- $(this).removeClass('error')
- })
- $('.block__actions--edit').click(function () {
- $('#size-row').val($(this).prev().val())
- $('#layout').val(modules[$(this).prev().val()].length)
- })
- // Reorder active modules when user changes a row layout.
- $('#layout').change(function () {
- var row = $('#size-row').val()
- var cols = $(this).val()
- if (cols == 1) {
- if (modules[row][1].length > 0) {
- modulesInUse = $.grep(modulesInUse, function (value) {
- return value != modules[row][1]
- })
- $('.module-' + modules[row][1]).show()
- }
- modules[row].splice(1, 1)
- $('.module-row:eq(' + row + ')').find('.small-6:eq(1)').remove()
- $('.module-row:eq(' + row + ')').find('.small-6:eq(0)').removeClass('small-6').addClass('small-12')
- } else {
- modules[row][1] = ''
- $('.module-row:eq(' + row + ') > .small-12:eq(0)').find('.small-12:eq(0)').removeClass('small-12').addClass('small-6')
- $('.module-row:eq(' + row + ') > .small-12:eq(0) > .row > .small-6:eq(0)').after('<div class="small-6 columns"><div class="block__add">'
- + '<button class="block__add--button" href="#" aria-label="plus button" data-open="gr-modal-add">'
- + '<span class="fi-plus"></span></button></div></div>')
- }
- $.post('writeLayout.php', {'row': row, 'modules[]': modules[row]})
- .done(function () {
- $('#gr-modal-size').foundation('close')
- $('#ok').show(30, function () {
- $(this).hide('slow')
- })
- })
- })
- $('body').delegate('.block__add--button', 'click', function () {
- var col
- if ($(this).parent().parent().hasClass('small-12') || $(this).parent().parent().next().hasClass('small-6')) {
- col = 0
- } else {
- col = 1
- }
- var row = $(this).parent().parent().parent().parent().children().eq(0).children().eq(0).val()
- $('#newModulCol').val(col)
- $('#newModulRow').val(row)
- })
- $('body').delegate('.module__delete', 'click', function () {
- var col
- if ($(this).parent().parent().parent().hasClass('small-12') || $(this).parent().parent().parent().next().hasClass('small-6')) {
- col = 0
- } else {
- col = 1
- }
- var row = $(this).parent().parent().parent().parent().parent().children().eq(0).children().eq(0).val()
- var moduleId = modules[row][col]
- modules[row][col] = ''
- $.post('writeLayout.php', {'row': row, 'modules[]': modules[row]})
- .done(function () {
- $('#ok').show(30, function () {
- $(this).hide('slow')
- })
- })
- $(this).parent().parent().html('<button class="block__add--button" href="#" aria-label="plus button" data-open="gr-modal-add">'
- + '<span class="fi-plus"></span></button>')
- modulesInUse = $.grep(modulesInUse, function (value) {
- return value != moduleId
- })
- $('.module-' + moduleId).show()
- })
- // Adds a chosen module to the selected slot.
- $('.chooseModule').click(function () {
- var row = $('#newModulRow').val()
- var col = $('#newModulCol').val()
- var moduleId = $(this).children('.newModulId').val()
- modules[row][col] = moduleId
- $('.module-row').eq(row).children().eq(0).children().eq(1).children().eq(col).children().eq(0).html(
- '<div class="module">' +
- ' <button class="module__edit" data-open="gr-modal-' + moduleId + '">' +
- ' <span class="fi-pencil"></span>' +
- ' </button>' +
- ' <span class="module__title">' + moduleNames[moduleId] + '</span>' +
- ' <button class="module__delete" href="#">' +
- ' <span class="fi-trash"></span>' +
- ' </button>' +
- '</div>')
- modulesInUse.push(moduleId)
- $('.module-' + moduleId).hide()
- $.post('writeLayout.php', {'row': row, 'modules[]': modules[row]})
- .done(function () {
- $('#gr-modal-add').foundation('close')
- $('#ok').show(30, function () {
- $(this).hide('slow')
- })
- return false
- })
- })
- // Respond to a module deletion intent: user taps trash icon in module library.
- $('[data-deleteModule]').click(function (e) {
- e.preventDefault()
- moduleName = $(this).attr('data-deleteModule')
- console.log('user wants to delete ' + moduleName)
- $('[data-deleteModule-confirmbox=' + moduleName + ']').show()
- })
- $('[data-deleteModule-confirm]').click(function () {
- moduleName = $(this).attr('data-deleteModule-confirm')
- var row = $('section.module-' + moduleName)
- $.ajax({
- url: 'deleteModule.php',
- type: 'POST',
- data: {module: moduleName, action: 'delete'},
- success: function (response) {
- row.html('<p>' + LOCALE.deleteSuccess + '</p>')
- row.fadeOut(3000)
- },
- error: function (jqXHR, textStatus, errorMessage) {
- console.log(jqXHR.responseText)
- $('#fileError').text(LOCALE.internalError + jqXHR.responseText).animate({
- opacity: 0
- }, 6000, function () {
- $('#fileError').text('')
- $('#fileError').css('opacity', 1)
- })
- }
- })
- })
- $('[data-deleteModule-cancel]').click(function () {
- moduleName = $(this).attr('data-deleteModule-cancel')
- console.log('user has canceled deletion of ' + moduleName)
- $('[data-deleteModule-confirmbox=' + moduleName + ']').hide()
- })
- //@TODO: Closes the deletion confirmation box if user closes the modal before.
- $('#gr-modal-add').on('closed.zf.reveal', function () {
- $('[data-deleteModule-confirmbox]').hide()
- })
- /**
- * Installs a new module from a given ZIP file.
- * @param formData A valid module ZIP file, @see https://gitlab.com/glancr/modules for documentation.
- */
- function installModule (formData) {
- var col = $('#newModulCol').val()
- var row = $('#newModulRow').val()
- $.ajax({
- url: 'installModule.php?col=' + col + '&row=' + row,
- type: 'POST',
- data: formData,
- processData: false,
- contentType: false,
- success: function (response) {
- console.log(response)
- location.reload()
- }
- })
- }
- /**
- * Checks an uploaded module for code integrity, i.e. if all necessary files are present.
- * @param formData A FormData object {@see https://developer.mozilla.org/en-US/docs/Web/API/FormData} containing a glancr module in ZIP format.
- */
- function checkModuleIntegrity (formData) {
- $.ajax({
- url: 'checkModuleZip.php',
- type: 'POST',
- data: formData,
- processData: false,
- contentType: false,
- success: function (response) {
- console.log(response)
- if (response == 'valid') {
- $('#ok').show(30, function () {
- $(this).hide('slow')
- })
- installModule(formData)
- } else {
- $('#fileError').text(response).animate({
- opacity: 0
- }, 3000, function () {
- $('#fileError').text('')
- $('#fileError').css('opacity', 1)
- })
- }
- },
- error: function (jqXHR, textStatus, errorMessage) {
- console.log(errorMessage) // Optional
- $('#fileError').text(LOCALE.errorModule).animate({
- opacity: 0
- }, 3000, function () {
- $('#fileError').text('')
- $('#fileError').css('opacity', 1)
- })
- }
- })
- }
- function openZipUpload () {
- $('#moduleZip').click()
- }
- var zipInput = $('#moduleZip'),
- uploadButton = $('#uploadModule')
- zipInput.change(function () {
- uploadButton.attr('disabled', true)
- uploadButton.addClass('loading__button')
- var initialText = uploadButton.text()
- uploadButton.html('<div class="loading__button--inner"></div>')
- var file = zipInput[0].files[0]
- // if(!(file.type === 'application/zip' || file.type === 'application/x-zip-compressed')) {
- // zipInput.val('');
- // $('#fileError').text(LOCALE.notZip).animate({
- // opacity: 0
- // }, 3000, function() {
- // $('#fileError').text('');
- // $('#fileError').css('opacity',1);
- // });
- //
- // } else {
- var fd = new FormData()
- fd.append('moduleZip', file)
- checkModuleIntegrity(fd)
- // }
- window.setTimeout(
- function () {
- uploadButton.attr('disabled', false)
- uploadButton.html(initialText)
- uploadButton.removeClass('loading__button')
- },
- 3000
- )
- // location.reload();
- })
- function updateModules (updates) {
- if (window.confirm(LOCALE.confirmModuleUpdates)) {
- var updateModulesDiv = $('#update-notification')
- updateModulesDiv.addClass('loading')
- updateModulesDiv.html('<button class="button">' + LOCALE.updatingModulesMessage + '<span class="loading__button--inline"><span class="loading__button--inner"></div></span></button>')
- updates.forEach(function (module) {
- $.ajax({
- url: 'runUpdate.php',
- type: 'POST',
- data: {type: 'module', name: module.name, version: module.newVersion},
- success: function (response) {
- $.post('setConfigValueAjax.php', {'key': 'module_updates', 'value': ''})
- $('#update-notification').html(LOCALE.updatesSuccess).animate({
- opacity: 0
- }, 6000, function () {
- $(this).text('')
- $(this).css('opacity', 1)
- })
- },
- error: function (response) {
- $('#update-notification').html(LOCALE.internalError + response.responseText)
- //@TODO: improve error handling: At least show button to retry update or contact devs
- }
- })
- })
- }
- }
- function updateSystem () {
- if (window.confirm(LOCALE.confirmSystemUpdate)) {
- var updateSystemDiv = $('#system-update-notification')
- updateSystemDiv.addClass('loading')
- updateSystemDiv.html('<button class="button">' + LOCALE.updatingSystemMessage + '<div class="loading__button--inline"><div class="loading__button--inner"></div></div></button>')
- $.ajax({
- url: 'runUpdate.php',
- type: 'POST',
- data: {type: 'system'},
- success: function (response) {
- $('#system-update-notification').html(LOCALE.updatesSuccess).animate({
- opacity: 0
- }, 6000, function () {
- $(this).text('')
- $(this).css('opacity', 1)
- })
- location.reload()
- },
- error: function (response) {
- $('#system-update-notification').html(LOCALE.internalError + response.responseText)
- //@TODO: improve error handling: At least show button to retry update or contact devs
- }
- })
- }
- }