From d2602a3a84113ff8ca44a7383cbed2438a1741e0 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 16 Oct 2013 21:53:29 +0800 Subject: [PATCH] Change code for new page slide.js Conflicts: app/views/admin/pages/_form.html.erb --- app/assets/javascripts/admin/categories.js | 1 + .../javascripts/basic/orbit_js_1.0.1.js | 21 +- .../javascripts/lib/arrow-on-list-edit.js | 9 + app/assets/javascripts/lib/items/items.js.erb | 237 ++++++++++++++- app/assets/javascripts/lib/pageslide.js | 286 ++++++++++++++++++ app/assets/javascripts/lib/tags.js.erb | 15 +- app/assets/stylesheets/lib/pageslide.css | 77 +++-- app/views/admin/ad_banners/edit.js.erb | 2 +- app/views/admin/ad_banners/new.js.erb | 2 +- app/views/admin/categories/_category.html.erb | 2 +- app/views/admin/categories/_edit.html.erb | 1 - app/views/admin/categories/_index.html.erb | 2 +- app/views/admin/categories/_new.html.erb | 1 - app/views/admin/categories/edit.js.erb | 2 +- app/views/admin/categories/new.js.erb | 2 +- app/views/admin/items/_node.html.erb | 8 +- app/views/admin/items/index.html.erb | 2 + app/views/admin/links/edit.js.erb | 2 +- app/views/admin/links/new.js.erb | 2 +- app/views/admin/module_tags/_edit.html.erb | 1 - app/views/admin/module_tags/_index.html.erb | 2 +- .../admin/module_tags/_module_tag.html.erb | 2 +- app/views/admin/module_tags/_new.html.erb | 5 +- app/views/admin/module_tags/edit.js.erb | 2 +- app/views/admin/module_tags/new.js.erb | 2 +- app/views/admin/pages/edit.js.erb | 2 +- app/views/admin/pages/new.js.erb | 2 +- app/views/admin/tags/_edit.html.erb | 1 - app/views/admin/tags/_index.html.erb | 2 +- app/views/admin/tags/_new.html.erb | 1 - app/views/admin/tags/edit.js.erb | 2 +- app/views/admin/tags/new.js.erb | 2 +- app/views/layouts/back_end.html.erb | 8 +- app/views/layouts/member.html.erb | 8 +- app/views/layouts/structure.html.erb | 7 - 35 files changed, 625 insertions(+), 98 deletions(-) create mode 100644 app/assets/javascripts/admin/categories.js create mode 100644 app/assets/javascripts/lib/arrow-on-list-edit.js create mode 100644 app/assets/javascripts/lib/pageslide.js diff --git a/app/assets/javascripts/admin/categories.js b/app/assets/javascripts/admin/categories.js new file mode 100644 index 000000000..1e5958c7d --- /dev/null +++ b/app/assets/javascripts/admin/categories.js @@ -0,0 +1 @@ +//= require lib/arrow-on-list-edit \ No newline at end of file diff --git a/app/assets/javascripts/basic/orbit_js_1.0.1.js b/app/assets/javascripts/basic/orbit_js_1.0.1.js index 49b8a1417..904a319e8 100644 --- a/app/assets/javascripts/basic/orbit_js_1.0.1.js +++ b/app/assets/javascripts/basic/orbit_js_1.0.1.js @@ -496,25 +496,8 @@ var ini = function() { // Open Slide function openSlide() { - var $openSlide = $('.open-slide'), - $pageslideW; - - $(window).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954; - $(window).resize(function() { - $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954; - }) - if($('.item-groups').length) { - $os = $openSlide.not('.view-page'); - $vp = $openSlide.filter('.view-page.open-slide'); - $os.pageslide({ W: 624 }); - $vp.pageslide({ W: $pageslideW, iframe: true }); - } else { - $openSlide.pageslide(); - }; - $('.bottomnav .open-slide').on('click', function() { - $('.table tr').removeClass('active'); - $('.filter-item').removeClass('active') - }); + var $openSlide = $('.open-slide'); + typeof customOpenSlide === 'function' ? customOpenSlide($openSlide) : $openSlide.pageslide(); } function formTip() { diff --git a/app/assets/javascripts/lib/arrow-on-list-edit.js b/app/assets/javascripts/lib/arrow-on-list-edit.js new file mode 100644 index 000000000..19ed8cb3b --- /dev/null +++ b/app/assets/javascripts/lib/arrow-on-list-edit.js @@ -0,0 +1,9 @@ +$(function() { + $.pageslide.closeCallback(function(pageslide, item) { + $("tr").removeClass("active"); + }); + $.pageslide.loadComplete(function(pageslide, item) { + $("tr").removeClass("active"); + item.closest('tr').addClass('active'); + }); +}) \ No newline at end of file diff --git a/app/assets/javascripts/lib/items/items.js.erb b/app/assets/javascripts/lib/items/items.js.erb index b0af68131..5a687a549 100644 --- a/app/assets/javascripts/lib/items/items.js.erb +++ b/app/assets/javascripts/lib/items/items.js.erb @@ -32,8 +32,242 @@ function touchSupport() { }) } } +function customOpenSlide() { + var $openSlide = $('.open-slide'), + $pageslideW; + + $(window).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954; + $(window).resize(function() { + $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954; + }); + $noiFrame = $openSlide.not('.view-page'); + $iFrame = $openSlide.filter('.view-page.open-slide'); + + $noiFrame.pageslide({ + W: 314, + openFn: function(pageslide, element) { + element.addClass('active') + .closest('.item-menu') + .css('display', 'inline-block') + .closest('.navbar-inner') + .addClass('active'); + }, + closeFn: function(pageslide, element) { + element.removeClass('active') + .closest('.navbar-inner') + .removeClass('active'); + }, + loadComplete: function(pageslide, element) { + $openSlide.removeClass('active'); + $('.navbar-inner').removeClass('active'); + element.addClass('active').closest('.navbar-inner').addClass('active'); + var _id = element.data('id'), + _type = element.hasClass('page') ? 'page' : 'link', + _edit = element.hasClass('edit') ? true : false; + + if(_id !== 'new') { + $('#pageslide form').attr({ + 'action': $('#pageslide form').attr('action') + '/' + _id, + 'id': 'edit_' + _type + '_' + _id + }); + }; + _type == 'page' ? pageSetting(element.data('id'), _edit) : ''; + } + }); + $iFrame.pageslide({ + W: $pageslideW, + iframe: true, + openFn: function(pageslide, element) { + element.addClass('active') + .closest('.item-menu') + .css('display', 'inline-block') + .closest('.navbar-inner') + .addClass('active'); + }, + closeFn: function(pageslide, element) { + element.removeClass('active') + .closest('.navbar-inner') + .removeClass('active'); + $('#main-wrap').css('width', 'auto') + }, + loadComplete: function(pageslide, element) { + $openSlide.removeClass('active'); + $('.navbar-inner').removeClass('active'); + element.addClass('active').closest('.navbar-inner').addClass('active'); + pageslide.find('.content').css('padding', 0); + } + }); +} + +function pageSetting(id, edit) { + $pageModule = $('#page_module_app_id'), + $pageF2E = $('#page_app_frontend_url'), + $pageDesign = $('#page_design'), + $pageTheme = $('#page_theme_id'), + $pageCategory = $('#page-category'), + $pageTags = $('#page-tags'); + if(edit) { + $.ajax({ + url: 'page-setting.json', + type: 'POST', + contentType: "application/json; charset=utf-8", + dataType: 'json', + data: '{"id": ' + id + '}', + cache: false, + }) + .done(function(data) { + _selectData = data; + $.each(_pageData.design, function(index, val) { + $pageDesign.append(''); + if(val.main[1] == _selectData.design.main) { + $.each(val.sub, function(index, val) { + $pageTheme.append('') + }); + }; + }); + $.each(_pageData.module, function(index, val) { + $pageModule.append(''); + if(val.main[1] == _selectData.module.main) { + $.each(val.sub, function(index, val) { + $pageF2E.append('') + }); + $.each(val.category, function(index, val) { + var _arr = $.inArray($(this)[1], _selectData.module.category[1]); + $pageCategory.append(''); + if(!_selectData.module.category[0] && _arr !== -1) { + $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true); + } + _selectData.module.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : ''; + }); + $.each(val.tags, function(index, val) { + var _arr = $.inArray($(this)[1], _selectData.module.tags[1]); + $pageTags.append(''); + if(!_selectData.module.tags[0] && _arr !== -1) { + $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true); + } + _selectData.module.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : ''; + }); + }; + }); + changeSetting(true); + }) + .fail(function(jqXHR, textStatus) { + console.log(jqXHR.status, textStatus) + var $errorMsg = '

