Change code for new page slide.js

Conflicts:
	app/views/admin/pages/_form.html.erb
This commit is contained in:
chris committed 2013-10-19 19:14:14 +08:00
1 parent f694134150
commit d2602a3a84
35 files changed
+625 -98

No files matched your search

@@ -0,0 +1 @@
//= require lib/arrow-on-list-edit
+2 -19
View File
@@ -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() {
@@ -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');
});
})
+236 -1
View File
@@ -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('<option value="' + val.main[1] + '" ' + (val.main[1] == _selectData.design.main ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
if(val.main[1] == _selectData.design.main) {
$.each(val.sub, function(index, val) {
$pageTheme.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.design.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
});
};
});
$.each(_pageData.module, function(index, val) {
$pageModule.append('<option value="' + val.main[1] + '" ' + (val.main[1] == _selectData.module.main ? 'selected="selected"' : '') + '>' + val.main[0] + '</option>');
if(val.main[1] == _selectData.module.main) {
$.each(val.sub, function(index, val) {
$pageF2E.append('<option value="' + $(this)[1] + '" ' + ($(this)[1] == _selectData.module.sub ? 'selected="selected"' : '') + '>' + $(this)[0]+ '</option>')
});
$.each(val.category, function(index, val) {
var _arr = $.inArray($(this)[1], _selectData.module.category[1]);
$pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
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('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
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 = '<div class="error"><div class="msg"><i class="icons-warning"></i><p>Sorry! Something is wrong</p></div></div>'
$('#pageslide .view-page').append($errorMsg);
});
} else {
$.each(_pageData.design, function(index, val) {
$pageDesign.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
if(index == 0) {
$.each(val.sub, function(index, val) {
$pageTheme.append('<option value="' + $(this)[1] + '">' + $(this)[0]+ '</option>')
});
};
});
$.each(_pageData.module, function(index, val) {
$pageModule.append('<option value="' + val.main[1] + '">' + val.main[0] + '</option>');
if(index == 0) {
$.each(val.sub, function(index, val) {
$pageF2E.append('<option value="' + $(this)[1] + '">' + $(this)[0]+ '</option>')
});
$.each(val.category, function(index, val) {
$pageCategory.append('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
});
$.each(val.tags, function(index, val) {
$pageTags.append('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
});
};
});
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('<option value="' + $(this)[1] + '" ' + _selected + '>' + $(this)[0] + '</option>');
});
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('<label class="checkbox"><input type="checkbox" name="page[category][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
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('<label class="checkbox"><input type="checkbox" name="page[tag][]" value="'+ $(this)[1] + '">'+ $(this)[0] +'</label>');
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();
+286
View File
@@ -0,0 +1,286 @@
!function ($) {
// Convenience vars for accessing elements
var _html = '<div id="pageslide"><div class="page-title clearfix"><a class="pull-right" href="javascript:$.pageslide.close()"><i class="icons-arrow-left-2"/></a><span/></div><div class="view-page"><div class="nano"><div class="content"/></div></div></div>',
$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 = $("<iframe />").attr({
src: settings.href,
frameborder: 0,
hspace: 0
})
.css({
width: "100%",
height: "100%"
});
$pageslide.find('.content').html(iframe).show();
if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
} else {
$pageslide.find('.content').load(settings.href, function(response, status, xhr){
if(status == 'success') {
$pageslide.show();
if(settings.loadComplete)settings.loadComplete.call(this, $pageslide, $element);
$pageslide.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
} else {
var msg = '<div style="text-align: center;"><i class="icons-warning" style="font-size: 5em;"></i><h4>Oops!</h4>System may be wrong<br/> or please try again later</div>'
$pageslide.find('.content').html(msg);
}
});
}
$pageslide.data( 'localEl', false );
}
if(settings.pageTitle) {
$pageslide.find('.page-title').show().children('span').text(settings.pageTitle);
$pageslide.find('.view-page').css('top', 48);
} else {
$pageslide.find('.page-title').hide();
$pageslide.find('.view-page').css('top', 0);
}
}
// Function that controls opening of the pageslide
function _start(settings) {
var slideWidth = $pageslide.outerWidth(true),
bodyMove = $sidebarState && !$('.item-groups').length ? slideWidth - 241 : settings.direction == 'right' ? slideWidth - 61 : slideWidth,
bodyAnimateIn = {},
bottomnavAnimateIn = {},
slideAnimateIn = {};
// If the slide is open or opening, just ignore the call
if($pageslide.is(':visible') || _sliding) return;
_sliding = true;
switch(settings.direction) {
case 'left':
$pageslide.css({left: 'auto', right: '-' + slideWidth + 'px'});
bodyAnimateIn['padding-right'] = '+=' + bodyMove;
slideAnimateIn['right'] = '+=' + slideWidth;
break;
default:
$pageslide.css({left: '-' + slideWidth + 'px', right: 'auto'});
bodyAnimateIn['margin-left'] = '+=' + bodyMove;
bottomnavAnimateIn['left'] = '+=' + bodyMove;
if($(window).width() <= 1440 && slideWidth > 963 ) {
bodyAnimateIn['width'] = $body.width();
}
slideAnimateIn['left'] = '+=' + slideWidth;
break;
}
// Animate the slide, and attach this slide's settings to the element
$body.animate(bodyAnimateIn, settings.speed);
$bottomNav.animate(bottomnavAnimateIn, settings.speed);
$pageslide.show().animate(slideAnimateIn, settings.speed, function() {
_sliding = false;
if(typeof settings.openFn === "function") {
settings.openFn.call(this, $pageslide, $element);
};
});
}
$.fn.pageslide = function(options) {
var $elements = this;
// On click
$elements.click( function(e) {
var $self = $(this),
settings = $.extend({href: $self.attr('href'), pageTitle: $self.data('title')}, options);
$element = $self;
// Prevent the default behavior and stop propagation
e.preventDefault();
e.stopPropagation();
if ($pageslide.is(':visible') && $self[0] == _lastCaller) {
// If we clicked the same element twice, toggle closed
$.pageslide.close();
} else {
// Open
$.pageslide(settings);
// Record the last element to trigger pageslide
_lastCaller = $self[0];
}
});
};
/*
* Default settings
*/
$.fn.pageslide.defaults = {
speed: 300, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
direction: 'right', // Accepts 'left' or 'right'
modal: false, // If set to true, you must explicitly close pageslide using $.pageslide.close();
iframe: false, // By default, linked pages are loaded into an iframe. Set this to false if you don't want an iframe.
href: null, // Override the source of the content. Optional in most cases, but required when opening pageslide programmatically.
W: 264,
closeFn : null,
openFn : null,
loadComplete : null,
pageTitle: '',
};
/*
* Public methods
*/
// Open the pageslide
$.pageslide = function(options) {
// Extend the settings with those the user has provided
var settings = $.extend({}, $.fn.pageslide.defaults, options),
pageCss = {},
convertToFunction = function(fn){
var x = new Function();
x = fn;
return x;
};
pageCss['width'] = settings.W;
pageCss['margin-left'] = $sidebarState && !$('.item-groups').length ? 241 : settings.direction == 'right' ? 61 : 0;
// Change Object to Function
if(settings.openFn) {
$.fn.pageslide.defaults.openFn = convertToFunction(settings.openFn);
};
if(settings.closeFn) {
$.fn.pageslide.defaults.closeFn = convertToFunction(settings.closeFn);
};
if(settings.loadComplete) {
$.fn.pageslide.defaults.loadComplete = convertToFunction(settings.loadComplete);
};
// Are we trying to open in different direction?
if(($pageslide.is(':visible') && $pageslide.data('W') != settings.W) || ($pageslide.is(':visible') && $pageslide.data('direction') != settings.direction)) {
$.pageslide.close(function(){
$pageslide.css(pageCss);
_load(settings);
_start(settings);
});
} else {
_load(settings);
if($pageslide.is(':hidden')) {
$pageslide.css(pageCss);
_start(settings);
}
}
$pageslide.data(settings);
}
// Close the pageslide
$.pageslide.close = function(callback) {
var $pageslide = $('#pageslide'),
slideWidth = $pageslide.outerWidth(true),
bodyMove = $sidebarState && !$('.item-groups').length ? slideWidth - 241 : $.fn.pageslide.defaults.direction == 'right' ? slideWidth - 61 : slideWidth
speed = $pageslide.data('speed'),
bodyAnimateIn = {},
bottomnavAnimateIn = {},
slideAnimateIn = {}
// If the slide isn't open, just ignore the call
if( $pageslide.is(':hidden') || _sliding ) return;
_sliding = true;
switch($pageslide.data('direction')) {
case 'left':
bodyAnimateIn['padding-right'] = '-=' + bodyMove;
slideAnimateIn['right'] = '-=' + slideWidth;
break;
default:
bodyAnimateIn['margin-left'] = '-=' + bodyMove;
bottomnavAnimateIn['left'] = '-=' + bodyMove;
slideAnimateIn['left'] = '-=' + slideWidth;
break;
}
$pageslide.animate(slideAnimateIn, speed);
$bottomNav.animate(bottomnavAnimateIn, speed);
$body.animate(bodyAnimateIn, speed, function() {
$pageslide.attr('style', '')
.hide()
.find('.content')
.attr('style', '')
.empty()
.end()
.find('.view-page')
.attr('style', '')
.end()
.find('.pane')
.remove()
.end()
.find('.page-title')
.attr('style', '')
.children('span')
.empty();
_sliding = false;
if($pageslide.find('.error').length) $pageslide.find('.error').remove();
if(typeof callback != 'undefined') callback();
if(typeof $.fn.pageslide.defaults.closeFn === "function") {
$.fn.pageslide.defaults.closeFn.call(this, $pageslide, $element);
};
});
}
// Close Callback
$.pageslide.closeCallback = function( callback ) {
if(typeof callback === "function"){
$.fn.pageslide.defaults.closeFn = callback;
};
};
// Open Callback
$.pageslide.openCallback = function( callback ) {
if(typeof callback === "function"){
$.fn.pageslide.defaults.openFn = callback;
};
};
//data load complete callback
$.pageslide.loadComplete = function( callback ) {
if(typeof callback === "function"){
$.fn.pageslide.defaults.loadComplete = callback;
};
};
/* Events */
// Don't let clicks to the pageslide close the window
$pageslide.click(function(e) {
e.stopPropagation();
});
// Close the pageslide if the document is clicked or the users presses the ESC key, unless the pageslide is modal
$(document).bind('click keyup', function(e) {
// If this is a keyup event, let's see if it's an ESC key
if( e.type == "keyup" && e.keyCode != 27) return;
// Make sure it's visible, and we're not modal
if( $pageslide.is( ':visible' ) && !$pageslide.data( 'modal' ) ) {
$.pageslide.close();
}
});
}(window.jQuery);
+14 -1
View File
@@ -205,5 +205,18 @@ $(function() {
} else {
checkedLength();
};
// addTagsTab();
$.pageslide.closeCallback(function(pageslide, item) {
$('.filter-item').removeClass("active");
});
$.pageslide.loadComplete(function(pageslide, item) {
$('.filter-item').removeClass("active");
item.closest('li').addClass('active');
if(item.hasClass('btn')) {
addTagsTab();
$('#filter-default-tag').fastLiveFilter('.add-default-tags-list', '.filter-item', '.tag');
$('.tags-groups').cardCheck({
item: '.card',
});
};
});
});