From e4f0cd856a8bdbda98a7587ce159240384fcedcc Mon Sep 17 00:00:00 2001 From: barisusakli Date: Sat, 26 Sep 2015 13:00:53 -0400 Subject: [PATCH] prettier admin navigation page --- public/less/admin/general/navigation.less | 13 +++-- public/src/admin/general/navigation.js | 71 ++++++++++++++++++----- src/controllers/admin/navigation.js | 8 +++ src/views/admin/general/navigation.tpl | 62 ++++++++++++++------ 4 files changed, 117 insertions(+), 37 deletions(-) diff --git a/public/less/admin/general/navigation.less b/public/less/admin/general/navigation.less index 338971b4a1..995406d42f 100644 --- a/public/less/admin/general/navigation.less +++ b/public/less/admin/general/navigation.less @@ -1,10 +1,15 @@ +#main-nav { + .active { + background-color: #eee; + } + + li { + cursor: move; + } +} #navigation { ul { list-style-type: none; padding: 0; - - li { - cursor: move; - } } } \ No newline at end of file diff --git a/public/src/admin/general/navigation.js b/public/src/admin/general/navigation.js index 9eba574732..9345a3e86d 100644 --- a/public/src/admin/general/navigation.js +++ b/public/src/admin/general/navigation.js @@ -1,7 +1,7 @@ "use strict"; /* global define, app, ajaxify, socket, templates, bootbox */ -define('admin/general/navigation', ['translator'], function(translator) { +define('admin/general/navigation', ['translator', 'iconSelect'], function(translator, iconSelect) { var navigation = {}, available; @@ -9,46 +9,87 @@ define('admin/general/navigation', ['translator'], function(translator) { available = ajaxify.data.available; $('#enabled').html(translator.unescape($('#enabled').html())); + + $('#main-nav').html(translator.unescape($('#main-nav').html())); + translator.translate(translator.unescape($('#available').html()), function(html) { $('#available').html(html) .find('li').draggable({ - connectToSortable: '#enabled', + connectToSortable: '#main-nav', helper: 'clone', distance: 10, stop: drop }); }); - $('#enabled') - .on('click', '.delete', remove) - .on('click', '.toggle', toggle) - .sortable() - .droppable({ - accept: $('#available li') + $('#main-nav').sortable().droppable({ + accept: $('#available li') + }); + + $('#enabled').on('click', '.iconPicker', function() { + var iconEl = $(this).find('i'); + iconSelect.init(iconEl, function(el) { + var newIconClass = el.attr('value'); + var index = iconEl.parents('[data-index]').attr('data-index'); + $('#main-nav [data-index="' + index + '"] i').attr('class', 'fa fa-fw ' + newIconClass); + iconEl.siblings('[name="iconClass"]').val(newIconClass); }); + }); + + $('#main-nav').on('click', 'li', onSelect); + + $('#enabled') + .on('click', '.delete', remove) + .on('click', '.toggle', toggle); $('#save').on('click', save); }; + function onSelect() { + var clickedIndex = $(this).attr('data-index'); + $('#main-nav li').removeClass('active'); + $(this).addClass('active'); + + var detailsForm = $('#enabled').children().eq(clickedIndex); + $('#enabled li').addClass('hidden'); + + if (detailsForm.length) { + detailsForm.removeClass('hidden'); + } + return false; + } + function drop(ev, ui) { var id = ui.helper.attr('data-id'), - el = $('#enabled [data-id="' + id + '"]'), - data = id === 'custom' ? {} : available[id]; + el = $('#main-nav [data-id="' + id + '"]'), + data = id === 'custom' ? {iconClass: 'fa-navicon'} : available[id]; data.enabled = false; + data.index = Math.max(0, $('#main-nav').children().length - 1); - templates.parse('admin/general/navigation', 'enabled', {enabled: [data]}, function(li) { + templates.parse('admin/general/navigation', 'navigation', {navigation: [data]}, function(li) { li = $(translator.unescape(li)); el.after(li); el.remove(); }); + + templates.parse('admin/general/navigation', 'enabled', {enabled: [data]}, function(li) { + li = $(translator.unescape(li)); + $('#enabled').append(li); + }); } function save() { var nav = []; - $('#enabled li').each(function() { - var form = $(this).find('form').serializeArray(), + var indices = []; + $('#main-nav li').each(function() { + indices.push($(this).attr('data-index')); + }); + + indices.forEach(function(index) { + var el = $('#enabled').children().eq(index); + var form = el.find('form').serializeArray(), data = {}, properties = {}; @@ -81,7 +122,9 @@ define('admin/general/navigation', ['translator'], function(translator) { } function remove() { - $(this).parents('li').remove(); + var index = $(this).parents('[data-index]').attr('data-index'); + $('#main-nav [data-index="' + index + '"]').remove(); + $('#enabled [data-index="' + index + '"]').remove(); return false; } diff --git a/src/controllers/admin/navigation.js b/src/controllers/admin/navigation.js index a9ebb5e172..463c525eff 100644 --- a/src/controllers/admin/navigation.js +++ b/src/controllers/admin/navigation.js @@ -8,6 +8,14 @@ navigationController.get = function(req, res, next) { return next(err); } + + data.enabled.forEach(function(enabled, index) { + enabled.index = index; + enabled.selected = index === 0; + }); + + data.navigation = data.enabled.slice(); + res.render('admin/general/navigation', data); }); }; diff --git a/src/views/admin/general/navigation.tpl b/src/views/admin/general/navigation.tpl index 779d6bf5a9..cab04ea2d5 100644 --- a/src/views/admin/general/navigation.tpl +++ b/src/views/admin/general/navigation.tpl @@ -3,32 +3,56 @@
Active Navigation
+ +
+ +
+ +
+
    -
  • +
  • - - - + + + + + + + +
    + + + +
    +
    - - - + + + + + + + +