Sorry! Something is wrong

' + $('#pageslide .view-page').append($errorMsg); + }); + } else { + $.each(_pageData.design, function(index, val) { + $pageDesign.append(''); + if(index == 0) { + $.each(val.sub, function(index, val) { + $pageTheme.append('') + }); + }; + }); + $.each(_pageData.module, function(index, val) { + $pageModule.append(''); + if(index == 0) { + $.each(val.sub, function(index, val) { + $pageF2E.append('') + }); + $.each(val.category, function(index, val) { + $pageCategory.append(''); + }); + $.each(val.tags, function(index, val) { + $pageTags.append(''); + }); + }; + }); + changeSetting(false); + }; +}; + +function changeSetting(boolean) { + $('#pageslide').on('change', '.change', function(event) { + var _data, _select, _subData, $subSelete; + + if(event.target.id == 'page_design') { + _data = _pageData.design; + _select = boolean ? _selectData.design : null; + _subData = 'template'; + $subSelete = $('#page_theme_id'); + } else { + _data = _pageData.module; + _select = boolean ? _selectData.module : null; + _subData = 'module'; + $subSelete = $('#page_app_frontend_url'); + }; + $(this).children("option:selected").each(function () { + var _val = $(this).val(); + $subSelete.empty(); + $.each(_data, function(index, val) { + if(_val == val.main[1]) { + $.each(val.sub, function(index, val) { + var _selected = _select && $(this)[1] == _select.sub ? 'selected="selected"' : ''; + $subSelete.append(''); + }); + if(event.target.id == 'page_module_app_id') { + $pageCategory.empty(); + $pageTags.empty(); + $('.select_all').prop('checked', false) + $.each(val.category, function(index, val) { + if(val !== 0) { + $('#page-category-groups').slideDown(300); + var _arr = _select ? $.inArray($(this)[1], _select.category[1]) : ''; + $pageCategory.append(''); + if(_select && !_select.category[0] && _arr !== -1) { + $pageCategory.find('input[type="checkbox"]').eq(index).prop('checked', true); + } + _select && _val == _select.main && _select.category[0] ? $pageCategory.siblings('.checkbox').children('.select_all').prop('checked', true) : ''; + } else { + $('#page-category-groups').slideUp(300); + } + }); + $.each(val.tags, function(index, val) { + if(val !== 0) { + $('#page-tags-groups').slideDown(300); + var _arr = _select ? $.inArray($(this)[1], _select.tags[1]) : ''; + $pageTags.append(''); + if(_select && !_select.tags[0] && _arr !== -1) { + $pageTags.find('input[type="checkbox"]').eq(index).prop('checked', true); + } + _select && _val == _select.main && _select.tags[0] ? $pageTags.siblings('.checkbox').children('.select_all').prop('checked', true) : ''; + } else { + $('#page-tags-groups').slideUp(300); + } + }); + } + return false; + }; + }); + }); + event.preventDefault(); + }); + $('#pageslide').on('change', '.checkbox-groups input[type="checkbox"]', function(event) { + if($(this).hasClass('select_all') && $(this).prop('checked')) { + $(this).closest('.checkbox').siblings('.groups').find('input[type="checkbox"]').prop('checked', false); + } else if($(this).prop('checked')) { + $(this).closest('.groups').siblings('.checkbox').find('.select_all').prop('checked', false); + } + event.preventDefault(); + }); +} +function getPageData() { + $.getJSON('page-design-module.json').done(function(data) { + _pageData = data; + }); +} $(function(){ + var $pageModule = null, + $pageF2E = null, + $pageDesign = null, + $pageTheme = null, + $pageCategory = null, + $pageTags = null; + _pageData = null; + _selectData = null; $('.sortable').nestedSortable({ handle: '.brand', items: 'li', @@ -69,11 +303,12 @@ $(function(){ tip(); touchSupport() itemsQuantity(); + getPageData(); }); function reloadStructure(){ $.pageslide.close(); - openSlide(); + customOpenSlide(); tip(); touchSupport() itemsQuantity(); diff --git a/app/assets/javascripts/lib/pageslide.js b/app/assets/javascripts/lib/pageslide.js new file mode 100644 index 000000000..93f228279 --- /dev/null +++ b/app/assets/javascripts/lib/pageslide.js @@ -0,0 +1,286 @@ +!function ($) { + // Convenience vars for accessing elements + var _html = '
', + $body = $('#main-wrap'), + $bottomNav = $('.bottomnav'), + $pageslide = $(_html).css('display', 'none').appendTo( $body ), + $element; + + var _sliding = false, // Mutex to assist closing only once + _lastCaller; // Used to keep track of last element to trigger pageslide + // $(window).resize(function(event) { + // if($pageslide.is(':visible')) { + // console.log("ddd") + // $pageslide.find('.nano').height($('body').height() - $('#orbit-bar').height() - $pageslide.find('.page-title').outerHeight(true)); + // } + // }); + + function _load(settings) { + // Are we loading an element from the page or a URL? + if ( settings.href.indexOf("#") === 0 ) { + // Load a page element + $(settings.href).clone(true).appendTo($pageslide.find('.content')).show(); + if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element); + $pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); + } else { + // Load a URL. Into an iframe? + if(settings.iframe) { + var iframe = $("