Skip to content

Commit

Permalink
v0.9.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@wilsonpage
wilsonpage committed Oct 2, 2015
1 parent 8c9993e commit 5478367
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 48 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
@@ -1,6 +1,6 @@
{
"name": "gaia-header",
"version": "0.9.0",
"version": "0.9.1",
"homepage": "https://github.com/gaia-components/gaia-header",
"authors": [
"Wilson Page <wilsonpage@me.com>"
Expand Down
25 changes: 2 additions & 23 deletions dist/gaia-header-es5.js
View file
Expand Up @@ -692,7 +692,7 @@
* @return {Element} constructor
*/
module.exports = component.register("gaia-header", {
rtl: true,
dirObserver: true, // triggers a workaround for bug 1100912 in gaia-component

/**
* Called when the element is first created.
Expand Down Expand Up @@ -754,7 +754,6 @@
this.runFontFitSoon();
this.observerStart();
window.addEventListener("resize", this.onResize);
document.addEventListener("dirchanged", this.onUpdate.bind(this));
},

/**
Expand All @@ -766,7 +765,6 @@
detached: function detached() {
debug("detached");
window.removeEventListener("resize", this.onResize);
document.removeEventListener("dirchanged", this.onUpdate.bind(this));
this.observerStop();
this.clearPending();
},
Expand Down Expand Up @@ -1050,16 +1048,6 @@
});
},

/**
* Handle 'dirchanged' events.
*
* @private
*/
onUpdate: function onUpdate() {
debug("onUpdate");
this.shadowRoot.firstChild.dir = dir();
},

/**
* When the components DOM changes we
* call `.runFontFit()` (sync).
Expand Down Expand Up @@ -1348,7 +1336,7 @@
}
},

template: "<div class=\"inner\" dir=\"" + dir() + "\">\n <button class=\"action-button\">\n <content select=\"[l10n-action]\"></content>\n </button>\n <content></content>\n </div>\n\n <style>\n\n :host {\n display: block;\n -moz-user-select: none;\n\n --gaia-header-button-color:\n var(--header-button-color,\n var(--header-color,\n var(--link-color,\n inherit)));\n }\n\n /**\n * [hidden]\n */\n\n :host[hidden] {\n display: none;\n }\n\n /** Reset\n ---------------------------------------------------------*/\n\n ::-moz-focus-inner { border: 0; }\n\n /** Inner\n ---------------------------------------------------------*/\n\n .inner {\n display: flex;\n min-height: 50px;\n -moz-user-select: none;\n\n background:\n var(--header-background,\n var(--background,\n #fff));\n }\n\n /** Action Button\n ---------------------------------------------------------*/\n\n /**\n * 1. Hidden by default\n */\n\n .action-button {\n position: relative;\n\n display: none; /* 1 */\n width: 50px;\n font-size: 30px;\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n\n align-items: center;\n background: none;\n cursor: pointer;\n transition: opacity 200ms 280ms;\n color:\n var(--header-action-button-color,\n var(--header-icon-color,\n var(--gaia-header-button-color)));\n }\n\n /**\n * [action=back]\n * [action=menu]\n * [action=close]\n *\n * 1. For icon vertical-alignment\n */\n\n [action=back] .action-button,\n [action=menu] .action-button,\n [action=close] .action-button {\n display: flex; /* 1 */\n }\n\n /**\n * :active\n */\n\n .action-button:active {\n transition: none;\n opacity: 0.2;\n }\n\n /** Action Button Icon\n ---------------------------------------------------------*/\n\n .action-button:before {\n font-family: 'gaia-icons';\n font-style: normal;\n text-rendering: optimizeLegibility;\n font-weight: 500;\n }\n\n [action=close] .action-button:before { content: 'close' }\n [action=menu] .action-button:before { content: 'menu' }\n\n [action=back]:-moz-dir(ltr) .action-button:before { content: 'back' }\n [action=back]:-moz-dir(rtl) .action-button:before { content: 'forward' }\n\n /** Action Button Icon\n ---------------------------------------------------------*/\n\n /**\n * 1. To enable vertical alignment.\n */\n\n .action-button:before {\n display: block;\n }\n\n /** Action Button Text\n ---------------------------------------------------------*/\n\n /**\n * To provide custom localized content for\n * the action-button, we allow the user\n * to provide an element with the class\n * .l10n-action. This node is then\n * pulled inside the real action-button.\n *\n * Example:\n *\n * <gaia-header action=\"back\">\n * <span l10n-action aria-label=\"Back\">Localized text</span>\n * <h1>title</h1>\n * </gaia-header>\n */\n\n ::content [l10n-action] {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n font-size: 0;\n }\n\n /** Title\n ---------------------------------------------------------*/\n\n /**\n * 1. Vertically center text. We can't use flexbox\n * here as it breaks text-overflow ellipsis\n * without an inner div.\n */\n\n ::content h1 {\n flex: 1;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n line-height: 50px; /* 1 */\n font-weight: 300;\n font-style: italic;\n font-size: 24px;\n\n color:\n var(--header-title-color,\n var(--header-color,\n var(--title-color,\n var(--text-color,\n inherit))));\n }\n\n /** Buttons\n ---------------------------------------------------------*/\n\n ::content a,\n ::content button {\n position: relative;\n z-index: 1;\n box-sizing: border-box;\n display: flex;\n width: auto;\n height: auto;\n min-width: 50px;\n margin: 0;\n padding: 0 10px;\n outline: 0;\n border: 0;\n\n font-size: 14px;\n line-height: 1;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n text-align: center;\n background: none;\n border-radius: 0;\n font-style: italic;\n cursor: pointer;\n transition: opacity 200ms 280ms;\n color: var(--gaia-header-button-color);\n }\n\n /**\n * :active\n */\n\n ::content a:active,\n ::content button:active {\n transition: none;\n opacity: 0.2;\n }\n\n /**\n * [hidden]\n */\n\n ::content a[hidden],\n ::content button[hidden] {\n display: none;\n }\n\n /**\n * [disabled]\n */\n\n ::content a[disabled],\n ::content button[disabled] {\n pointer-events: none;\n color: var(--header-disabled-button-color);\n }\n\n /** Icon Buttons\n ---------------------------------------------------------*/\n\n /**\n * Icons are a different color to text\n */\n\n ::content .icon,\n ::content [data-icon] {\n color:\n var(--header-icon-color,\n var(--gaia-header-button-color));\n }\n\n /**\n * If users want their action button\n * to be in the component's light-dom\n * they can add an .action class\n * to make it look like the\n * shadow action button.\n */\n\n ::content .action {\n color:\n var(--header-action-button-color,\n var(--header-icon-color,\n var(--gaia-header-button-color)));\n }\n\n /**\n * [data-icon]:empty\n *\n * Icon buttons with no textContent,\n * should always be 50px.\n *\n * This is to prevent buttons being\n * larger than they should be before\n * icon-font has loaded.\n */\n\n ::content [data-icon]:empty {\n width: 50px;\n }\n\n </style>",
template: "<div class=\"inner\">\n <button class=\"action-button\">\n <content select=\"[l10n-action]\"></content>\n </button>\n <content></content>\n </div>\n\n <style>\n\n :host {\n display: block;\n -moz-user-select: none;\n\n --gaia-header-button-color:\n var(--header-button-color,\n var(--header-color,\n var(--link-color,\n inherit)));\n }\n\n /**\n * [hidden]\n */\n\n :host[hidden] {\n display: none;\n }\n\n /** Reset\n ---------------------------------------------------------*/\n\n ::-moz-focus-inner { border: 0; }\n\n /** Inner\n ---------------------------------------------------------*/\n\n .inner {\n display: flex;\n min-height: 50px;\n -moz-user-select: none;\n\n background:\n var(--header-background,\n var(--background,\n #fff));\n }\n\n /** Action Button\n ---------------------------------------------------------*/\n\n /**\n * 1. Hidden by default\n */\n\n .action-button {\n position: relative;\n\n display: none; /* 1 */\n width: 50px;\n font-size: 30px;\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n\n align-items: center;\n background: none;\n cursor: pointer;\n transition: opacity 200ms 280ms;\n color:\n var(--header-action-button-color,\n var(--header-icon-color,\n var(--gaia-header-button-color)));\n }\n\n /**\n * [action=back]\n * [action=menu]\n * [action=close]\n *\n * 1. For icon vertical-alignment\n */\n\n [action=back] .action-button,\n [action=menu] .action-button,\n [action=close] .action-button {\n display: flex; /* 1 */\n }\n\n /**\n * :active\n */\n\n .action-button:active {\n transition: none;\n opacity: 0.2;\n }\n\n /** Action Button Icon\n ---------------------------------------------------------*/\n\n .action-button:before {\n font-family: 'gaia-icons';\n font-style: normal;\n text-rendering: optimizeLegibility;\n font-weight: 500;\n }\n\n [action=close] .action-button:before { content: 'close' }\n [action=menu] .action-button:before { content: 'menu' }\n\n [action=back]:-moz-dir(ltr) .action-button:before { content: 'back' }\n [action=back]:-moz-dir(rtl) .action-button:before { content: 'forward' }\n\n /** Action Button Icon\n ---------------------------------------------------------*/\n\n /**\n * 1. To enable vertical alignment.\n */\n\n .action-button:before {\n display: block;\n }\n\n /** Action Button Text\n ---------------------------------------------------------*/\n\n /**\n * To provide custom localized content for\n * the action-button, we allow the user\n * to provide an element with the class\n * .l10n-action. This node is then\n * pulled inside the real action-button.\n *\n * Example:\n *\n * <gaia-header action=\"back\">\n * <span l10n-action aria-label=\"Back\">Localized text</span>\n * <h1>title</h1>\n * </gaia-header>\n */\n\n ::content [l10n-action] {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n font-size: 0;\n }\n\n /** Title\n ---------------------------------------------------------*/\n\n /**\n * 1. Vertically center text. We can't use flexbox\n * here as it breaks text-overflow ellipsis\n * without an inner div.\n */\n\n ::content h1 {\n flex: 1;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n line-height: 50px; /* 1 */\n font-weight: 300;\n font-style: italic;\n font-size: 24px;\n\n color:\n var(--header-title-color,\n var(--header-color,\n var(--title-color,\n var(--text-color,\n inherit))));\n }\n\n /** Buttons\n ---------------------------------------------------------*/\n\n ::content a,\n ::content button {\n position: relative;\n z-index: 1;\n box-sizing: border-box;\n display: flex;\n width: auto;\n height: auto;\n min-width: 50px;\n margin: 0;\n padding: 0 10px;\n outline: 0;\n border: 0;\n\n font-size: 14px;\n line-height: 1;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n text-align: center;\n background: none;\n border-radius: 0;\n font-style: italic;\n cursor: pointer;\n transition: opacity 200ms 280ms;\n color: var(--gaia-header-button-color);\n }\n\n /**\n * :active\n */\n\n ::content a:active,\n ::content button:active {\n transition: none;\n opacity: 0.2;\n }\n\n /**\n * [hidden]\n */\n\n ::content a[hidden],\n ::content button[hidden] {\n display: none;\n }\n\n /**\n * [disabled]\n */\n\n ::content a[disabled],\n ::content button[disabled] {\n pointer-events: none;\n color: var(--header-disabled-button-color);\n }\n\n /** Icon Buttons\n ---------------------------------------------------------*/\n\n /**\n * Icons are a different color to text\n */\n\n ::content .icon,\n ::content [data-icon] {\n color:\n var(--header-icon-color,\n var(--gaia-header-button-color));\n }\n\n /**\n * If users want their action button\n * to be in the component's light-dom\n * they can add an .action class\n * to make it look like the\n * shadow action button.\n */\n\n ::content .action {\n color:\n var(--header-action-button-color,\n var(--header-icon-color,\n var(--gaia-header-button-color)));\n }\n\n /**\n * [data-icon]:empty\n *\n * Icon buttons with no textContent,\n * should always be 50px.\n *\n * This is to prevent buttons being\n * larger than they should be before\n * icon-font has loaded.\n */\n\n ::content [data-icon]:empty {\n width: 50px;\n }\n\n </style>",

// Test hook
nextTick: nextTick
Expand All @@ -1358,15 +1346,6 @@
* Utils
*/

/**
* Get the document direction.
*
* @return {String} ('ltr'|'rtl')
*/
function dir() {
return document.dir || "ltr";
}

/**
* Determines whether passed element
* contributes to the layout in gaia-header.
Expand Down
25 changes: 2 additions & 23 deletions dist/gaia-header.js
View file
Expand Up @@ -632,7 +632,7 @@ const MAXIMUM_FONT_SIZE = 23;
* @return {Element} constructor
*/
module.exports = component.register('gaia-header', {
rtl: true,
dirObserver: true, // triggers a workaround for bug 1100912 in gaia-component

/**
* Called when the element is first created.
Expand Down Expand Up @@ -691,7 +691,6 @@ module.exports = component.register('gaia-header', {
this.runFontFitSoon();
this.observerStart();
window.addEventListener('resize', this.onResize);
document.addEventListener('dirchanged', this.onUpdate.bind(this));
},

/**
Expand All @@ -703,7 +702,6 @@ module.exports = component.register('gaia-header', {
detached: function() {
debug('detached');
window.removeEventListener('resize', this.onResize);
document.removeEventListener('dirchanged', this.onUpdate.bind(this));
this.observerStop();
this.clearPending();
},
Expand Down Expand Up @@ -959,16 +957,6 @@ module.exports = component.register('gaia-header', {
});
},

/**
* Handle 'dirchanged' events.
*
* @private
*/
onUpdate: function() {
debug('onUpdate');
this.shadowRoot.firstChild.dir = dir();
},

/**
* When the components DOM changes we
* call `.runFontFit()` (sync).
Expand Down Expand Up @@ -1219,7 +1207,7 @@ module.exports = component.register('gaia-header', {
}
},

template: `<div class="inner" dir="${dir()}">
template: `<div class="inner">
<button class="action-button">
<content select="[l10n-action]"></content>
</button>
Expand Down Expand Up @@ -1516,15 +1504,6 @@ module.exports = component.register('gaia-header', {
* Utils
*/

/**
* Get the document direction.
*
* @return {String} ('ltr'|'rtl')
*/
function dir() {
return document.dir || 'ltr';
}

/**
* Determines whether passed element
* contributes to the layout in gaia-header.
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "gaia-header",
"version": "0.9.0",
"version": "0.9.1",
"homepage": "https://github.com/gaia-components/gaia-header",
"license": "MIT",
"main": "gaia-header.js",
Expand Down

0 comments on commit 5478367

Please sign in to comment.