Skip to content

Commit

Permalink
Merge pull request #39 from sorvell/master
Browse files Browse the repository at this point in the history 
g-component minor fixup; updates for g-page and g-panels
  • Loading branch information
@frankiefu
frankiefu committed Nov 20, 2012
2 parents 7400f9e + 093edd7 commit fb98e4a
Show file tree
Hide file tree
Showing 9 changed files with 200 additions and 186 deletions.
10 changes: 0 additions & 10 deletions src/css/g-page.css
View file

This file was deleted.

5 changes: 2 additions & 3 deletions src/g-component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
// e.g. $super for super (also default, interface, etc.)

var Base = {
$super: $super,
ready: function() {
},
asyncMethod: function(inMethod, inArgs, inTimeout) {
Expand Down Expand Up @@ -144,6 +143,7 @@
};

var ProtectedBase = {$protected: Base};
HTMLElementElement.prototype.ProtectedBase = ProtectedBase;

// it's convenient to keep track of our own components
// for protected inheritance
Expand Down Expand Up @@ -248,7 +248,7 @@

// super impl

var $super = (function() {
Base.$super = (function() {
// TODO(sjmiles): will not work with mixins because
// the memoization strategy assumes
// each function exists on only one prototype chain
Expand Down Expand Up @@ -738,6 +738,5 @@
});
return observer;
};

</script>
</element>
43 changes: 27 additions & 16 deletions src/g-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,39 @@
-->
<element name="g-page" attributes="nofit">
<link rel="components" href="g-component.html">
<link rel="stylesheet" href="css/g-page.css" />
<template>
<style>
@host {
height: 100%;
display: block;
}
</style>
<style id="pageSheet">
html, body {
height: 100%;
margin: 0;
}

body {
font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
}
</style>
<content></content>
</template>
<script>
this.component({
shadowRootCreated: function(inRoot) {
this.makeFittable(inRoot);
ready: function() {
this.makePageFittable();
},
prototype: {
makeFittable: function(inRoot) {
var sheet = document.querySelector('style[g-page]');
if (!sheet) {
sheet = inRoot.querySelector('style');
sheet.setAttribute('g-page', '');
sheet.removeAttribute('scoped');
document.head.appendChild(sheet);
}
if (!this.nofit) {
sheet.textContent += '\n' + this.tagName.toLowerCase() + ' {height: 100%;}\n';
}
makePageFittable: function() {
var sheet = document.querySelector('style[g-page]');
if (!sheet) {
sheet = this.$.pageSheet;
sheet.setAttribute('g-page', '');
sheet.removeAttribute('scoped');
sheet.removeAttribute('id')
document.head.appendChild(sheet);
}

}
});
</script>
Expand Down
255 changes: 125 additions & 130 deletions src/g-panels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,88 +30,134 @@
var LEFT_ARROW_KEY = 37;

this.component({
created: function() {
defaultTransition: 'keyframe',
ready: function() {
// ensure default transition
if (!this.transition) {
this.transition = this.defaultTransition;
if (this.index != null) {
this.indexChanged();
this.node.index = 0;
}
}
// make focusable; note that default tabIndex == -1 but node is
// only focusable if tabIndex attr is set.
if (this.tabIndex < 0) {
this.tabIndex = -1;
if (!this.node.hasAttribute('tabindex')) {
this.node.tabIndex = -1;
}
this.initPanels();
if (!this.index) {
this.index = 0;
this.node.index = 0;
}
},
prototype: {
defaultTransition: 'keyframe',
initPanels: function() {
this.getPanels().forEach(function(p, i) {
this.initPanel(p, i);
}, this);
},
initPanel: function() {},
indexChanged: function(inOldValue) {
var i = this.clampIndex(this.index);
if (i != this.index) {
this.index = i;
return;
initPanels: function() {
this.getPanels().forEach(function(p, i) {
this.initPanel(p, i);
}, this);
},
initPanel: function() {},
indexChanged: function(inOldValue) {
var i = this.clampIndex(this.index);
if (i != this.index) {
this.index = i;
}
if (this.index != this.lastIndex) {
var fromPanel = this.panelAtIndex(this.lastIndex),
toPanel = this.panelAtIndex(this.index),
forward = Boolean(this.index > this.lastIndex);
if (this.canTransition(fromPanel, toPanel, forward)) {
this.beginTransition(fromPanel, toPanel, forward);
} else {
this.finishTransition(fromPanel, toPanel, forward);
}
if (this.index != this.lastIndex) {
var fromPanel = this.panelAtIndex(this.lastIndex),
toPanel = this.panelAtIndex(this.index),
forward = Boolean(this.index > this.lastIndex);
if (this.canTransition(fromPanel, toPanel, forward)) {
this.beginTransition(fromPanel, toPanel, forward);
} else {
this.finishTransition(fromPanel, toPanel, forward);
}
this.lastIndex = this.index;
// TODO(sorvell): replace with getter/setter for selected when
// g-component does not override these on instances.
this.selected = this.getSelectedValue();
this.lastIndex = this.index;
this.selected = this.getSelectedValue();
}
},
clampIndex: function(inIndex) {
var i = isNaN(inIndex) ? 0 : inIndex;
return Math.max(0, Math.min(this.count-1, i));
},
getSelectedValue: function() {
var selected = this.getSelectedPanel();
var name = selected && (selected.getAttribute('id') ||
selected.getAttribute('name'));
return name || this.index;
},
// selected is the name property of the panel to select
selectedChanged: function(inOldValue) {
var index = this.indexOfPropValue('id', this.selected);
index = index >= 0 ? index : this.indexOfPropValue('name', this.selected);
if (index >= 0) {
this.node.index = index;
}
},
transitionChanged: function(inOldValue) {
if (this.transitionNode) {
this.transitionNode.teardown();
}
this.transitionNode = this.makeTransitionNode(this.transition);
this.transitionNode.setup(this);
this.node.setAttribute('transition', this.transition);
},
makeTransitionNode: function(inName) {
var name = this.tagNameForTransition(inName);
var transition = document.createElement(name);
return transition.setup ? transition :
this.makeTransitionNode(this.defaultTransition);
},
tagNameForTransition: function(inName) {
return 'g-' + inName + (inName ? '-' : '') + 'panel-transition';
},
indexOfPropValue: function(inProp, inValue) {
var c$ = this.getPanels();
for (var i=0, c; c=c$[i]; i++) {
if (c.getAttribute(inProp) == inValue) {
return i;
}
},
clampIndex: function(inIndex) {
var i = isNaN(inIndex) ? 0 : inIndex;
return Math.max(0, Math.min(this.count-1, i));
},
getSelectedValue: function() {
var selected = this.getSelectedPanel();
var name = selected && (selected.getAttribute('id') ||
selected.getAttribute('name'));
return name || this.index;
},
// selected is the name property of the panel to select
selectedChanged: function(inOldValue) {
var index = this.indexOfPropValue('id', this.selected);
index = index >= 0 ? index : this.indexOfPropValue('name', this.selected);
if (index >= 0) {
this.index = index;
}
return -1;
},
panelAtName: function(inName) {
return this.panelAtIndex(this.indexOfName(inName));
},
canTransition: function(inFrom, inTo, inForward) {
return Boolean(this.transitionNode && inFrom && inTo &&
this.transitionNode.canTransition(inFrom, inTo, inForward));
},
beginTransition: function(inFrom, inTo, inForward) {
if (this.transitionNode) {
this.transitionNode.stop();
}
webkitRequestAnimationFrame(function() {
this.enablePanelShowing(inFrom, true);
this.enablePanelShowing(inTo, true);
this.transitionNode.go(inFrom, inTo, inForward);
}.bind(this));
},
finishTransition: function() {
if (this.transitionNode && this.transitionNode.highlander) {
this.getPanels().forEach(function(p, i) {
this.enablePanelShowing(p, i == this.index);
}, this);
}
},
keydownHandler: function(e) {
if (!documentIsEditing()) {
var beforeIndex = this.index;
if (e.keyCode == RIGHT_ARROW_KEY) {
this.next();
} else if (e.keyCode == LEFT_ARROW_KEY) {
this.previous();
}
},
transitionChanged: function(inOldValue) {
if (this.transitionNode) {
this.transitionNode.teardown();
if (beforeIndex != this.index) {
e.stopPropagation();
}
this.transitionNode = this.makeTransitionNode(this.transition);
this.transitionNode.setup(this);
this.setAttribute('transition', this.transition);
},
makeTransitionNode: function(inName) {
var name = this.tagNameForTransition(inName);
var transition = document.createElement(name);
return transition.setup ? transition :
this.makeTransitionNode(this.defaultTransition);
},
tagNameForTransition: function(inName) {
return 'g-' + inName + (inName ? '-' : '') + 'panel-transition';
},
}
},
refresh: function() {
if (this.transitionNode && this.transitionNode.canTransition()) {
this.transitionNode.refresh();
}
},
publish: {
// TODO: consider selecting something more specific so we don't need to
// filter out style/templates children.
getPanels: function() {
Expand All @@ -120,84 +166,33 @@
return c.tagName != 'STYLE' && c.tagName != 'TEMPLATE';
});
},
getSelectedPanel: function() {
return this.getPanels()[this.index];
},
indexOfPropValue: function(inProp, inValue) {
var c$ = this.getPanels();
for (var i=0, c; c=c$[i]; i++) {
if (c.getAttribute(inProp) == inValue) {
return i;
}
}
return -1;
},
indexOf: function(inPanel) {
return this.getPanels().indexOf(inPanel);
},
panelAtIndex: function(inIndex) {
return this.getPanels()[inIndex];
},
panelAtName: function(inName) {
return this.panelAtIndex(this.indexOfName(inName));
},
get count() {
return this.getPanels().length;
},
canTransition: function(inFrom, inTo, inForward) {
return Boolean(this.transitionNode && inFrom && inTo &&
this.transitionNode.canTransition(inFrom, inTo, inForward));
},
beginTransition: function(inFrom, inTo, inForward) {
if (this.transitionNode) {
this.transitionNode.stop();
}
webkitRequestAnimationFrame(function() {
this.enablePanelShowing(inFrom, true);
this.enablePanelShowing(inTo, true);
this.transitionNode.go(inFrom, inTo, inForward);
}.bind(this));
},
finishTransition: function() {
if (this.transitionNode && this.transitionNode.highlander) {
this.getPanels().forEach(function(p, i) {
this.enablePanelShowing(p, i == this.index);
}, this);
}
},
// note: cannot use hidden attr for this since it's trumped by display
// setting e.g. hidden + display: -webkit-flex == showing.
enablePanelShowing: function(inPanel, inEnable) {
if (inPanel) {
inPanel.style.display = inEnable ? null : 'none';
}
},
getSelectedPanel: function() {
return this.getPanels()[this.index];
},
indexOf: function(inPanel) {
return this.getPanels().indexOf(inPanel);
},
panelAtIndex: function(inIndex) {
return this.getPanels()[inIndex];
},
next: function() {
this.index++;
this.node.index++;
},
previous: function() {
this.index--;
this.node.index--;
},
toggleBetween: function(inA, inB) {
this.selected = this.selected == inA ? inB : inA;
},
keydownHandler: function(e) {
if (!documentIsEditing()) {
var beforeIndex = this.index;
if (e.keyCode == RIGHT_ARROW_KEY) {
this.next();
} else if (e.keyCode == LEFT_ARROW_KEY) {
this.previous();
}
if (beforeIndex != this.index) {
e.stopPropagation();
}
}
},
refresh: function() {
if (this.transitionNode && this.transitionNode.canTransition()) {
this.transitionNode.refresh();
}
this.node.selected = this.node.selected == inA ? inB : inA;
}
}
});
Expand Down
Loading

0 comments on commit fb98e4a

Please sign in to comment.