Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

g-component minor fixup; updates for g-page and g-panels #39

Merged
merged 4 commits into from
Nov 20, 2012
Merged

g-component minor fixup; updates for g-page and g-panels #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1a2bdb
g-page: update to use new g-component
Nov 20, 2012
537cdbc
g-panels: update to use new g-component sugar
Nov 20, 2012
e03be26
g-component: fix placement typo with this.super.
sorvell Nov 20, 2012
093edd7
g-component: expose component's base prototype on HTMLElementElement …
sorvell Nov 20, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions src/css/g-page.css
View file
Open in desktop

This file was deleted.

5 changes: 2 additions & 3 deletions src/g-component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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