Skip to content
This repository has been archived by the owner on Feb 7, 2019. It is now read-only.

Commit

Permalink
Release 1.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
potch committed Mar 21, 2014
1 parent 198f174 commit 09beec4
Showing 35 changed files with 1,947 additions and 2,814 deletions.
4 changes: 2 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "brick",
"description": "UI Web Components for Mobile Web Apps",
"version": "1.0.0",
"version": "1.0.1",
"keywords": [
"brick",
"custom",
@@ -32,4 +32,4 @@
"x-tag-tabbar": "*",
"brick-common": "*"
}
}
}
2 changes: 1 addition & 1 deletion demos/x-tag-appbar/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
2 changes: 1 addition & 1 deletion demos/x-tag-calendar/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
16 changes: 8 additions & 8 deletions demos/x-tag-deck/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
@@ -129,7 +129,7 @@ <h3>Markup</h3>
<section class="demo-wrap" id="transition-demo">
<header><h2>Specifying deck transitions: <code>transition-type/.transitionType</code></h2></header>
<p>By default, there is no transition animation applied when switching between <code class="prettyprint">&lt;x-card&gt;</code> elements, but we provide a batch of ready-made transitions you can apply using the <code>transition-type</code> attribute (also accessible by the <code>.transitionType</code> property).</p>
<p>Valid options:
<p>Valid options:
<code>
slide-up,
slide-down,
@@ -153,9 +153,9 @@ <h3>Markup</h3>
<div class="markup-wrap two-up">
<div class="controls">
<button class="btn btn-default prev">Previous card</button>
<button class="btn btn-default"
data-toggle-prop="transitionType"
data-toggle-target="x-deck"
<button class="btn btn-default"
data-toggle-prop="transitionType"
data-toggle-target="x-deck"
data-toggle-options='["slide-up", "slide-down", "slide-left", "slide-right", "fade-scale"]'>
Change <code>transition-type</code>
</button>
@@ -164,7 +164,7 @@ <h3>Markup</h3>
<h3>Markup</h3>
<pre class="prettyprint html"></pre>
<h3>JavaScript</h3>
<pre class="prettyprint javascript">// assume transitionButton and deck are already<br/>// defined as their respective DOM elements<br/>var types = [<br/> &quot;slide-up&quot;, &quot;slide-down&quot;, &quot;slide-left&quot;, &quot;slide-right&quot;,<br/>&quot;scale-fade&quot;,<br/>&quot;none&quot;<br/> ];<br/>transitionButton.addEventListener(&quot;click&quot;, function(){<br/> var oldType = deck.transitionType;<br/> deck.transitionType = types[(types.indexOf(oldType)+1) % type.length];<br/><br/> // force animation to make visible for demo<br/> deck.nextCard(&quot;forward&quot;);<br/>});</pre>
<pre class="prettyprint javascript">// assume transitionButton and deck are already<br/>// defined as their respective DOM elements<br/>var types = [<br/> &quot;slide-up&quot;, &quot;slide-down&quot;, &quot;slide-left&quot;, &quot;slide-right&quot;,<br/>&quot;fade-scale&quot;,<br/>&quot;none&quot;<br/> ];<br/>transitionButton.addEventListener(&quot;click&quot;, function(){<br/> var oldType = deck.transitionType;<br/> deck.transitionType = types[(types.indexOf(oldType)+1) % type.length];<br/><br/> // force animation to make visible for demo<br/> deck.nextCard(&quot;forward&quot;);<br/>});</pre>
</div>
<a href="#" class="top">Top</a>
</section>
@@ -186,7 +186,7 @@ <h3>JavaScript</h3>
<div class="controls">
<button class="btn btn-default prev">Previous card</button>
<button class="btn btn-default next">Next card</button>
</div>
</div>
<h3>Markup</h3>
<pre class="prettyprint html"></pre>
</div>
@@ -258,7 +258,7 @@ <h3>Styling</h3>
<p>An <code>hide</code> event is fired from a card target after it has completed its hide animation, and the hide state has been finalized.</p>
<div class="two-up">
<figure class="demo" >
<x-deck class="simple-deck" transition-type="scale-fade">
<x-deck class="simple-deck" transition-type="fade-scale">
<x-card selected>0</x-card>
<x-card>1</x-card>
<x-card>2</x-card>
2 changes: 1 addition & 1 deletion demos/x-tag-flipbox/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
2 changes: 1 addition & 1 deletion demos/x-tag-layout/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
2 changes: 1 addition & 1 deletion demos/x-tag-slider/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
2 changes: 1 addition & 1 deletion demos/x-tag-tabbar/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
2 changes: 1 addition & 1 deletion demos/x-tag-toggle/index.html
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="../../index.html">
<img class="logo" src="../../site/img/logo.png">
Brick<small> 1.0.0-rc2</small>
Brick<small> 1.0.0</small>
</a>
</div>
<ul class="navbar-nav nav">
1 change: 1 addition & 0 deletions dist/brick-common.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Empty file added dist/brick-common.min.css
Empty file.
17 changes: 10 additions & 7 deletions dist/brick.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


