Skip to content

Commit

Permalink
Fixed a few missing bits from the merge. Also revert back to using to…
Browse files Browse the repository at this point in the history 
…olbars.
  • Loading branch information
@wnielson
wnielson committed Jan 31, 2013
1 parent a73be8b commit faaca59
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 28 deletions.
33 changes: 18 additions & 15 deletions app/view/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ Ext.define("SlideNavigationExample.view.Main", {
fullscreen: true,

/**
* Any component within the container with an 'x-titlebar' class
* Any component within the container with an 'x-toolbar' class
* will be draggable. To disable draggin all together, set this
* to false.
*/
slideSelector: 'x-titlebar',
slideSelector: 'x-toolbar',

/**
* Time in milliseconds to animate the closing of the container
Expand All @@ -38,7 +38,7 @@ Ext.define("SlideNavigationExample.view.Main", {
* will use these values at the default.
*/
slideButtonDefaults: {
selector: 'titlebar'
selector: 'toolbar'
},

/**
Expand All @@ -50,7 +50,7 @@ Ext.define("SlideNavigationExample.view.Main", {
maxDrag: 400,
width: 200,
items: [{
xtype: 'titlebar',
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
Expand All @@ -62,7 +62,7 @@ Ext.define("SlideNavigationExample.view.Main", {

/**
* Here's an example of how to add a different type of
* component into the titlebar of the list.
* component into the toolbar of the list.
*/
/*
items: [{
Expand All @@ -76,6 +76,9 @@ Ext.define("SlideNavigationExample.view.Main", {

},

/**
* Change this to 'right' to dock the navigation list to the right.
*/
listPosition: 'right',

/**
Expand Down Expand Up @@ -104,7 +107,7 @@ Ext.define("SlideNavigationExample.view.Main", {
// `slideButtonDefaults`.
slideButton: true,
items: [{
xtype: 'titlebar',
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
Expand All @@ -128,34 +131,34 @@ Ext.define("SlideNavigationExample.view.Main", {
title: 'Item 3',
group: 'Group 2',
items: [{
xtype: 'titlebar',
xtype: 'toolbar',
title: 'Item 3',
docked: 'top'
},{
xtype: 'panel',
layout: 'card',
styleHtmlContent: true,
html: '<p>The titlebar on this page doesn\'t have a slideButton, so you\'ll have to "slide" the titlebar to view the menu.</p><p>Donec neque augue, fermentum quis tempor quis, lacinia ut augue. Sed dictum risus id arcu vehicula sed porttitor nisi egestas. Aliquam arcu felis, sagittis vel pulvinar vitae, ultricies a augue. Praesent eget erat tellus. Aenean nec dui magna. Cras sagittis, diam vel bibendum mattis, neque purus placerat turpis, sit amet tempor neque nisl non eros. Pellentesque id orci nulla, nec eleifend quam. Proin ut magna turpis. Phasellus erat urna, faucibus in tempus bibendum, ultrices a mauris. Nulla semper ante sed est placerat sagittis. Nam ut vestibulum nulla. Sed sit amet aliquet urna. Morbi est velit, vulputate quis pretium vitae, lobortis sed ligula.</p>',
html: '<p>The toolbar on this page doesn\'t have a slideButton, so you\'ll have to "slide" the toolbar to view the menu.</p><p>Donec neque augue, fermentum quis tempor quis, lacinia ut augue. Sed dictum risus id arcu vehicula sed porttitor nisi egestas. Aliquam arcu felis, sagittis vel pulvinar vitae, ultricies a augue. Praesent eget erat tellus. Aenean nec dui magna. Cras sagittis, diam vel bibendum mattis, neque purus placerat turpis, sit amet tempor neque nisl non eros. Pellentesque id orci nulla, nec eleifend quam. Proin ut magna turpis. Phasellus erat urna, faucibus in tempus bibendum, ultrices a mauris. Nulla semper ante sed est placerat sagittis. Nam ut vestibulum nulla. Sed sit amet aliquet urna. Morbi est velit, vulputate quis pretium vitae, lobortis sed ligula.</p>',
scrollable: true,
maskOnOpen: true
}]
},{
title: 'Item 4',
group: 'Group 2',
slideButton: {
selector: 'titlebar',
selector: 'toolbar',
iconMask: true,
iconCls: 'arrow_left'
},
items: [{
xtype: 'titlebar',
xtype: 'toolbar',
title: 'Item 4',
docked: 'bottom'
},{
styleHtmlContent: true,
xtype: 'panel',
layout: 'card',
html: '<h2>Item 4</h2><p>The titlebar for this item is at the bottom, which has a slideButton and uses a different icon.</p>'
html: '<h2>Item 4</h2><p>The toolbar for this item is at the bottom, which has a slideButton and uses a different icon.</p>'
}]
},{
title: 'Item 5',
Expand All @@ -167,14 +170,14 @@ Ext.define("SlideNavigationExample.view.Main", {
},
items: [{
style: 'padding: 10px',
html: '<h2>Item 5</h2><p>Here we\'ve added a slideButton to a location other than a titlebar with text instead of an icon.</p>'
html: '<h2>Item 5</h2><p>Here we\'ve added a slideButton to a location other than a toolbar with text instead of an icon.</p>'
}]

},{
title: 'Item 6',
group: 'Group 3',
items: [{
xtype: 'titlebar',
xtype: 'toolbar',
title: 'Item 6',
docked: 'top'
},{
Expand All @@ -188,7 +191,7 @@ Ext.define("SlideNavigationExample.view.Main", {
slideButton: false,

items: [{
xtype: 'titlebar',
xtype: 'toolbar',
title: 'Item 7',
docked: 'top'
},{
Expand All @@ -207,7 +210,7 @@ Ext.define("SlideNavigationExample.view.Main", {
},

items: [{
xtype: 'titlebar',
xtype: 'toolbar',
title: 'Item 8',
docked: 'top'
},{
Expand Down
48 changes: 35 additions & 13 deletions ux/slidenavigation/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ Ext.define('Ext.ux.slidenavigation.View', {
},

/**
* @cfg {String} menuPosition Position of the list menu, left or right.
* @cfg {String} listPosition Position of the list menu, left or right.
* Defaults to 'left'.
*/
listPosition: 'left',
Expand Down Expand Up @@ -323,9 +323,17 @@ Ext.define('Ext.ux.slidenavigation.View', {
var me = this,
config = Ext.merge(me.getSlideButtonDefaults(),
Ext.isObject(config) ? config : {}),
parent = el.down(config.selector);
parent = el.down(config.selector),
listPosition = this.getListPosition();

if (parent) {

// Make sure that the button is placed on the correct side of the toolbar
layout = parent.getLayout();
if (layout && Ext.isFunction(layout.setPack)) {
layout.setPack(listPosition);
}

return parent.add(Ext.merge(me._slideButtonConfig, config));
}

Expand Down Expand Up @@ -442,7 +450,7 @@ Ext.define('Ext.ux.slidenavigation.View', {
if (this.config.slideSelector) {
node = e.target;
while (node = node.parentNode) {
if (node.className && node.className.indexOf(this.config.slideSelector) > -1) {
if (node.classList && node.classList.contains(this.config.slideSelector)) {
this.fireEvent('dragstart', this);
return true;
}
Expand All @@ -459,10 +467,21 @@ Ext.define('Ext.ux.slidenavigation.View', {
* which direction to finish moving the container based on its current position and velocity.
*/
onContainerDragend: function(draggable, e, eOpts) {
var velocity = Math.abs(e.deltaX / e.deltaTime),
direction = (e.deltaX > 0) ? "right" : "left",
offset = Ext.clone(draggable.offset),
threshold = parseInt(this.config.list.minWidth * .70);
var velocity = Math.abs(e.deltaX / e.deltaTime),
listPosition = this.getListPosition()
direction = (e.deltaX > 0) ? "right" : "left",
offset = Ext.clone(draggable.offset),
threshold = parseInt(this.config.list.minWidth * .70);

// XXX: This is ugly
if (listPosition == "right")
{
if (direction == "right") {
direction = "left";
} else {
direction = "right";
}
}

switch (direction) {
case "right":
Expand Down Expand Up @@ -566,7 +585,7 @@ Ext.define('Ext.ux.slidenavigation.View', {
listPosition = this.getListPosition();

// Invert the direction of the side movement
if(listPosition == "right") {
if (listPosition == "right") {
offsetX = -offsetX;
}

Expand Down Expand Up @@ -594,7 +613,10 @@ Ext.define('Ext.ux.slidenavigation.View', {
* @return {Boolean} Whether or not the container is fully open.
*/
isOpened: function() {
return (this.container.draggableBehavior.draggable.offset.x == this.config.list.minWidth);
var listPosition = this.getListPosition();
offset = (listPosition == "left") ? this.config.list.minWidth : -this.config.list.minWidth;

return (this.container.draggableBehavior.draggable.offset.x == offset);
},

/**
Expand Down Expand Up @@ -627,7 +649,7 @@ Ext.define('Ext.ux.slidenavigation.View', {
if (listConfig.width) {
listConfig.minWidth = listConfig.width;

if(listPosition == "left") {
if (listPosition == "left") {
// The actual width of the list is determined by maxDrag
listConfig.width = listConfig.maxDrag || listConfig.width;
}
Expand Down Expand Up @@ -658,15 +680,15 @@ Ext.define('Ext.ux.slidenavigation.View', {
listPosition = this.getListPosition(),
containerConstraint;

if(listPosition == "left") {
if (listPosition == "left") {
containerConstraint = {
min: { x: 0, y: 0 },
max: { x: me.config.list.maxDrag || Math.max(screen.width, screen.height), y: 0 }
}
} else {
containerConstraint = {
// The sliding menu still does not support maxDrag when positioned on the right,
// it would require adding padding to every element in the list.
// TODO: The sliding menu does not currently support maxDrag when positioned on the right,
// because it would require adding padding to every element in the list.
min: { x: -me.config.list.width, y: 0 },
max: { x: 0, y: 0 }
}
Expand Down

0 comments on commit faaca59

Please sign in to comment.