From dfe8e8de701fa594604298d3dd05be59a6ec19b8 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 1 Jan 2015 15:35:22 -0500 Subject: [PATCH] image uploading for categories, #2463 --- public/less/admin/admin.less | 16 ++ public/src/admin/manage/categories.js | 321 +------------------------- public/src/admin/manage/category.js | 112 ++++----- src/views/admin/manage/categories.tpl | 11 - src/views/admin/manage/category.tpl | 26 ++- 5 files changed, 99 insertions(+), 387 deletions(-) diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less index 220ea5ff6d..867434fe46 100644 --- a/public/less/admin/admin.less +++ b/public/less/admin/admin.less @@ -265,4 +265,20 @@ tr:hover { cursor: move; } +} + +.category-preview { + width: 100%; + height: 100px; + text-align: center; + color: white; + margin-top: 0; + + .icon { + width: 30px; + height: 30px; + line-height: 40px; + display: inline-block; + margin: 35px 5px 0 5px; + } } \ No newline at end of file diff --git a/public/src/admin/manage/categories.js b/public/src/admin/manage/categories.js index f28b9c52bf..fd6658fe9c 100644 --- a/public/src/admin/manage/categories.js +++ b/public/src/admin/manage/categories.js @@ -1,47 +1,12 @@ "use strict"; /*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/ -define('admin/manage/categories', [ - 'uploader', - 'admin/modules/iconSelect', - 'admin/modules/colorpicker' -], function(uploader, iconSelect, colorpicker) { +define('admin/manage/categories', function() { var Categories = {}; Categories.init = function() { var bothEl = $('#active-categories, #disabled-categories'); - var modified_categories = {}; - - function modified(el) { - var cid = $(el).parents('li').attr('data-cid'); - if(cid) { - modified_categories[cid] = modified_categories[cid] || {}; - modified_categories[cid][$(el).attr('data-name')] = $(el).val(); - } - } - - function save() { - if(Object.keys(modified_categories).length) { - socket.emit('admin.categories.update', modified_categories, function(err, result) { - if (err) { - return app.alertError(err.message); - } - - if (result && result.length) { - app.alert({ - title: 'Updated Categories', - message: 'Category IDs ' + result.join(', ') + ' was successfully updated.', - type: 'success', - timeout: 2000 - }); - } - }); - modified_categories = {}; - } - return false; - } - function updateCategoryOrders(evt, ui) { var categories = $(evt.target).children(), modified = {}, @@ -82,11 +47,6 @@ define('admin/manage/categories', [ }); }); - $('.blockclass, .admin-categories form select').each(function() { - var $this = $(this); - $this.val($this.attr('data-value')); - }); - function showCreateCategoryModal() { $('#new-category-modal').modal(); } @@ -119,283 +79,8 @@ define('admin/manage/categories', [ }); } - function enableColorPicker(idx, inputEl) { - var $inputEl = $(inputEl), - previewEl = $inputEl.parents('[data-cid]').find('.preview-box'); - - colorpicker.enable($inputEl, function(hsb, hex) { - if ($inputEl.attr('data-name') === 'bgColor') { - previewEl.css('background', '#' + hex); - } else if ($inputEl.attr('data-name') === 'color') { - previewEl.css('color', '#' + hex); - } - - modified($inputEl[0]); - }); - } - - function setupEditTargets() { - $('[data-edit-target]').on('click', function() { - var $this = $(this), - target = $($this.attr('data-edit-target')); - - $this.addClass('hide'); - target.removeClass('hide').on('blur', function() { - $this.removeClass('hide').children('span').html(this.value); - $(this).addClass('hide'); - }).val($this.children('span').html()); - - target.focus(); - }); - } - - $(function() { - var url = window.location.href, - parts = url.split('/'), - active = parts[parts.length - 1]; - - $('.nav-pills li').removeClass('active'); - $('.nav-pills li a').each(function() { - var $this = $(this); - if ($this.attr('href').match(active)) { - $this.parent().addClass('active'); - return false; - } - }); - - - $('#addNew').on('click', showCreateCategoryModal); - $('#create-category-btn').on('click', createNewCategory); - - $('#active-categories, #disabled-categories, #new-category-modal').on('click', '.icon', function(ev) { - iconSelect.init($(this).find('i'), modified); - }); - - $('.admin-categories form input, .admin-categories form select').on('change', function(ev) { - modified(ev.target); - }); - - // Colour Picker - $('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker); - - $('.admin-categories').on('click', '.save', save); - $('.admin-categories').on('click', '.purge', function() { - var categoryRow = $(this).parents('li[data-cid]'); - var cid = categoryRow.attr('data-cid'); - - bootbox.confirm('Do you really want to purge this category "' + categoryRow.find('#cid-' + cid + '-name').val() + '"?
Warning! All topics and posts in this category will be purged!', function(confirm) { - if (!confirm) { - return; - } - socket.emit('admin.categories.purge', cid, function(err) { - if (err) { - return app.alertError(err.message); - } - app.alertSuccess('Category purged!'); - categoryRow.remove(); - }); - }); - }); - - $('.admin-categories').on('click', '.permissions', function() { - var cid = $(this).parents('li[data-cid]').attr('data-cid'); - Categories.launchPermissionsModal(cid); - return false; - }); - - - $('.admin-categories').on('click', '.upload-button', function() { - var inputEl = $(this), - cid = inputEl.parents('li[data-cid]').attr('data-cid'); - - uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) { - inputEl.val(imageUrlOnServer); - var previewBox = inputEl.parents('li[data-cid]').find('.preview-box'); - previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')') - .css('background-size', 'cover'); - modified(inputEl[0]); - }); - }); - - $('.admin-categories').on('click', '.delete-image', function() { - var parent = $(this).parents('li[data-cid]'), - inputEl = parent.find('.upload-button'), - preview = parent.find('.preview-box'), - bgColor = parent.find('.category_bgColor').val(); - - inputEl.val(''); - modified(inputEl[0]); - - preview.css('background', bgColor); - - $(this).addClass('hide').hide(); - }); - - $('#revertChanges').on('click', function() { - ajaxify.refresh(); - }); - - setupEditTargets(); - - $('button[data-action="setParent"]').on('click', function() { - var cid = $(this).parents('[data-cid]').attr('data-cid'), - modal = $('#setParent'); - - modal.find('select').val($(this).attr('data-parentCid')); - modal.attr('data-cid', cid).modal(); - }); - - $('button[data-action="removeParent"]').on('click', function() { - var cid = $(this).parents('[data-cid]').attr('data-cid'); - var payload= {}; - payload[cid] = { - parentCid: 0 - }; - socket.emit('admin.categories.update', payload, function(err) { - if (err) { - return app.alertError(err.message); - } - ajaxify.go('admin/manage/categories/active'); - }); - }); - - $('#setParent [data-cid]').on('click', function() { - var modalEl = $('#setParent'), - parentCid = $(this).attr('data-cid'), - payload = {}; - - payload[modalEl.attr('data-cid')] = { - parentCid: parentCid - }; - - socket.emit('admin.categories.update', payload, function(err) { - modalEl.one('hidden.bs.modal', function() { - ajaxify.go('admin/manage/categories/active'); - }); - modalEl.modal('hide'); - }); - }); - }); - }; - - Categories.launchPermissionsModal = function(cid) { - var modal = $('#category-permissions-modal'), - searchEl = modal.find('#permission-search'), - resultsEl = modal.find('.search-results.users'), - groupsResultsEl = modal.find('.search-results.groups'), - searchDelay; - - // Clear the search field and results - searchEl.val(''); - resultsEl.html(''); - - searchEl.off().on('keyup', function() { - var searchEl = this, - liEl; - - clearTimeout(searchDelay); - - searchDelay = setTimeout(function() { - socket.emit('admin.categories.search', { - username: searchEl.value, - cid: cid - }, function(err, results) { - if(err) { - return app.alertError(err.message); - } - - templates.parse('admin/partials/categories/users', { - users: results - }, function(html) { - resultsEl.html(html); - }); - }); - }, 250); - }); - - Categories.refreshPrivilegeList(cid); - - resultsEl.off().on('click', '[data-priv]', function(e) { - var anchorEl = $(this), - uid = anchorEl.parents('li[data-uid]').attr('data-uid'), - privilege = anchorEl.attr('data-priv'); - e.preventDefault(); - e.stopPropagation(); - - socket.emit('admin.categories.setPrivilege', { - cid: cid, - uid: uid, - privilege: privilege, - set: !anchorEl.hasClass('active') - }, function(err) { - if (err) { - return app.alertError(err.message); - } - anchorEl.toggleClass('active', !anchorEl.hasClass('active')); - Categories.refreshPrivilegeList(cid); - }); - }); - - modal.off().on('click', '.members li > img', function() { - searchEl.val($(this).attr('title')); - searchEl.keyup(); - }); - - // User Groups and privileges - socket.emit('admin.categories.groupsList', cid, function(err, results) { - if(err) { - return app.alertError(err.message); - } - - templates.parse('admin/partials/categories/groups', { - groups: results - }, function(html) { - groupsResultsEl.html(html); - }); - }); - - groupsResultsEl.off().on('click', '[data-priv]', function(e) { - var anchorEl = $(this), - name = anchorEl.parents('li[data-name]').attr('data-name'), - privilege = anchorEl.attr('data-priv'); - e.preventDefault(); - e.stopPropagation(); - - socket.emit('admin.categories.setGroupPrivilege', { - cid: cid, - name: name, - privilege: privilege, - set: !anchorEl.hasClass('active') - }, function(err) { - if (!err) { - anchorEl.toggleClass('active'); - } - }); - }); - - modal.modal(); - }; - - Categories.refreshPrivilegeList = function (cid) { - var modalEl = $('#category-permissions-modal'), - memberList = $('.members'); - - socket.emit('admin.categories.getPrivilegeSettings', cid, function(err, privilegeList) { - var membersLength = privilegeList.length, - liEl, x, userObj; - - memberList.html(''); - if (membersLength > 0) { - for(x = 0; x < membersLength; x++) { - userObj = privilegeList[x]; - liEl = $('
  • ').attr('data-uid', userObj.uid).html(''); - memberList.append(liEl); - } - } else { - liEl = $('
  • ').addClass('empty').html('None.'); - memberList.append(liEl); - } - }); + $('#addNew').on('click', showCreateCategoryModal); + $('#create-category-btn').on('click', createNewCategory); }; return Categories; diff --git a/public/src/admin/manage/category.js b/public/src/admin/manage/category.js index 36f6867a1a..9ba5d28e7b 100644 --- a/public/src/admin/manage/category.js +++ b/public/src/admin/manage/category.js @@ -11,9 +11,12 @@ define('admin/manage/category', [ Category.init = function() { var modified_categories = {}; - function modified(el) { - var cid = $(el).parents('form').attr('data-cid'); - if(cid) { + function modified(el, cid) { + if (!cid) { + cid = $(el).parents('form').attr('data-cid'); + } + + if (cid) { modified_categories[cid] = modified_categories[cid] || {}; modified_categories[cid][$(el).attr('data-name')] = $(el).val(); } @@ -75,42 +78,52 @@ define('admin/manage/category', [ }); } - $(function() { - var url = window.location.href, - parts = url.split('/'), - active = parts[parts.length - 1], - optionsEl = $('.options'); - - $('#new-category-modal').on('click', '.icon', function(ev) { - iconSelect.init($(this).find('i'), modified); - }); - - $('form.category input, form.category select').on('change', function(ev) { - modified(ev.target); - }); + // If any inputs have changed, prepare it for saving + $('form.category input, form.category select').on('change', function(ev) { + modified(ev.target); + }); - // Colour Picker - $('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker); + // Colour Picker + $('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker); - optionsEl.on('click', '.save', save); - optionsEl.on('click', '.revert', ajaxify.refresh); - optionsEl.on('click', '.purge', function() { - var categoryRow = $(this).parents('li[data-cid]'); - var cid = categoryRow.attr('data-cid'); + // Options menu events + var optionsEl = $('.options'); + optionsEl.on('click', '.save', save); + optionsEl.on('click', '.revert', ajaxify.refresh); + optionsEl.on('click', '.purge', function() { + var categoryRow = $(this).parents('li[data-cid]'); + var cid = categoryRow.attr('data-cid'); - bootbox.confirm('

    Do you really want to purge this category "' + $('form.category').find('input[data-name="name"]').val() + '"?

    Warning! All topics and posts in this category will be purged!

    ', function(confirm) { - if (!confirm) { - return; + bootbox.confirm('

    Do you really want to purge this category "' + $('form.category').find('input[data-name="name"]').val() + '"?

    Warning! All topics and posts in this category will be purged!

    ', function(confirm) { + if (!confirm) { + return; + } + socket.emit('admin.categories.purge', cid, function(err) { + if (err) { + return app.alertError(err.message); } - socket.emit('admin.categories.purge', cid, function(err) { - if (err) { - return app.alertError(err.message); - } - app.alertSuccess('Category purged!'); - categoryRow.remove(); - }); + app.alertSuccess('Category purged!'); + categoryRow.remove(); }); }); + }); + + // Image Uploader + $('.upload-button').on('click', function() { + var inputEl = $(this), + cid = inputEl.attr('data-cid'); + + uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) { + inputEl.val(imageUrlOnServer); + var previewBox = inputEl.siblings('.category-preview'); + previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')') + .css('background-size', 'cover'); + modified(inputEl[0], cid); + }); + }); + + $(function() { + // $('.admin-categories').on('click', '.permissions', function() { // var cid = $(this).parents('li[data-cid]').attr('data-cid'); @@ -119,32 +132,19 @@ define('admin/manage/category', [ // }); - $('.admin-categories').on('click', '.upload-button', function() { - var inputEl = $(this), - cid = inputEl.parents('li[data-cid]').attr('data-cid'); + // $('.admin-categories').on('click', '.delete-image', function() { + // var parent = $(this).parents('li[data-cid]'), + // inputEl = parent.find('.upload-button'), + // preview = parent.find('.preview-box'), + // bgColor = parent.find('.category_bgColor').val(); - uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) { - inputEl.val(imageUrlOnServer); - var previewBox = inputEl.parents('li[data-cid]').find('.preview-box'); - previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')') - .css('background-size', 'cover'); - modified(inputEl[0]); - }); - }); - - $('.admin-categories').on('click', '.delete-image', function() { - var parent = $(this).parents('li[data-cid]'), - inputEl = parent.find('.upload-button'), - preview = parent.find('.preview-box'), - bgColor = parent.find('.category_bgColor').val(); - - inputEl.val(''); - modified(inputEl[0]); + // inputEl.val(''); + // modified(inputEl[0]); - preview.css('background', bgColor); + // preview.css('background', bgColor); - $(this).addClass('hide').hide(); - }); + // $(this).addClass('hide').hide(); + // }); setupEditTargets(); diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl index 779c1ce624..ebdeaad6bd 100644 --- a/src/views/admin/manage/categories.tpl +++ b/src/views/admin/manage/categories.tpl @@ -47,16 +47,6 @@ -
    -
    -
    Categories Control Panel
    -
    - - -
    -
    -
    -
    Categories
    @@ -106,5 +96,4 @@
    -
    \ No newline at end of file diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl index 00d6ab64ed..36e424f241 100644 --- a/src/views/admin/manage/category.tpl +++ b/src/views/admin/manage/category.tpl @@ -1,5 +1,5 @@
    -
    +
    Categories
    @@ -81,9 +81,31 @@
    + +
    -
    +
    + +
    Categories Control Panel