x-appbar {
padding: 0;
width: 100%;
@@ -44,6 +46,14 @@ x-appbar h6 {
text-overflow: ellipsis;
margin: 0;
}
x-appbar > h1:after,
x-appbar h2:after,
x-appbar h3:after,
x-appbar h4:after,
x-appbar h5:after,
x-appbar h6:after {
content: attr(subheading);
}

x-calendar {
-webkit-touch-callout: none;
@@ -166,18 +176,11 @@ x-deck > x-card {
right: 0;
height: 100%;
width: 100%;
overflow: hidden;
z-index: 0;
opacity: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(0%, 0%) scale(1);
-moz-transform: translate(0%, 0%) scale(1);
-ms-transform: translate(0%, 0%) scale(1);
94 changes: 31 additions & 63 deletions dist/brick.js
Original file line number Diff line number Diff line change
@@ -1023,7 +1023,7 @@ if (typeof WeakMap === "undefined") {
attach: "OverflowEvent" in win ? "overflowchanged" : [],
condition: function(event, custom) {
event.flow = type;
return event.type == type + "flow" || event.orient === 0 && event.horizontalOverflow == flow || event.orient == 1 && event.verticalOverflow == flow || event.orient == 2 && event.horizontalOverflow == flow && event.verticalOverflow == flow;
return event.type == type + "flow" || (event.orient === 0 && event.horizontalOverflow == flow || event.orient == 1 && event.verticalOverflow == flow || event.orient == 2 && event.horizontalOverflow == flow && event.verticalOverflow == flow);
}
};
}
@@ -2885,98 +2885,66 @@ if (typeof WeakMap === "undefined") {
})();

(function() {
var matchNum = /[1-9]/;
var replaceSpaces = / /g;
var captureTimes = /(\d|\d+?[.]?\d+?)(s|ms)(?!\w)/gi;
var transPre = "transition" in getComputedStyle(document.documentElement) ? "t" : xtag.prefix.js + "T";
var transDur = transPre + "ransitionDuration";
var transProp = transPre + "ransitionProperty";
var skipFrame = function(fn) {
var matchNum = /[1-9]/, replaceSpaces = / /g, captureTimes = /(\d|\d+?[.]?\d+?)(s|ms)(?!\w)/gi, transPre = "transition" in getComputedStyle(document.documentElement) ? "t" : xtag.prefix.js + "T", transDur = transPre + "ransitionDuration", transProp = transPre + "ransitionProperty", skipFrame = function(fn) {
xtag.requestFrame(function() {
xtag.requestFrame(fn);
});
};
var ready;
if (document.readyState == "complete") {
ready = skipFrame(function() {
ready = false;
});
} else {
ready = xtag.addEvent(document, "readystatechange", function() {
if (document.readyState == "complete") {
skipFrame(function() {
ready = false;
});
xtag.removeEvent(document, "readystatechange", ready);
}
});
}
}, ready = document.readyState == "complete" ? skipFrame(function() {
ready = false;
}) : xtag.addEvent(document, "readystatechange", function() {
if (document.readyState == "complete") {
skipFrame(function() {
ready = false;
});
xtag.removeEvent(document, "readystatechange", ready);
}
});
function getTransitions(node) {
node.__transitions__ = node.__transitions__ || {};
return node.__transitions__;
return node.__transitions__ = node.__transitions__ || {};
}
function startTransition(node, name, transitions) {
var style = getComputedStyle(node), after = transitions[name].after;
node.setAttribute("transition", name);
if (after && !style[transDur].match(matchNum)) {
after();
}
if (after && !style[transDur].match(matchNum)) after();
}
xtag.addEvents(document, {
transitionend: function(e) {
var node = e.target, name = node.getAttribute("transition");
if (name) {
var i = 0, max = 0, prop = null, style = getComputedStyle(node), transitions = getTransitions(node), props = style[transProp].replace(replaceSpaces, "").split(",");
var i = max = 0, prop = null, style = getComputedStyle(node), transitions = getTransitions(node), props = style[transProp].replace(replaceSpaces, "").split(",");
style[transDur].replace(captureTimes, function(match, time, unit) {
time = parseFloat(time) * (unit === "s" ? 1e3 : 1);
if (time > max) {
prop = i;
max = time;
}
var time = parseFloat(time) * (unit === "s" ? 1e3 : 1);
if (time > max) prop = i, max = time;
i++;
});
prop = props[prop];
if (!prop) {
throw new SyntaxError("No matching transition property found");
} else if (e.propertyName == prop && transitions[name].after) {
transitions[name].after();
}
if (!prop) throw new SyntaxError("No matching transition property found"); else if (e.propertyName == prop && transitions[name].after) transitions[name].after();
}
}
});
xtag.transition = function(node, name, obj) {
var transitions = getTransitions(node), options = transitions[name] = obj || {};
if (options.immediate) {
options.immediate();
}
if (options.immediate) options.immediate();
if (options.before) {
options.before();
if (ready) {
xtag.skipTransition(node, function() {
startTransition(node, name, transitions);
});
} else {
skipFrame(function() {
startTransition(node, name, transitions);
});
}
} else {
startTransition(node, name, transitions);
}
if (ready) xtag.skipTransition(node, function() {
startTransition(node, name, transitions);
}); else skipFrame(function() {
startTransition(node, name, transitions);
});
} else startTransition(node, name, transitions);
};
xtag.pseudos.transition = {
onCompiled: function(fn, pseudo) {
var options = {}, when = pseudo["arguments"][0] || "immediate", name = pseudo["arguments"][1] || pseudo.key.split(":")[0];
var options = {}, when = pseudo.arguments[0] || "immediate", name = pseudo.arguments[1] || pseudo.key.split(":")[0];
return function() {
var target = this, args = arguments;
if (this.hasAttribute("transition")) {
options[when] = function() {
return fn.apply(target, args);
};
xtag.transition(this, name, options);
} else {
return fn.apply(this, args);
}
} else return fn.apply(this, args);
};
}
};
@@ -2994,7 +2962,7 @@ if (typeof WeakMap === "undefined") {
return item && item.nodeName ? item : isNaN(item) ? xtag.queryChildren(deck, item) : deck.children[item];
}
function checkCard(deck, card, selected) {
return card && (selected ? card == deck.xtag.selected : card != deck.xtag.selected) && deck == card.parentNode && card.nodeName == "X-CARD";
return card && (selected ? card == deck.xtag.selected : card != deck.xtag.selected) && deck == card.parentNode && card.nodeName.toLowerCase() == "x-card";
}
function shuffle(deck, side, direction) {
var getters = sides[side];
@@ -3120,7 +3088,7 @@ if (typeof WeakMap === "undefined") {
lifecycle: {
inserted: function() {
var deck = this.parentNode;
if (deck.nodeName == "X-DECK") {
if (deck.nodeName.toLowerCase() == "x-deck") {
this.xtag.deck = deck;
if (this != deck.selected && this.selected) {
deck.showCard(this);
@@ -3283,7 +3251,7 @@ if (typeof WeakMap === "undefined") {
scroll: evaluateScroll,
transitionend: function(e) {
var node = e.target;
if (this.hasAttribute("content-maximizing") && node.parentNode == this && (node.nodeName == "HEADER" || node.nodeName == "FOOTER")) {
if (this.hasAttribute("content-maximizing") && node.parentNode == this && (node.nodeName.toLowerCase() == "header" || node.nodeName.toLowerCase() == "footer")) {
this.setAttribute("content-maximized", null);
this.removeAttribute("content-maximizing");
}
@@ -3924,7 +3892,7 @@ if (typeof WeakMap === "undefined") {
toggle.active = true;
}
function inTogglebar(toggle) {
return toggle.parentNode && toggle.parentNode.nodeName == "X-TOGGLEBAR";
return toggle.parentNode && toggle.parentNode.nodeName.toLowerCase() == "x-togglebar";
}
var shifted = false;
xtag.addEvents(document, {
3 changes: 2 additions & 1 deletion dist/brick.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions dist/brick.min.js

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions dist/x-tag-appbar.css
Original file line number Diff line number Diff line change
@@ -44,6 +44,14 @@ x-appbar h6 {
text-overflow: ellipsis;
margin: 0;
}
x-appbar > h1:after,
x-appbar h2:after,
x-appbar h3:after,
x-appbar h4:after,
x-appbar h5:after,
x-appbar h6:after {
content: attr(subheading);
}

x-appbar {
background-color: #00202f;
Loading

0 comments on commit 09beec4

Please sign in to comment.