From 9bbe08083ed25204fef19dfd52fbcd1e4eefc6f0 Mon Sep 17 00:00:00 2001 From: Sean Gates Date: Thu, 4 Jan 2018 14:48:56 -0700 Subject: [PATCH 1/7] Listbox first rev (#50) --- .gitignore | 2 +- .../menu.css => dropdown/ds6/dropdown.css} | 57 +++- docs/_includes/ds6/listbox.html | 252 ++++++++++++++++++ docs/ds6/index.html | 2 + docs/src/js/ds6/main.js | 28 ++ docs/static/ds4/docs.js | 10 +- docs/static/ds6/docs.js | 20 +- docs/static/ds6/skin.css | 57 +++- listbox.browser.json | 10 +- menu.browser.json | 2 +- src/less/bundles/skin/ds6/skin.less | 7 +- .../ds6/dropdown-base.less} | 43 ++- src/less/dropdown/ds6/dropdown.less | 9 + src/less/menu/ds6/menu.less | 4 - 14 files changed, 449 insertions(+), 54 deletions(-) rename dist/{menu/ds6/menu.css => dropdown/ds6/dropdown.css} (60%) create mode 100644 docs/_includes/ds6/listbox.html rename src/less/{menu/ds6/menu-base.less => dropdown/ds6/dropdown-base.less} (72%) create mode 100644 src/less/dropdown/ds6/dropdown.less delete mode 100644 src/less/menu/ds6/menu.less diff --git a/.gitignore b/.gitignore index 6c891c787..a3c04e0d4 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ _cdn _site docs/.jekyll-metadata node_modules -npm-debug.log.* +npm-debug.log* diff --git a/dist/menu/ds6/menu.css b/dist/dropdown/ds6/dropdown.css similarity index 60% rename from dist/menu/ds6/menu.css rename to dist/dropdown/ds6/dropdown.css index 9a190e67c..887036a6f 100644 --- a/dist/menu/ds6/menu.css +++ b/dist/dropdown/ds6/dropdown.css @@ -1,34 +1,41 @@ .menu, -.fake-menu { +.fake-menu, +.listbox { line-height: normal; position: relative; } span.menu, -span.fake-menu { +span.fake-menu, +span.listbox { display: inline-block; } .menu .expand-btn[aria-expanded="true"], -.fake-menu .expand-btn[aria-expanded="true"] { +.fake-menu .expand-btn[aria-expanded="true"], +.listbox .expand-btn[aria-expanded="true"] { border-bottom: 0; } .menu .expand-btn[aria-expanded="true"] ~ .menu__items[role="menu"], +.listbox .expand-btn[aria-expanded="true"] ~ .listbox__options[role="listbox"], .fake-menu .expand-btn[aria-expanded="true"] ~ .fake-menu__items { display: block; } .menu .expand-btn ~ .menu__items[role="menu"], +.listbox .expand-btn ~ .listbox__options[role="listbox"], .fake-menu .expand-btn ~ .fake-menu__items { display: none; position: absolute; z-index: 1; } .menu__items[role="menu"], +.listbox__options[role="listbox"], .fake-menu__items { - background-color: white; + background-color: #ffffff; border: 1px solid #c7c7c7; box-sizing: border-box; width: 100%; } span.menu__items[role="menu"], +div.listbox__options[role="listbox"], span.fake-menu__items { display: inline-block; } @@ -37,9 +44,10 @@ span.fake-menu__items { margin: 0; } div.menu__item[role^="menuitem"], +div.listbox__option[role^="option"], a.fake-menu__item, button.fake-menu__item { - background-color: white; + background-color: #ffffff; box-sizing: border-box; cursor: pointer; display: -webkit-inline-box; @@ -55,36 +63,63 @@ button.fake-menu__item { width: 100%; } div.menu__item[role^="menuitem"] span:not([class*="menu__status"]), +div.listbox__option[role^="option"] span:not([class*="menu__status"]), a.fake-menu__item span:not([class*="menu__status"]), -button.fake-menu__item span:not([class*="menu__status"]) { +button.fake-menu__item span:not([class*="menu__status"]), +div.menu__item[role^="menuitem"] span:not([class*="listbox__status"]), +div.listbox__option[role^="option"] span:not([class*="listbox__status"]), +a.fake-menu__item span:not([class*="listbox__status"]), +button.fake-menu__item span:not([class*="listbox__status"]) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } div.menu__item[role^="menuitem"]:focus, +div.listbox__option[role^="option"]:focus, a.fake-menu__item:focus, button.fake-menu__item:focus, div.menu__item[role^="menuitem"]:hover, +div.listbox__option[role^="option"]:hover, a.fake-menu__item:hover, button.fake-menu__item:hover { background-color: #f5f5f5; } div.menu__item[role^="menuitem"]:focus, +div.listbox__option[role^="option"]:focus, a.fake-menu__item:focus, button.fake-menu__item:focus { outline: 1px solid #c7c7c7; } div.menu__item[role^="menuitem"]:active, +div.listbox__option[role^="option"]:active, a.fake-menu__item:active, button.fake-menu__item:active { font-weight: bold; } +div.menu__item[role^="menuitem"]:active .menu__status, +div.listbox__option[role^="option"]:active .menu__status, +a.fake-menu__item:active .menu__status, +button.fake-menu__item:active .menu__status, +div.menu__item[role^="menuitem"]:active .listbox__status, +div.listbox__option[role^="option"]:active .listbox__status, +a.fake-menu__item:active .listbox__status, +button.fake-menu__item:active .listbox__status, +div.menu__item[role^="menuitem"]:active .fake-menu__status, +div.listbox__option[role^="option"]:active .fake-menu__status, +a.fake-menu__item:active .fake-menu__status, +button.fake-menu__item:active .fake-menu__status { + color: #c7c7c7; +} div.menu__item[role^="menuitem"]:not(:last-child), +div.listbox__option[role^="option"]:not(:last-child), a.fake-menu__item:not(:last-child), button.fake-menu__item:not(:last-child) { margin-bottom: 1px; } -div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status { +div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status, +div.listbox__option[role^="option"][aria-selected="true"] .menu__status, +div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status, +div.listbox__option[role^="option"][aria-selected="true"] .listbox__status { visibility: visible; } a.fake-menu__item { @@ -99,13 +134,14 @@ a.fake-menu__item[aria-current="page"] .fake-menu__status { visibility: visible; } button.fake-menu__item { - background-color: white; + background-color: #ffffff; border: 0; color: #111820; display: block; text-align: left; } .menu__status, +.listbox__status, .fake-menu__status { -ms-flex-item-align: center; -ms-grid-row-align: center; @@ -119,6 +155,7 @@ button.fake-menu__item { width: 1em; } span.menu__status, +span.listbox__status, span.fake-menu__status { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%277%27%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23111820%22%20d%3D%22M0%203.70913219%202.21049749%206%208%200%22%3E%3C/path%3E%3C/svg%3E'); background-position: right center; @@ -130,13 +167,15 @@ span.fake-menu__status { } .menu__items--grow[role="menu"], .menu__items--grow-reverse[role="menu"], +.listbox__options--grow[role="listbox"], +.listbox__options--grow-reverse[role="listbox"], .fake-menu__items--grow, .fake-menu__items--grow-reverse { min-width: calc(100%); width: auto; - max-width: calc(150%); } .menu__items--grow-reverse[role="menu"], +.listbox__options--grow-reverse[role="listbox"], .fake-menu__items--grow-reverse { right: 0; } diff --git a/docs/_includes/ds6/listbox.html b/docs/_includes/ds6/listbox.html new file mode 100644 index 000000000..0ff90507e --- /dev/null +++ b/docs/_includes/ds6/listbox.html @@ -0,0 +1,252 @@ + +
+

@ebay/skin/listbox

+

The Skin listbox is intended for use as a custom view (or facade) for the native HTML select element. JavaScript will be required to create a 2-way binding between the two.

+ +
+
+ + +
+
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+
+ + +
+ {% highlight html %} + + +
+
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+
+ + + {% endhighlight %} +
+ +

Selected Listbox Option

+
+
+ + +
+
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+
+ + +
+ {% highlight html %} + + +
+
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+
+ + + {% endhighlight %} +
+ +

Multiple Selected Listbox Options

+
+
+ + +
+
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+
+ + +
+ {% highlight html %} + + +
+
+ Item 1 + +
+
+ Item 2 + +
+
+ Item 3 + +
+
+ + + {% endhighlight %} +
+ +

Growth Listbox

+
+
+ + +
+
+ Item 1 + +
+
+ Item 2 is really long compared to the others + +
+
+ Item 3 + +
+
+ + +
+ {% highlight html %} + + +
+
+ Item 1 + +
+
+ Item 2 is really long compared to the others + +
+
+ Item 3 + +
+
+ + + {% endhighlight %} +
+
diff --git a/docs/ds6/index.html b/docs/ds6/index.html index 77cb6489b..8d57f08a9 100644 --- a/docs/ds6/index.html +++ b/docs/ds6/index.html @@ -26,6 +26,7 @@

Contents

  • @ebay/skin/button
  • @ebay/skin/color
  • @ebay/skin/icon
    • +
  • @ebay/skin/listbox
  • @ebay/skin/menu
  • @ebay/skin/svg
    • @@ -34,6 +35,7 @@

    Contents

    {% include ds6/button.html %} {% include ds6/color.html %} {% include ds6/icon.html %} + {% include ds6/listbox.html %} {% include ds6/menu.html %} {% include ds6/svg.html %} diff --git a/docs/src/js/ds6/main.js b/docs/src/js/ds6/main.js index 147afcb35..455723ec3 100644 --- a/docs/src/js/ds6/main.js +++ b/docs/src/js/ds6/main.js @@ -53,3 +53,31 @@ nodeListToArray(document.querySelectorAll('.menu, .fake-menu')).forEach(function nodeListToArray(document.querySelectorAll('[role^=menuitem]')).forEach(function(el, i) { scrollKeyPreventer.add(el); }); + +// roving tab index logic on menu items container +nodeListToArray(document.querySelectorAll('[role=listbox]')).forEach(function(el, i) { + var widget = Rover.createLinear(el, '[role^=option]', {autoReset: 0}); +}); + +// aria expanded logic on menu button and overlay +// escape key logic on menu (closes menu) +nodeListToArray(document.querySelectorAll('.listbox')).forEach(function(el, i) { + var widget = new Expander(el, { + autoCollapse: true, + click: true, + focusManagement: 'interactive', + hostSelector: '.expand-btn', + contentSelector: '.listbox__options' + }); + + keyEmitter.addKeyDown(el); + + el.addEventListener('escapeKeyDown', function() { + this.querySelector('.expand-btn').focus(); + }); +}); + +// prevent scroll keys logic on menu items +nodeListToArray(document.querySelectorAll('[role^=option]')).forEach(function(el, i) { + scrollKeyPreventer.add(el); +}); diff --git a/docs/static/ds4/docs.js b/docs/static/ds4/docs.js index 2d7a68cc7..54fa7bc0b 100644 --- a/docs/static/ds4/docs.js +++ b/docs/static/ds4/docs.js @@ -37,10 +37,10 @@ $_mod.installed("jquery-prevent-scroll-keys$1.0.1","jquery","3.2.1"); !function(e,n,o,t){e.fn.preventScrollKeys=function(n){return this.each(function(){e(this).on("keydown",n,function(e){(e.keyCode>=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()})})}}(jQuery,window,document); !function(i,n,t,e){i.fn.rovingTabindex=function(n,t){return t=i.extend({activeIndex:0,autoFocus:!0,autoInit:!0,autoReset:!1,autoWrap:!1,axis:"both",disableHomeAndEndKeys:!1,isGrid:!1,setFocusDelay:0},t),this.each(function(){var e=i(this),a=e.find(n),o=function(i,n){i.removeAttr("tabindex"),n.attr("tabindex","0")},r=function(){a=e.find(n),!0===t.isGrid?e.trigger("gridNavigationItemsChange"):e.trigger("linearNavigationItemsChange")},g=function(i,n){var e=n.fromIndex,r=n.toIndex,g=a.eq(e),d=a.eq(r);o(g,d),"linearNavigationInit"!==i.type&&"gridNavigationInit"!==i.type&&(!0===t.autoFocus&&setTimeout(function(){a.eq(r).focus()},t.setFocusDelay),d.trigger("rovingTabindexChange",{fromIndex:e,toIndex:r}))};!0===t.isGrid?e.gridNavigation(n,t):e.linearNavigation(n,t),e.preventScrollKeys(n),e.on("linearNavigationInit gridNavigationInit linearNavigationChange gridNavigationChange",g),e.on("domChange",r)})}}(jQuery,window,document); !function(e,t,o,r){function n(){for(var e={},t=65;t<=90;t++)e[t]=String.fromCharCode(t);return e}e.fn.menu=function(t){return t=e.extend({autoWrap:!1,buttonSelector:"button",debug:!1,disableShortcutKey:!1,overlaySelector:"[role=menu]"},t),this.each(function(){var o=t.buttonSelector,r=t.overlaySelector,a=e(this),i=a.find(o),u=a.find(r),c=u.find("[role^=menuitem]"),d=(u.find("[role=menuitem]"),u.find("[role=menuitemcheckbox]"),u.find("[role=menuitemradio]")),l=(c.first(),n()),m=!t.disableShortcutKey,s={},f=function(){setTimeout(function(){i.attr("aria-expanded","false"),i.focus()},50)},p=f;m&&c.each(function(t){var o=e(this).text()[0];s[o]||(s[o]=t)}),a.nextId("menu"),a.clickFlyout({autoCollapse:!0,debug:t.debug,triggerSelector:o,focusManagement:"first",overlaySelector:r}),u.rovingTabindex("[role^=menuitem]",{axis:"y",autoReset:!0,autoWrap:t.autoWrap,debug:t.debug}),u.prop("id",a.prop("id")+"-menu"),i.attr("aria-haspopup","true").prop("id",a.prop("id")+"-button"),a.on("click enterKeyDown spaceKeyDown","[role^=menuitem]",function(t){var o=e(this),r=o.attr("role");switch(t.stopPropagation(),r){case"menuitemradio":d.attr("aria-checked","false"),o.attr("aria-checked","true");break;case"menuitemcheckbox":o.attr("aria-checked","true"===o.attr("aria-checked")?"false":"true")}setTimeout(function(){o.trigger("menuSelect"),f()},100)}),a.on("escapeKeyDown","[role^=menuitem]",p),m&&(c.attr("tabindex","-1"),a.on("keydown","[role^=menuitem]",function(e){var t=l[e.keyCode],o=s[t];void 0!==o&&c.get(o).focus()})),a.addClass("menu--js")})}}(jQuery); -$_mod.installed("jquery-skip-to$0.0.2","jquery","3.2.1"); -!function(n,t,i,o){n.fn.skipTo=function(){return this.each(function(){var i=n(this),o=i.find("a"),e=o.attr("href"),u=n(e);o.on("click",function(){u.attr("tabindex","-1"),t.setTimeout(function(){u.focus()},5),u.one("blur",function(){u.removeAttr("tabindex")})})})}}(jQuery,window,document); -$_mod.installed("jquery-tabs$0.5.1","jquery","3.2.1"); +$_mod.installed("jquery-skip-to$0.0.1","jquery","3.2.1"); +!function(n,t,i,o){n.fn.skipTo=function(){return this.each(function(){var i=n(this),o=i.find("a"),e=o.attr("href"),u=n(e);o.on("click",function(n){u.attr("tabindex","-1"),t.setTimeout(function(n){u.focus()},5),u.one("blur",function(n){u.removeAttr("tabindex")})})})}}(jQuery,window,document); +$_mod.installed("jquery-tabs$0.5.0","jquery","3.2.1"); !function(t){t.fn.tabs=function(a){return a=t.extend({},a),this.each(function(){var e=t(this),r=e.find(".tabs__items"),i=r.find(".tabs__item"),n=r.find("a"),d=e.find(".tabs__content"),l=d.find(".tabs__panel");e.nextId("tabs"),r.attr("role","tablist"),i.attr("role","tab").attr("aria-selected","false").first().attr("aria-selected","true"),l.attr("role","tabpanel").prop("hidden",!0).first().prop("hidden",!1),n.attr("role","presentation").removeAttr("href"),!0===a.livePanels&&d.attr("aria-live","polite"),i.each(function(a,r){var i=t(r),n=e.attr("id")+"-tab-"+a,d=e.attr("id")+"-panel-"+a;i.attr("id",n).attr("aria-controls",d),l.eq(a).attr("id",d).attr("aria-labelledby",n)}),r.rovingTabindex("[role=tab]",{autoWrap:!0,disableHomeAndEndKeys:!0}),r.on("rovingTabindexChange","[role=tab]",function(a,e){var i=t(this),n=r.find("[aria-selected=true]"),l=d.find("[aria-labelledby={0}]".replace("{0}",n.attr("id"))),s=d.find("[aria-labelledby={0}]".replace("{0}",i.attr("id")));i[0]!==n[0]&&(l.prop("hidden",!0),s.prop("hidden",!1),i.attr("aria-selected","true"),setTimeout(function(){n.attr("aria-selected","false"),i.trigger("tabsSelect",e)},0))}),e.addClass("tabs--js")})}}(jQuery); -$_mod.installed("jquery-tooltip$0.2.1","jquery","3.2.1"); -!function(e){e.fn.tooltip=function(t){return t=e.extend({overlaySelector:".tooltip__overlay, [role=tooltip]",triggerSelector:".tooltip__trigger, [aria-describedby]"},t),this.each(function(){var o=e(this),r={expandedClass:"tooltip--expanded",triggerSelector:t.triggerSelector,overlaySelector:t.overlaySelector};o.hoverFlyout(r).focusFlyout(r),o.addClass("tooltip--js")})}}(jQuery); +$_mod.installed("jquery-tooltip$0.2.0","jquery","3.2.1"); +!function(e){e.fn.tooltip=function(t){return t=e.extend({overlaySelector:".tooltip__overlay, [role=tooltip]",triggerSelector:".tooltip__trigger, [aria-describedby]"},t),this.each(function(){var o=e(this),r=(o.find(t.triggerSelector),{expandedClass:"tooltip--expanded",triggerSelector:t.triggerSelector,overlaySelector:t.overlaySelector});o.hoverFlyout(r).focusFlyout(r),o.addClass("tooltip--js")})}}(jQuery); $("#header-large .grid__cell").skipTo(),$(".dialog-button").dialogButton(),$(".fake-menu").clickFlyout({closeOnEsc:!0,focusManagement:"first",triggerSelector:".expand-btn",overlaySelector:".fake-menu__items"}),$(".menu").menu(),$(".tabs, .hijax-tabs").tabs(),$(".tooltip").tooltip(),$(".bubblehelp").clickFlyout({triggerSelector:".bubblehelp__host",overlaySelector:".bubblehelp__overlay",autoCollapse:!1}),$("#banner-menu").on("click","a",function(e){var t=document.querySelector(this.href.substring(this.href.indexOf("#")));t.setAttribute("tabindex","-1"),t.focus()}),$(".expand-btn-example").on("click",function(){$(this).attr("aria-expanded","true"===$(this).attr("aria-expanded")?"false":"true")}); \ No newline at end of file diff --git a/docs/static/ds6/docs.js b/docs/static/ds6/docs.js index 361ceb73b..a97c882d0 100644 --- a/docs/static/ds6/docs.js +++ b/docs/static/ds6/docs.js @@ -1,22 +1,22 @@ !function(){function r(r,n){var t=new Error('Cannot find module "'+r+'"'+(n?' from "'+n+'"':""));return t.code="MODULE_NOT_FOUND",t}function n(r){this.id=this.filename=r,this.loaded=!1,this.exports=void 0}function t(r,n,t){var i=t&&t.globals;if(O[r]=n,i)for(var e=b||global,o=0;o2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e1&&void 0!==arguments[1]?arguments[1]:"nid",d=""===t?"nid":t;o[d]=o[d]||0,i.id||i.setAttribute("id",d+"-"+o[d]++)}}); -$_mod.installed("makeup-expander$0.2.1","makeup-exit-emitter","0.0.3"); +$_mod.installed("makeup-expander$0.1.0","makeup-exit-emitter","0.0.3"); $_mod.main("/makeup-exit-emitter$0.0.3",""); $_mod.installed("makeup-exit-emitter$0.0.3","custom-event-polyfill","0.3.0"); $_mod.installed("makeup-exit-emitter$0.0.3","makeup-next-id","0.0.1"); $_mod.def("/makeup-exit-emitter$0.0.3/index",function(e,n,t,i,o){"use strict";function s(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function r(e,n,t){e.dispatchEvent(new CustomEvent("focusExit",{detail:{fromElement:n,toElement:t},bubbles:!1}))}function u(e){var n=e.target;!0===this.el.contains(n)?this.currentFocusElement=n:(window.removeEventListener("blur",this.onWindowBlurListener),document.removeEventListener("focusin",this.onDocumentFocusInListener),r(this.el,this.currentFocusElement,n),this.currentFocusElement=null)}function c(){r(this.el,this.currentFocusElement,void 0)}function l(){document.addEventListener("focusin",this.onDocumentFocusInListener),window.addEventListener("blur",this.onWindowBlurListener)}function d(e){var n=null;return h(e),v[e.id]||(n=new f(e),v[e.id]=n),n}function m(e){var n=v[e.id];n&&(n.removeEventListeners(),delete v[e.id])}var a=function(){function e(e,n){for(var t=0;t1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(a));return n=n.filter(function(e){return"none"!==window.getComputedStyle(e).display}),!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); -$_mod.def("/makeup-expander$0.2.1/index",function(e,t,s,i,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(){this.keyDownFlag=!0}var r=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(o));return!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); +$_mod.def("/makeup-expander$0.1.0/index",function(e,t,s,i,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(){this.keyDownFlag=!0}var r=Object.assign||function(e){for(var t=1;t=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()}function i(e){e.addEventListener("keydown",r)}function k(e){e.removeEventListener("keydown",r)}o.exports={add:i,remove:k}}); -$_mod.def("/@ebay/skin$3.2.0/docs/src/js/ds6/main",function(e,t,n,r,o){function a(e){return Array.prototype.slice.call(e)}var c=e("/makeup-expander$0.2.1/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),u=e("/makeup-key-emitter$0.0.2/index"),d=e("/makeup-prevent-scroll-keys$0.0.1/index");a(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),a(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),a(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),a(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new c(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});u.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),a(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){d.add(e)})}); +$_mod.def("/@ebay/skin$3.2.0/docs/src/js/ds6/main",function(e,t,n,o,c){function r(e){return Array.prototype.slice.call(e)}var a=e("/makeup-expander$0.1.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),u=e("/makeup-key-emitter$0.0.2/index"),l=e("/makeup-prevent-scroll-keys$0.0.1/index");r(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),r(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),r(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),r(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});u.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){l.add(e)}),r(document.querySelectorAll("[role=listbox]")).forEach(function(e,t){i.createLinear(e,"[role^=option]",{autoReset:0})}),r(document.querySelectorAll(".listbox")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".listbox__options"});u.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=option]")).forEach(function(e,t){l.add(e)})}); $_mod.run("/@ebay/skin$3.2.0/docs/src/js/ds6/main"); \ No newline at end of file diff --git a/docs/static/ds6/skin.css b/docs/static/ds6/skin.css index c1c343782..da1447233 100644 --- a/docs/static/ds6/skin.css +++ b/docs/static/ds6/skin.css @@ -349,36 +349,43 @@ svg.icon--hamburger { width: 12px; } .menu, -.fake-menu { +.fake-menu, +.listbox { line-height: normal; position: relative; } span.menu, -span.fake-menu { +span.fake-menu, +span.listbox { display: inline-block; } .menu .expand-btn[aria-expanded="true"], -.fake-menu .expand-btn[aria-expanded="true"] { +.fake-menu .expand-btn[aria-expanded="true"], +.listbox .expand-btn[aria-expanded="true"] { border-bottom: 0; } .menu .expand-btn[aria-expanded="true"] ~ .menu__items[role="menu"], +.listbox .expand-btn[aria-expanded="true"] ~ .listbox__options[role="listbox"], .fake-menu .expand-btn[aria-expanded="true"] ~ .fake-menu__items { display: block; } .menu .expand-btn ~ .menu__items[role="menu"], +.listbox .expand-btn ~ .listbox__options[role="listbox"], .fake-menu .expand-btn ~ .fake-menu__items { display: none; position: absolute; z-index: 1; } .menu__items[role="menu"], +.listbox__options[role="listbox"], .fake-menu__items { - background-color: white; + background-color: #ffffff; border: 1px solid #c7c7c7; box-sizing: border-box; width: 100%; } span.menu__items[role="menu"], +div.listbox__options[role="listbox"], span.fake-menu__items { display: inline-block; } @@ -387,9 +394,10 @@ span.fake-menu__items { margin: 0; } div.menu__item[role^="menuitem"], +div.listbox__option[role^="option"], a.fake-menu__item, button.fake-menu__item { - background-color: white; + background-color: #ffffff; box-sizing: border-box; cursor: pointer; display: -webkit-inline-box; @@ -405,36 +413,63 @@ button.fake-menu__item { width: 100%; } div.menu__item[role^="menuitem"] span:not([class*="menu__status"]), +div.listbox__option[role^="option"] span:not([class*="menu__status"]), a.fake-menu__item span:not([class*="menu__status"]), -button.fake-menu__item span:not([class*="menu__status"]) { +button.fake-menu__item span:not([class*="menu__status"]), +div.menu__item[role^="menuitem"] span:not([class*="listbox__status"]), +div.listbox__option[role^="option"] span:not([class*="listbox__status"]), +a.fake-menu__item span:not([class*="listbox__status"]), +button.fake-menu__item span:not([class*="listbox__status"]) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } div.menu__item[role^="menuitem"]:focus, +div.listbox__option[role^="option"]:focus, a.fake-menu__item:focus, button.fake-menu__item:focus, div.menu__item[role^="menuitem"]:hover, +div.listbox__option[role^="option"]:hover, a.fake-menu__item:hover, button.fake-menu__item:hover { background-color: #f5f5f5; } div.menu__item[role^="menuitem"]:focus, +div.listbox__option[role^="option"]:focus, a.fake-menu__item:focus, button.fake-menu__item:focus { outline: 1px solid #c7c7c7; } div.menu__item[role^="menuitem"]:active, +div.listbox__option[role^="option"]:active, a.fake-menu__item:active, button.fake-menu__item:active { font-weight: bold; } +div.menu__item[role^="menuitem"]:active .menu__status, +div.listbox__option[role^="option"]:active .menu__status, +a.fake-menu__item:active .menu__status, +button.fake-menu__item:active .menu__status, +div.menu__item[role^="menuitem"]:active .listbox__status, +div.listbox__option[role^="option"]:active .listbox__status, +a.fake-menu__item:active .listbox__status, +button.fake-menu__item:active .listbox__status, +div.menu__item[role^="menuitem"]:active .fake-menu__status, +div.listbox__option[role^="option"]:active .fake-menu__status, +a.fake-menu__item:active .fake-menu__status, +button.fake-menu__item:active .fake-menu__status { + color: #c7c7c7; +} div.menu__item[role^="menuitem"]:not(:last-child), +div.listbox__option[role^="option"]:not(:last-child), a.fake-menu__item:not(:last-child), button.fake-menu__item:not(:last-child) { margin-bottom: 1px; } -div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status { +div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status, +div.listbox__option[role^="option"][aria-selected="true"] .menu__status, +div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status, +div.listbox__option[role^="option"][aria-selected="true"] .listbox__status { visibility: visible; } a.fake-menu__item { @@ -449,13 +484,14 @@ a.fake-menu__item[aria-current="page"] .fake-menu__status { visibility: visible; } button.fake-menu__item { - background-color: white; + background-color: #ffffff; border: 0; color: #111820; display: block; text-align: left; } .menu__status, +.listbox__status, .fake-menu__status { -ms-flex-item-align: center; -ms-grid-row-align: center; @@ -469,6 +505,7 @@ button.fake-menu__item { width: 1em; } span.menu__status, +span.listbox__status, span.fake-menu__status { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%277%27%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23111820%22%20d%3D%22M0%203.70913219%202.21049749%206%208%200%22%3E%3C/path%3E%3C/svg%3E'); background-position: right center; @@ -480,13 +517,15 @@ span.fake-menu__status { } .menu__items--grow[role="menu"], .menu__items--grow-reverse[role="menu"], +.listbox__options--grow[role="listbox"], +.listbox__options--grow-reverse[role="listbox"], .fake-menu__items--grow, .fake-menu__items--grow-reverse { min-width: calc(100%); width: auto; - max-width: calc(150%); } .menu__items--grow-reverse[role="menu"], +.listbox__options--grow-reverse[role="listbox"], .fake-menu__items--grow-reverse { right: 0; } diff --git a/listbox.browser.json b/listbox.browser.json index ae608467c..93c1530e5 100644 --- a/listbox.browser.json +++ b/listbox.browser.json @@ -1,5 +1,13 @@ { "dependencies": [ - "./dist/listbox/ds4/listbox.css" + "./dist/dropdown/ds6/dropdown.css", + { + "path": "./dist/listbox/ds4/listbox.css", + "if-not-flag": "skin-ds6" + }, + { + "path": "./dist/dropdown/ds6/dropdown.css", + "if-flag": "skin-ds6" + } ] } diff --git a/menu.browser.json b/menu.browser.json index d6cfc3ad0..3c195d2a7 100644 --- a/menu.browser.json +++ b/menu.browser.json @@ -6,7 +6,7 @@ "if-not-flag": "skin-ds6" }, { - "path": "./dist/menu/ds6/menu.css", + "path": "./dist/dropdown/ds6/dropdown.css", "if-flag": "skin-ds6" } ] diff --git a/src/less/bundles/skin/ds6/skin.less b/src/less/bundles/skin/ds6/skin.less index 6397b7b87..26af58370 100644 --- a/src/less/bundles/skin/ds6/skin.less +++ b/src/less/bundles/skin/ds6/skin.less @@ -5,7 +5,8 @@ @import "../../../button/ds6/button.less"; @import "../../../color/ds6/color.less"; @import "../../../icon/ds6/icon.less"; -@import "../../../menu/ds6/menu.less"; -//@import "../../../notice/ds6/notice.less"; -//@import "../../../typography/ds6/typography.less"; +// @import "../../../menu/ds6/menu.less"; +@import "../../../dropdown/ds6/dropdown.less"; +// @import "../../../notice/ds6/notice.less"; +// @import "../../../typography/ds6/typography.less"; @import "../../../utility/ds6/utility.less"; diff --git a/src/less/menu/ds6/menu-base.less b/src/less/dropdown/ds6/dropdown-base.less similarity index 72% rename from src/less/menu/ds6/menu-base.less rename to src/less/dropdown/ds6/dropdown-base.less index af621b0ab..669f692bf 100644 --- a/src/less/menu/ds6/menu-base.less +++ b/src/less/dropdown/ds6/dropdown-base.less @@ -1,29 +1,34 @@ // BEM block .menu, -.fake-menu { +.fake-menu, +.listbox { line-height: normal; position: relative; } span.menu, -span.fake-menu { +span.fake-menu, +span.listbox { display: inline-block; } // BEM elements .menu .expand-btn[aria-expanded="true"], -.fake-menu .expand-btn[aria-expanded="true"] { +.fake-menu .expand-btn[aria-expanded="true"], +.listbox .expand-btn[aria-expanded="true"] { border-bottom: 0; } .menu .expand-btn[aria-expanded="true"] ~ .menu__items[role="menu"], +.listbox .expand-btn[aria-expanded="true"] ~ .listbox__options[role="listbox"], .fake-menu .expand-btn[aria-expanded="true"] ~ .fake-menu__items { display: block; } .menu .expand-btn ~ .menu__items[role="menu"], +.listbox .expand-btn ~ .listbox__options[role="listbox"], .fake-menu .expand-btn ~ .fake-menu__items { display: none; position: absolute; @@ -31,14 +36,16 @@ span.fake-menu { } .menu__items[role="menu"], +.listbox__options[role="listbox"], .fake-menu__items { - background-color: white; + background-color: @ds6-color-g201-gray; border: 1px solid @ds6-color-g204-gray; box-sizing: border-box; width: 100%; } span.menu__items[role="menu"], +div.listbox__options[role="listbox"], span.fake-menu__items { display: inline-block; } @@ -49,20 +56,22 @@ span.fake-menu__items { } div.menu__item[role^="menuitem"], +div.listbox__option[role^="option"], a.fake-menu__item, button.fake-menu__item { - background-color: white; + background-color: @ds6-color-g201-gray; box-sizing: border-box; cursor: pointer; display: inline-flex; - font-size: @ds6-font-size-14; + font-size: 0.875rem; height: 100%; justify-content: space-between; line-height: 2.5; padding: 0 16px; width: 100%; - span:not([class*="menu__status"]) { + span:not([class*="menu__status"]), + span:not([class*="listbox__status"]) { .truncate; } @@ -77,6 +86,12 @@ button.fake-menu__item { &:active { font-weight: bold; + + .menu__status, + .listbox__status, + .fake-menu__status { + color: @ds6-color-g204-gray; + } } &:not(:last-child) { @@ -84,8 +99,10 @@ button.fake-menu__item { } } -div.menu__item[role^="menuitem"][aria-checked="true"] { - .menu__status { +div.menu__item[role^="menuitem"][aria-checked="true"], +div.listbox__option[role^="option"][aria-selected="true"] { + .menu__status, + .listbox__status { visibility: visible; } } @@ -107,7 +124,7 @@ a.fake-menu__item { // button tag specific button.fake-menu__item { - background-color: white; + background-color: @ds6-color-g201-gray; border: 0; color: @ds6-color-g206-gray; display: block; @@ -115,6 +132,7 @@ button.fake-menu__item { } .menu__status, +.listbox__status, .fake-menu__status { align-self: center; color: @ds6-color-g206-gray; @@ -127,6 +145,7 @@ button.fake-menu__item { } span.menu__status, +span.listbox__status, span.fake-menu__status { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%277%27%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23111820%22%20d%3D%22M0%203.70913219%202.21049749%206%208%200%22%3E%3C/path%3E%3C/svg%3E'); background-position: right center; @@ -141,14 +160,16 @@ span.fake-menu__status { .menu__items--grow[role="menu"], .menu__items--grow-reverse[role="menu"], +.listbox__options--grow[role="listbox"], +.listbox__options--grow-reverse[role="listbox"], .fake-menu__items--grow, .fake-menu__items--grow-reverse { min-width: calc(100%); width: auto; - max-width: calc(100% + 50%); } .menu__items--grow-reverse[role="menu"], +.listbox__options--grow-reverse[role="listbox"], .fake-menu__items--grow-reverse { right: 0; } diff --git a/src/less/dropdown/ds6/dropdown.less b/src/less/dropdown/ds6/dropdown.less new file mode 100644 index 000000000..c052e2cb2 --- /dev/null +++ b/src/less/dropdown/ds6/dropdown.less @@ -0,0 +1,9 @@ +@import "../../less/ds6/variables.less"; +@import "../../less/ds6/mixins.less"; + +@import "dropdown-base.less"; + +// extra listbox-only and menu-only styles (not captured in dropdown.css) +// would go in the following locations, when applicable +// @import "../../listbox/ds6/listbox.less"; +// @import "../../menu/ds6/menu.less"; diff --git a/src/less/menu/ds6/menu.less b/src/less/menu/ds6/menu.less deleted file mode 100644 index 1b9dbaead..000000000 --- a/src/less/menu/ds6/menu.less +++ /dev/null @@ -1,4 +0,0 @@ -@import "../../less/ds6/variables.less"; -@import "../../less/ds6/mixins.less"; - -@import "menu-base.less"; From 04502498d64b3a9ee64a9674e8480b3aab9ab09f Mon Sep 17 00:00:00 2001 From: Sean Gates Date: Mon, 5 Feb 2018 12:15:45 -0600 Subject: [PATCH 2/7] Accessible listbox (#52) Closes #38 --- dist/button/ds6/button.css | 2 + dist/dropdown/ds6/dropdown.css | 65 +++++++ dist/listbox/ds6/listbox.css | 65 +++++++ docs/_includes/ds6/listbox.html | 237 ++++++------------------- docs/src/js/ds6/main.js | 22 ++- docs/src/less/ds6/index.less | 15 ++ docs/static/ds4/docs.js | 10 +- docs/static/ds6/docs.css | 2 +- docs/static/ds6/docs.js | 20 +-- docs/static/ds6/skin.css | 67 +++++++ package.json | 2 +- src/less/button/ds6/button-base.less | 1 + src/less/dropdown/ds6/dropdown.less | 2 +- src/less/listbox/ds6/listbox-base.less | 80 +++++++++ src/less/listbox/ds6/listbox.less | 5 + yarn.lock | 6 +- 16 files changed, 390 insertions(+), 211 deletions(-) create mode 100644 dist/listbox/ds6/listbox.css create mode 100644 src/less/listbox/ds6/listbox-base.less create mode 100644 src/less/listbox/ds6/listbox.less diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css index 7ce22c322..cf38df62e 100644 --- a/dist/button/ds6/button.css +++ b/dist/button/ds6/button.css @@ -254,6 +254,8 @@ span.expand-btn__icon { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position-y: center; + -ms-flex-negative: 0; + flex-shrink: 0; height: 100%; margin-left: 8px; width: 8px; diff --git a/dist/dropdown/ds6/dropdown.css b/dist/dropdown/ds6/dropdown.css index 887036a6f..6bae612e1 100644 --- a/dist/dropdown/ds6/dropdown.css +++ b/dist/dropdown/ds6/dropdown.css @@ -179,3 +179,68 @@ span.fake-menu__status { .fake-menu__items--grow-reverse { right: 0; } +.listbox { + display: inline-block; + box-sizing: border-box; + width: 100%; +} +.listbox:hover > .listbox__control > input { + border-color: #4295ff; +} +.listbox__control > input { + background-color: #ffffff; + border: 1px solid #c7c7c7; + box-sizing: border-box; + color: transparent; + cursor: default; + font-family: inherit; + font-size: 16px; + height: 40px; + padding: 0 16px; + text-shadow: 0 0 0 #006efc; + vertical-align: middle; + width: 100%; +} +.listbox__control > input:focus { + border-color: #4295ff; +} +.listbox__control > input[disabled], +.listbox__control > input[aria-disabled="true"] { + border-color: #c7c7c7; + color: transparent; + text-shadow: 0 0 0 #c7c7c7; +} +.listbox__control > input[aria-expanded="true"] { + border-bottom: 0; + padding-bottom: 1px; +} +.listbox__control > input::-moz-selection { + background: #ffffff; +} +.listbox__control > input::selection { + background: #ffffff; +} +.listbox__control + div.listbox__options { + display: none; + position: absolute; + z-index: 1; +} +.listbox__control--expanded + div.listbox__options { + display: block; +} +span.listbox__arrow { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: right center; + content: ""; + height: 40px; + margin-left: 8px; + position: absolute; + right: 16px; + top: 0; + width: 8px; +} +.listbox__control--expanded span.listbox__arrow { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} diff --git a/dist/listbox/ds6/listbox.css b/dist/listbox/ds6/listbox.css new file mode 100644 index 000000000..662355bcf --- /dev/null +++ b/dist/listbox/ds6/listbox.css @@ -0,0 +1,65 @@ +.listbox { + display: inline-block; + box-sizing: border-box; + width: 100%; +} +.listbox:hover > .listbox__control > input { + border-color: #4295ff; +} +.listbox__control > input { + background-color: #ffffff; + border: 1px solid #c7c7c7; + box-sizing: border-box; + color: transparent; + cursor: default; + font-family: inherit; + font-size: 16px; + height: 40px; + padding: 0 16px; + text-shadow: 0 0 0 #006efc; + vertical-align: middle; + width: 100%; +} +.listbox__control > input:focus { + border-color: #4295ff; +} +.listbox__control > input[disabled], +.listbox__control > input[aria-disabled="true"] { + border-color: #c7c7c7; + color: transparent; + text-shadow: 0 0 0 #c7c7c7; +} +.listbox__control > input[aria-expanded="true"] { + border-bottom: 0; + padding-bottom: 1px; +} +.listbox__control > input::-moz-selection { + background: #ffffff; +} +.listbox__control > input::selection { + background: #ffffff; +} +.listbox__control + div.listbox__options { + display: none; + position: absolute; + z-index: 1; +} +.listbox__control--expanded + div.listbox__options { + display: block; +} +span.listbox__arrow { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: right center; + content: ""; + height: 40px; + margin-left: 8px; + position: absolute; + right: 16px; + top: 0; + width: 8px; +} +.listbox__control--expanded span.listbox__arrow { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} diff --git a/docs/_includes/ds6/listbox.html b/docs/_includes/ds6/listbox.html index 0ff90507e..d45328022 100644 --- a/docs/_includes/ds6/listbox.html +++ b/docs/_includes/ds6/listbox.html @@ -1,250 +1,121 @@ -

    @ebay/skin/listbox

    -

    The Skin listbox is intended for use as a custom view (or facade) for the native HTML select element. JavaScript will be required to create a 2-way binding between the two.

    +

    The Skin listbox is intended for use as a custom view (or facade) for the native HTML select element. JavaScript will be required to create 2-way binding between the two.

    +

    Note: Because the listbox uses an input element, which must grow to properly display it's contents, we have chosen to have the listbox always remain fluid. It is up to the developer to contain the width, if necessary. Extra care will be needed when placing a listbox side-by-side with other controls such as buttons and textboxes.

    + +

    Default Listbox

    +

    By default, the first item should be selected if the user does not specify a selection. This matches the behavior of a native HTML select element.

    -
    +
    - -
    -
    - Item 1 + + + + +
    +
    + Option 1
    - Item 2 + Option 2
    - Item 3 + Option 3
    {% highlight html %} - -
    -
    - Item 1 + + + + +
    +
    + Option 1
    - Item 2 + Option 2
    - Item 3 + Option 3
    {% endhighlight %}
    -

    Selected Listbox Option

    +

    Selected Listbox

    -
    +
    - -
    + + + + +
    - Item 1 + Option 1
    - Item 2 + Option 2
    - Item 3 + Option 3
    - -
    - {% highlight html %} - - -
    -
    - Item 1 - -
    -
    - Item 2 - -
    -
    - Item 3 - -
    -
    - -     - {% endhighlight %} -
    - -

    Multiple Selected Listbox Options

    -
    -
    - - -
    -
    - Item 1 - -
    -
    - Item 2 - -
    -
    - Item 3 - -
    -
    -
    {% highlight html %} - -
    + + + + +
    - Item 1 + Option 1
    - Item 2 - -
    -
    - Item 3 - -
    -
    - - - {% endhighlight %} -
    - -

    Growth Listbox

    -
    -
    - - -
    -
    - Item 1 - -
    -
    - Item 2 is really long compared to the others - -
    -
    - Item 3 - -
    -
    - -     -
    - {% highlight html %} - - -
    -
    - Item 1 - -
    -
    - Item 2 is really long compared to the others + Option 2
    - Item 3 + Option 3
    {% endhighlight %} diff --git a/docs/src/js/ds6/main.js b/docs/src/js/ds6/main.js index 455723ec3..683b2d610 100644 --- a/docs/src/js/ds6/main.js +++ b/docs/src/js/ds6/main.js @@ -54,30 +54,38 @@ nodeListToArray(document.querySelectorAll('[role^=menuitem]')).forEach(function( scrollKeyPreventer.add(el); }); -// roving tab index logic on menu items container +// roving tab index logic on listbox options container nodeListToArray(document.querySelectorAll('[role=listbox]')).forEach(function(el, i) { var widget = Rover.createLinear(el, '[role^=option]', {autoReset: 0}); }); -// aria expanded logic on menu button and overlay -// escape key logic on menu (closes menu) +// aria expanded logic on listbox input and overlay +// escape key logic on listbox (closes listbox) nodeListToArray(document.querySelectorAll('.listbox')).forEach(function(el, i) { var widget = new Expander(el, { autoCollapse: true, click: true, focusManagement: 'interactive', - hostSelector: '.expand-btn', - contentSelector: '.listbox__options' + hostSelector: '.listbox__control > input', + hostContainerClass: 'listbox__control', + contentSelector: '.listbox__options', + spacebar: true }); keyEmitter.addKeyDown(el); el.addEventListener('escapeKeyDown', function() { - this.querySelector('.expand-btn').focus(); + widget.collapse(); + this.querySelector('.listbox__control > input').focus(); }); }); -// prevent scroll keys logic on menu items +// prevent scroll keys logic on the listbox button +nodeListToArray(document.querySelectorAll('.listbox__control > input')).forEach(function (el, i) { + scrollKeyPreventer.add(el); +}); + +// prevent scroll keys logic on listbox options nodeListToArray(document.querySelectorAll('[role^=option]')).forEach(function(el, i) { scrollKeyPreventer.add(el); }); diff --git a/docs/src/less/ds6/index.less b/docs/src/less/ds6/index.less index 77f22e12b..cb23b3730 100644 --- a/docs/src/less/ds6/index.less +++ b/docs/src/less/ds6/index.less @@ -23,6 +23,21 @@ h2 { margin-top: 32px; } +.note { + background-color: @ds6-color-g201-gray; + border: 2px solid @ds6-color-g203-gray; + padding: 1rem; + margin: 0 .5rem 1rem; + + p { + margin: 0 0 1rem; + + &:last-child { + margin-bottom: 0; + } + } +} + .demo { background-color: @ds6-color-background-default; border: 1px solid @ds6-color-g202-gray; diff --git a/docs/static/ds4/docs.js b/docs/static/ds4/docs.js index 54fa7bc0b..2d7a68cc7 100644 --- a/docs/static/ds4/docs.js +++ b/docs/static/ds4/docs.js @@ -37,10 +37,10 @@ $_mod.installed("jquery-prevent-scroll-keys$1.0.1","jquery","3.2.1"); !function(e,n,o,t){e.fn.preventScrollKeys=function(n){return this.each(function(){e(this).on("keydown",n,function(e){(e.keyCode>=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()})})}}(jQuery,window,document); !function(i,n,t,e){i.fn.rovingTabindex=function(n,t){return t=i.extend({activeIndex:0,autoFocus:!0,autoInit:!0,autoReset:!1,autoWrap:!1,axis:"both",disableHomeAndEndKeys:!1,isGrid:!1,setFocusDelay:0},t),this.each(function(){var e=i(this),a=e.find(n),o=function(i,n){i.removeAttr("tabindex"),n.attr("tabindex","0")},r=function(){a=e.find(n),!0===t.isGrid?e.trigger("gridNavigationItemsChange"):e.trigger("linearNavigationItemsChange")},g=function(i,n){var e=n.fromIndex,r=n.toIndex,g=a.eq(e),d=a.eq(r);o(g,d),"linearNavigationInit"!==i.type&&"gridNavigationInit"!==i.type&&(!0===t.autoFocus&&setTimeout(function(){a.eq(r).focus()},t.setFocusDelay),d.trigger("rovingTabindexChange",{fromIndex:e,toIndex:r}))};!0===t.isGrid?e.gridNavigation(n,t):e.linearNavigation(n,t),e.preventScrollKeys(n),e.on("linearNavigationInit gridNavigationInit linearNavigationChange gridNavigationChange",g),e.on("domChange",r)})}}(jQuery,window,document); !function(e,t,o,r){function n(){for(var e={},t=65;t<=90;t++)e[t]=String.fromCharCode(t);return e}e.fn.menu=function(t){return t=e.extend({autoWrap:!1,buttonSelector:"button",debug:!1,disableShortcutKey:!1,overlaySelector:"[role=menu]"},t),this.each(function(){var o=t.buttonSelector,r=t.overlaySelector,a=e(this),i=a.find(o),u=a.find(r),c=u.find("[role^=menuitem]"),d=(u.find("[role=menuitem]"),u.find("[role=menuitemcheckbox]"),u.find("[role=menuitemradio]")),l=(c.first(),n()),m=!t.disableShortcutKey,s={},f=function(){setTimeout(function(){i.attr("aria-expanded","false"),i.focus()},50)},p=f;m&&c.each(function(t){var o=e(this).text()[0];s[o]||(s[o]=t)}),a.nextId("menu"),a.clickFlyout({autoCollapse:!0,debug:t.debug,triggerSelector:o,focusManagement:"first",overlaySelector:r}),u.rovingTabindex("[role^=menuitem]",{axis:"y",autoReset:!0,autoWrap:t.autoWrap,debug:t.debug}),u.prop("id",a.prop("id")+"-menu"),i.attr("aria-haspopup","true").prop("id",a.prop("id")+"-button"),a.on("click enterKeyDown spaceKeyDown","[role^=menuitem]",function(t){var o=e(this),r=o.attr("role");switch(t.stopPropagation(),r){case"menuitemradio":d.attr("aria-checked","false"),o.attr("aria-checked","true");break;case"menuitemcheckbox":o.attr("aria-checked","true"===o.attr("aria-checked")?"false":"true")}setTimeout(function(){o.trigger("menuSelect"),f()},100)}),a.on("escapeKeyDown","[role^=menuitem]",p),m&&(c.attr("tabindex","-1"),a.on("keydown","[role^=menuitem]",function(e){var t=l[e.keyCode],o=s[t];void 0!==o&&c.get(o).focus()})),a.addClass("menu--js")})}}(jQuery); -$_mod.installed("jquery-skip-to$0.0.1","jquery","3.2.1"); -!function(n,t,i,o){n.fn.skipTo=function(){return this.each(function(){var i=n(this),o=i.find("a"),e=o.attr("href"),u=n(e);o.on("click",function(n){u.attr("tabindex","-1"),t.setTimeout(function(n){u.focus()},5),u.one("blur",function(n){u.removeAttr("tabindex")})})})}}(jQuery,window,document); -$_mod.installed("jquery-tabs$0.5.0","jquery","3.2.1"); +$_mod.installed("jquery-skip-to$0.0.2","jquery","3.2.1"); +!function(n,t,i,o){n.fn.skipTo=function(){return this.each(function(){var i=n(this),o=i.find("a"),e=o.attr("href"),u=n(e);o.on("click",function(){u.attr("tabindex","-1"),t.setTimeout(function(){u.focus()},5),u.one("blur",function(){u.removeAttr("tabindex")})})})}}(jQuery,window,document); +$_mod.installed("jquery-tabs$0.5.1","jquery","3.2.1"); !function(t){t.fn.tabs=function(a){return a=t.extend({},a),this.each(function(){var e=t(this),r=e.find(".tabs__items"),i=r.find(".tabs__item"),n=r.find("a"),d=e.find(".tabs__content"),l=d.find(".tabs__panel");e.nextId("tabs"),r.attr("role","tablist"),i.attr("role","tab").attr("aria-selected","false").first().attr("aria-selected","true"),l.attr("role","tabpanel").prop("hidden",!0).first().prop("hidden",!1),n.attr("role","presentation").removeAttr("href"),!0===a.livePanels&&d.attr("aria-live","polite"),i.each(function(a,r){var i=t(r),n=e.attr("id")+"-tab-"+a,d=e.attr("id")+"-panel-"+a;i.attr("id",n).attr("aria-controls",d),l.eq(a).attr("id",d).attr("aria-labelledby",n)}),r.rovingTabindex("[role=tab]",{autoWrap:!0,disableHomeAndEndKeys:!0}),r.on("rovingTabindexChange","[role=tab]",function(a,e){var i=t(this),n=r.find("[aria-selected=true]"),l=d.find("[aria-labelledby={0}]".replace("{0}",n.attr("id"))),s=d.find("[aria-labelledby={0}]".replace("{0}",i.attr("id")));i[0]!==n[0]&&(l.prop("hidden",!0),s.prop("hidden",!1),i.attr("aria-selected","true"),setTimeout(function(){n.attr("aria-selected","false"),i.trigger("tabsSelect",e)},0))}),e.addClass("tabs--js")})}}(jQuery); -$_mod.installed("jquery-tooltip$0.2.0","jquery","3.2.1"); -!function(e){e.fn.tooltip=function(t){return t=e.extend({overlaySelector:".tooltip__overlay, [role=tooltip]",triggerSelector:".tooltip__trigger, [aria-describedby]"},t),this.each(function(){var o=e(this),r=(o.find(t.triggerSelector),{expandedClass:"tooltip--expanded",triggerSelector:t.triggerSelector,overlaySelector:t.overlaySelector});o.hoverFlyout(r).focusFlyout(r),o.addClass("tooltip--js")})}}(jQuery); +$_mod.installed("jquery-tooltip$0.2.1","jquery","3.2.1"); +!function(e){e.fn.tooltip=function(t){return t=e.extend({overlaySelector:".tooltip__overlay, [role=tooltip]",triggerSelector:".tooltip__trigger, [aria-describedby]"},t),this.each(function(){var o=e(this),r={expandedClass:"tooltip--expanded",triggerSelector:t.triggerSelector,overlaySelector:t.overlaySelector};o.hoverFlyout(r).focusFlyout(r),o.addClass("tooltip--js")})}}(jQuery); $("#header-large .grid__cell").skipTo(),$(".dialog-button").dialogButton(),$(".fake-menu").clickFlyout({closeOnEsc:!0,focusManagement:"first",triggerSelector:".expand-btn",overlaySelector:".fake-menu__items"}),$(".menu").menu(),$(".tabs, .hijax-tabs").tabs(),$(".tooltip").tooltip(),$(".bubblehelp").clickFlyout({triggerSelector:".bubblehelp__host",overlaySelector:".bubblehelp__overlay",autoCollapse:!1}),$("#banner-menu").on("click","a",function(e){var t=document.querySelector(this.href.substring(this.href.indexOf("#")));t.setAttribute("tabindex","-1"),t.focus()}),$(".expand-btn-example").on("click",function(){$(this).attr("aria-expanded","true"===$(this).attr("aria-expanded")?"false":"true")}); \ No newline at end of file diff --git a/docs/static/ds6/docs.css b/docs/static/ds6/docs.css index d39b9a0e4..d4cff6f00 100644 --- a/docs/static/ds6/docs.css +++ b/docs/static/ds6/docs.css @@ -1,2 +1,2 @@ -[hidden]{display:none}body{background-color:white}ul{list-style:none;margin:0;padding:0}h1,h2,h3,h4{color:#111820}h2{margin-top:32px}.demo{background-color:#f5f5f5;border:1px solid #f5f5f5}.demo__inner{margin:8px}.demo-typography,.demo-colors{list-style-type:none;margin:0;padding:0}.demo-typography li,.demo-colors li{margin:16px}.demo-colors li::before{content:'';display:inline-block;height:20px;margin-right:16px;vertical-align:middle;width:150px}.demo-color-g201-gray::before{background-color:#fff;outline:1px solid #c7c7c7}.demo-color-g202-gray::before{background-color:#f5f5f5;outline:1px solid #c7c7c7}.demo-color-g203-gray::before{background-color:#e5e5e5}.demo-color-g204-gray::before{background-color:#c7c7c7}.demo-color-g205-gray::before{background-color:#767676}.demo-color-g206-gray::before{background-color:#111820}.demo-color-p001-blue::before{background-color:#e1fbff}.demo-cta-p002-blue,.demo-color-p002-blue::before{background-color:#006efc}.demo-color-p003-blue::before{background-color:#10299c}.demo-color-p004-blue::before{background-color:#4295ff}.demo-color-p011-red::before{background-color:#ffe7ec}.demo-cta-p012-red,.demo-color-p012-red::before{background-color:#ff5151}.demo-color-p013-red::before{background-color:#c9002c}.demo-color-p021-yellow::before{background-color:#fffaab}.demo-color-p022-yellow::before{background-color:#ffd80d}.demo-color-p031-green::before{background-color:#ebffcc}.demo-color-p032-green::before{background-color:#71c63e}.demo-color-p033-green::before{background-color:#147133}.demo-color-text-default::before{background-color:#111820}.demo-color-text-secondary::before{background-color:#767676}.demo-color-link-default::before{background-color:#006efc}.demo-color-link-visited::before{background-color:#6a4fcc}.demo-color-information-background::before{background-color:#e1fbff}.demo-color-badge::before{background-color:#ffd80d}.demo-color-star::before{background-color:#ffd80d}.demo-color-warning-background::before{background-color:#fffaab}.demo-color-confirmation-text::before{background-color:#147133}.demo-color-confirmation-background::before{background-color:#71c63e}.demo-color-critical-text::before{background-color:#c9002c}.demo-color-critical-background::before{background-color:#ffe7ec}.demo-color-background-default::before{background-color:#f5f5f5;outline:1px solid #c7c7c7}.demo-cta-purple{background-color:#6a4fcc}.demo-font-family-default{font-family:"Helvetica Neue",Helvetica,Arial,Roboto,sans-serif}.demo-link-default:visited{color:#006efc}.demo-link-visited{color:#6a4fcc}.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}figure.highlight{box-sizing:border-box;margin:0;width:100%}figure.highlight pre{font-family:monospace,monospace;font-size:1em;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:#f00}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o + .nt,.css .nt + .nt{color:#999} +[hidden]{display:none}body{background-color:white}ul{list-style:none;margin:0;padding:0}h1,h2,h3,h4{color:#111820}h2{margin-top:32px}.note{background-color:#fff;border:2px solid #e5e5e5;padding:1rem;margin:0 .5rem 1rem}.note p{margin:0 0 1rem}.note p:last-child{margin-bottom:0}.demo{background-color:#f5f5f5;border:1px solid #f5f5f5}.demo__inner{margin:8px}.demo-typography,.demo-colors{list-style-type:none;margin:0;padding:0}.demo-typography li,.demo-colors li{margin:16px}.demo-colors li::before{content:'';display:inline-block;height:20px;margin-right:16px;vertical-align:middle;width:150px}.demo-color-g201-gray::before{background-color:#fff;outline:1px solid #c7c7c7}.demo-color-g202-gray::before{background-color:#f5f5f5;outline:1px solid #c7c7c7}.demo-color-g203-gray::before{background-color:#e5e5e5}.demo-color-g204-gray::before{background-color:#c7c7c7}.demo-color-g205-gray::before{background-color:#767676}.demo-color-g206-gray::before{background-color:#111820}.demo-color-p001-blue::before{background-color:#e1fbff}.demo-cta-p002-blue,.demo-color-p002-blue::before{background-color:#006efc}.demo-color-p003-blue::before{background-color:#10299c}.demo-color-p004-blue::before{background-color:#4295ff}.demo-color-p011-red::before{background-color:#ffe7ec}.demo-cta-p012-red,.demo-color-p012-red::before{background-color:#ff5151}.demo-color-p013-red::before{background-color:#c9002c}.demo-color-p021-yellow::before{background-color:#fffaab}.demo-color-p022-yellow::before{background-color:#ffd80d}.demo-color-p031-green::before{background-color:#ebffcc}.demo-color-p032-green::before{background-color:#71c63e}.demo-color-p033-green::before{background-color:#147133}.demo-color-text-default::before{background-color:#111820}.demo-color-text-secondary::before{background-color:#767676}.demo-color-link-default::before{background-color:#006efc}.demo-color-link-visited::before{background-color:#6a4fcc}.demo-color-information-background::before{background-color:#e1fbff}.demo-color-badge::before{background-color:#ffd80d}.demo-color-star::before{background-color:#ffd80d}.demo-color-warning-background::before{background-color:#fffaab}.demo-color-confirmation-text::before{background-color:#147133}.demo-color-confirmation-background::before{background-color:#71c63e}.demo-color-critical-text::before{background-color:#c9002c}.demo-color-critical-background::before{background-color:#ffe7ec}.demo-color-background-default::before{background-color:#f5f5f5;outline:1px solid #c7c7c7}.demo-cta-purple{background-color:#6a4fcc}.demo-font-family-default{font-family:"Helvetica Neue",Helvetica,Arial,Roboto,sans-serif}.demo-link-default:visited{color:#006efc}.demo-link-visited{color:#6a4fcc}.highlight{background-color:#eee;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}figure.highlight{box-sizing:border-box;margin:0;width:100%}figure.highlight pre{font-family:monospace,monospace;font-size:1em;margin:0;padding:8px 8px 0}figure.highlight code{white-space:pre-wrap}.highlight .hll{background-color:#ffc}.highlight .c{color:#999}.highlight .err{color:#a00;background-color:#faa}.highlight .k{color:#069}.highlight .o{color:#555}.highlight .cm{color:#09f;font-style:italic}.highlight .cp{color:#099}.highlight .c1{color:#999}.highlight .cs{color:#999}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gr{color:#f00}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gu{color:#030}.highlight .gt{color:#9c6}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#f60}.highlight .s{color:#d44950}.highlight .na{color:#4f9fcf}.highlight .nb{color:#366}.highlight .nc{color:#0a8}.highlight .no{color:#360}.highlight .nd{color:#99f}.highlight .ni{color:#999}.highlight .ne{color:#c00}.highlight .nf{color:#c0f}.highlight .nl{color:#99f}.highlight .nn{color:#0cf}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .ow{color:#000}.highlight .w{color:#bbb}.highlight .mf{color:#f60}.highlight .mh{color:#f60}.highlight .mi{color:#f60}.highlight .mo{color:#f60}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{color:#c30;font-style:italic}.highlight .s2{color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sx{color:#c30}.highlight .sr{color:#3aa}.highlight .s1{color:#c30}.highlight .ss{color:#fc3}.highlight .bp{color:#366}.highlight .vc{color:#033}.highlight .vg{color:#033}.highlight .vi{color:#033}.highlight .il{color:#f60}.css .o,.css .o + .nt,.css .nt + .nt{color:#999} diff --git a/docs/static/ds6/docs.js b/docs/static/ds6/docs.js index a97c882d0..d519d8fbc 100644 --- a/docs/static/ds6/docs.js +++ b/docs/static/ds6/docs.js @@ -1,22 +1,22 @@ !function(){function r(r,n){var t=new Error('Cannot find module "'+r+'"'+(n?' from "'+n+'"':""));return t.code="MODULE_NOT_FOUND",t}function n(r){this.id=this.filename=r,this.loaded=!1,this.exports=void 0}function t(r,n,t){var i=t&&t.globals;if(O[r]=n,i)for(var e=b||global,o=0;o2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e1&&void 0!==arguments[1]?arguments[1]:"nid",d=""===t?"nid":t;o[d]=o[d]||0,i.id||i.setAttribute("id",d+"-"+o[d]++)}}); -$_mod.installed("makeup-expander$0.1.0","makeup-exit-emitter","0.0.3"); +$_mod.installed("makeup-expander$0.3.0","makeup-exit-emitter","0.0.3"); $_mod.main("/makeup-exit-emitter$0.0.3",""); $_mod.installed("makeup-exit-emitter$0.0.3","custom-event-polyfill","0.3.0"); $_mod.installed("makeup-exit-emitter$0.0.3","makeup-next-id","0.0.1"); $_mod.def("/makeup-exit-emitter$0.0.3/index",function(e,n,t,i,o){"use strict";function s(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function r(e,n,t){e.dispatchEvent(new CustomEvent("focusExit",{detail:{fromElement:n,toElement:t},bubbles:!1}))}function u(e){var n=e.target;!0===this.el.contains(n)?this.currentFocusElement=n:(window.removeEventListener("blur",this.onWindowBlurListener),document.removeEventListener("focusin",this.onDocumentFocusInListener),r(this.el,this.currentFocusElement,n),this.currentFocusElement=null)}function c(){r(this.el,this.currentFocusElement,void 0)}function l(){document.addEventListener("focusin",this.onDocumentFocusInListener),window.addEventListener("blur",this.onWindowBlurListener)}function d(e){var n=null;return h(e),v[e.id]||(n=new f(e),v[e.id]=n),n}function m(e){var n=v[e.id];n&&(n.removeEventListeners(),delete v[e.id])}var a=function(){function e(e,n){for(var t=0;t1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(o));return!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); -$_mod.def("/makeup-expander$0.1.0/index",function(e,t,s,i,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(){this.keyDownFlag=!0}var r=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(a));return n=n.filter(function(e){return"none"!==window.getComputedStyle(e).display}),!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); +$_mod.def("/makeup-expander$0.3.0/index",function(t,e,s,i,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function h(t){var e=t.keyCode;13!==e&&32!==e||(this.keyDownFlag=!0,32===e&&!0===this.options.spacebar&&this.hostEl.click())}var a=Object.assign||function(t){for(var e=1;e=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()}function i(e){e.addEventListener("keydown",r)}function k(e){e.removeEventListener("keydown",r)}o.exports={add:i,remove:k}}); -$_mod.def("/@ebay/skin$3.2.0/docs/src/js/ds6/main",function(e,t,n,o,c){function r(e){return Array.prototype.slice.call(e)}var a=e("/makeup-expander$0.1.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),u=e("/makeup-key-emitter$0.0.2/index"),l=e("/makeup-prevent-scroll-keys$0.0.1/index");r(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),r(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),r(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),r(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});u.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){l.add(e)}),r(document.querySelectorAll("[role=listbox]")).forEach(function(e,t){i.createLinear(e,"[role^=option]",{autoReset:0})}),r(document.querySelectorAll(".listbox")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".listbox__options"});u.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=option]")).forEach(function(e,t){l.add(e)})}); +$_mod.def("/@ebay/skin$3.2.0/docs/src/js/ds6/main",function(e,t,n,o,c){function r(e){return Array.prototype.slice.call(e)}var a=e("/makeup-expander$0.3.0/index"),l=e("/makeup-roving-tabindex$0.0.3/index"),i=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");r(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),r(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),r(document.querySelectorAll("[role=menu]")).forEach(function(e,t){l.createLinear(e,"[role^=menuitem]",{autoReset:0})}),r(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role=listbox]")).forEach(function(e,t){l.createLinear(e,"[role^=option]",{autoReset:0})}),r(document.querySelectorAll(".listbox")).forEach(function(e,t){var n=new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".listbox__control > input",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){n.collapse(),this.querySelector(".listbox__control > input").focus()})}),r(document.querySelectorAll(".listbox__control > input")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role^=option]")).forEach(function(e,t){u.add(e)})}); $_mod.run("/@ebay/skin$3.2.0/docs/src/js/ds6/main"); \ No newline at end of file diff --git a/docs/static/ds6/skin.css b/docs/static/ds6/skin.css index da1447233..d05268cbb 100644 --- a/docs/static/ds6/skin.css +++ b/docs/static/ds6/skin.css @@ -295,6 +295,8 @@ span.expand-btn__icon { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position-y: center; + -ms-flex-negative: 0; + flex-shrink: 0; height: 100%; margin-left: 8px; width: 8px; @@ -529,6 +531,71 @@ span.fake-menu__status { .fake-menu__items--grow-reverse { right: 0; } +.listbox { + display: inline-block; + box-sizing: border-box; + width: 100%; +} +.listbox:hover > .listbox__control > input { + border-color: #4295ff; +} +.listbox__control > input { + background-color: #ffffff; + border: 1px solid #c7c7c7; + box-sizing: border-box; + color: transparent; + cursor: default; + font-family: inherit; + font-size: 16px; + height: 40px; + padding: 0 16px; + text-shadow: 0 0 0 #006efc; + vertical-align: middle; + width: 100%; +} +.listbox__control > input:focus { + border-color: #4295ff; +} +.listbox__control > input[disabled], +.listbox__control > input[aria-disabled="true"] { + border-color: #c7c7c7; + color: transparent; + text-shadow: 0 0 0 #c7c7c7; +} +.listbox__control > input[aria-expanded="true"] { + border-bottom: 0; + padding-bottom: 1px; +} +.listbox__control > input::-moz-selection { + background: #ffffff; +} +.listbox__control > input::selection { + background: #ffffff; +} +.listbox__control + div.listbox__options { + display: none; + position: absolute; + z-index: 1; +} +.listbox__control--expanded + div.listbox__options { + display: block; +} +span.listbox__arrow { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: right center; + content: ""; + height: 40px; + margin-left: 8px; + position: absolute; + right: 16px; + top: 0; + width: 8px; +} +.listbox__control--expanded span.listbox__arrow { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} .clearfix::before, .clearfix::after { display: table; diff --git a/package.json b/package.json index e7ea8082d..e4cd9cda8 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "less-plugin-autoprefix": "^1", "less-plugin-clean-css": "^1", "lesshint": "^4", - "makeup-expander": "~0.2", + "makeup-expander": "~0.3", "makeup-jquery": "~0.0", "makeup-key-emitter": "~0.0", "makeup-prevent-scroll-keys": "~0.0", diff --git a/src/less/button/ds6/button-base.less b/src/less/button/ds6/button-base.less index 9f51f5cbf..adee23d58 100644 --- a/src/less/button/ds6/button-base.less +++ b/src/less/button/ds6/button-base.less @@ -303,6 +303,7 @@ span.expand-btn__icon { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); background-repeat: no-repeat; background-position-y: center; + flex-shrink: 0; height: 100%; margin-left: 8px; width: 8px; diff --git a/src/less/dropdown/ds6/dropdown.less b/src/less/dropdown/ds6/dropdown.less index c052e2cb2..ab6d4f6a8 100644 --- a/src/less/dropdown/ds6/dropdown.less +++ b/src/less/dropdown/ds6/dropdown.less @@ -2,8 +2,8 @@ @import "../../less/ds6/mixins.less"; @import "dropdown-base.less"; +@import "../../listbox/ds6/listbox.less"; // extra listbox-only and menu-only styles (not captured in dropdown.css) // would go in the following locations, when applicable -// @import "../../listbox/ds6/listbox.less"; // @import "../../menu/ds6/menu.less"; diff --git a/src/less/listbox/ds6/listbox-base.less b/src/less/listbox/ds6/listbox-base.less new file mode 100644 index 000000000..9cbca417a --- /dev/null +++ b/src/less/listbox/ds6/listbox-base.less @@ -0,0 +1,80 @@ +@listbox-height: 40px; + +.listbox { + display: inline-block; + box-sizing: border-box; + width: 100%; + + &:hover > .listbox__control > input { + border-color: @ds6-color-p004-blue; + } +} + +.listbox__control > input { + background-color: @ds6-color-g201-gray; + border: 1px solid @ds6-color-g204-gray; + box-sizing: border-box; + // fixes the cursor in firefox 1 of 2 + color: transparent; + cursor: default; + font-family: inherit; + font-size: 16px; + height: @listbox-height; + padding: 0 16px; + // fixes the cursor in firefox 2 of 2 + text-shadow: 0 0 0 @ds6-color-p002-blue; + vertical-align: middle; + width: 100%; + + &:focus { + border-color: @ds6-color-p004-blue; + } + + &[disabled], + &[aria-disabled="true"] { + border-color: @ds6-color-disabled; + // fixes the cursor in firefox + color: transparent; + text-shadow: 0 0 0 @ds6-color-disabled; + } + + &[aria-expanded="true"] { + border-bottom: 0; + padding-bottom: 1px; // fix for movement when border is removed + } + + &::-moz-selection { + background: @ds6-color-g201-gray; + } + + &::selection { + background: @ds6-color-g201-gray; + } +} + +.listbox__control + div.listbox__options { + display: none; + position: absolute; + z-index: 1; +} + +.listbox__control--expanded + div.listbox__options { + display: block; +} + +span.listbox__arrow { + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: right center; + content: ""; + height: @listbox-height; + margin-left: 8px; + position: absolute; + right: 16px; + top: 0; + width: 8px; +} + +.listbox__control--expanded span.listbox__arrow { + transform: rotate(180deg); +} diff --git a/src/less/listbox/ds6/listbox.less b/src/less/listbox/ds6/listbox.less new file mode 100644 index 000000000..85742067e --- /dev/null +++ b/src/less/listbox/ds6/listbox.less @@ -0,0 +1,5 @@ +@import "../../less/ds6/variables.less"; +@import "../../less/ds6/mixins.less"; + +@import "listbox-base.less"; + diff --git a/yarn.lock b/yarn.lock index 0216d7453..de5174901 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3123,9 +3123,9 @@ makeup-exit-emitter@~0.0: custom-event-polyfill "~0.3" makeup-next-id "~0.0" -makeup-expander@~0.2: - version "0.2.1" - resolved "https://registry.yarnpkg.com/makeup-expander/-/makeup-expander-0.2.1.tgz#30dda96bfe8a74e8190af301247cc330acc1c2c0" +makeup-expander@~0.3: + version "0.3.0" + resolved "https://registry.yarnpkg.com/makeup-expander/-/makeup-expander-0.3.0.tgz#487f2286124af6f4e55fd1ba11198d52334d9d2d" dependencies: custom-event-polyfill "~0.3" makeup-exit-emitter "~0.0" From e092641053e8906d4bcafe7e1bde56bff4d6d128 Mon Sep 17 00:00:00 2001 From: Ian McBurnie Date: Mon, 5 Feb 2018 14:54:24 -0800 Subject: [PATCH 3/7] LESS: add new DS6 classes, mixins and variables for typography #39 (#53) --- dist/less/ds6/mixins.less | 80 +++++--------------- dist/less/ds6/variables.less | 25 +++--- dist/typography/ds6/typography.css | 30 ++++++++ docs/_includes/ds6/less.html | 21 ++--- docs/_includes/ds6/typography.html | 19 ++--- docs/ds6/index.html | 2 + docs/static/ds6/skin.css | 30 ++++++++ src/less/bundles/skin/ds6/skin.less | 3 +- src/less/less/ds6/mixins.less | 80 +++++--------------- src/less/less/ds6/variables.less | 25 +++--- src/less/typography/ds6/typography-base.less | 48 ++++-------- src/less/typography/ds6/typography.less | 2 +- 12 files changed, 150 insertions(+), 215 deletions(-) diff --git a/dist/less/ds6/mixins.less b/dist/less/ds6/mixins.less index 5dcb7f187..db15c5b23 100644 --- a/dist/less/ds6/mixins.less +++ b/dist/less/ds6/mixins.less @@ -3,79 +3,39 @@ // Typography //----------------------------- -.ds6-typography-headline-1() { - font-size: @ds6-font-size-headline-1; +.ds6-typography-giant-2() { + font-size: @ds6-font-size-giant-2; font-weight: @ds6-font-weight-bold; - line-height: 30px; + line-height: 46px; } -.ds6-typography-headline-2() { - font-size: @ds6-font-size-headline-2; +.ds6-typography-giant-1() { + font-size: @ds6-font-size-giant-1; font-weight: @ds6-font-weight-bold; - line-height: 28px; -} - -.ds6-typography-headline-3() { - font-size: @ds6-font-size-headline-3; - font-weight: @ds6-font-weight-regular; - line-height: 26px; -} - -.ds6-typography-title-1() { - font-size: @ds6-font-size-title-1; - font-weight: @ds6-font-weight-bold; - line-height: 24px; + line-height: 40px; } -.ds6-typography-title-2() { - font-size: @ds6-font-size-title-2; - font-weight: @ds6-font-weight-regular; - line-height: 20px; +.ds6-typography-large-2() { + font-size: @ds6-font-size-large-2; + line-height: 32px; } -.ds6-typography-title-3() { - font-size: @ds6-font-size-title-3; - font-weight: @ds6-font-weight-bold; - line-height: 18px; +.ds6-typography-large-1() { + font-size: @ds6-font-size-large-1; + line-height: 28px; } -.ds6-typography-title-4() { - font-size: @ds6-font-size-title-4; - font-weight: @ds6-font-weight-regular; - line-height: 16px; +.ds6-typography-medium() { + font-size: @ds6-font-size-medium; + line-height: 24px; } -.ds6-typography-body-1() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-body-1; - font-weight: @ds6-font-weight-regular; +.ds6-typography-regular() { + font-size: @ds6-font-size-regular; line-height: 20px; } -.ds6-typography-caption-1() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-caption-1; - font-weight: @ds6-font-weight-regular; - line-height: 15px; -} - -.ds6-typography-caption-2() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-caption-2; - font-weight: @ds6-font-weight-bold; - line-height: 14px; -} - -.ds6-typography-caption-3() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-caption-3; - font-weight: @ds6-font-weight-regular; - line-height: 14px; -} - -.ds6-typography-legal-1() { - color: @ds6-color-light; - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-legal-1; - font-weight: @ds6-font-weight-regular; +.ds6-typography-small() { + font-size: @ds6-font-size-small; + line-height: 18px; } diff --git a/dist/less/ds6/variables.less b/dist/less/ds6/variables.less index 619578f34..5818ce5e0 100644 --- a/dist/less/ds6/variables.less +++ b/dist/less/ds6/variables.less @@ -59,23 +59,16 @@ @ds6-font-size-24: 1.5rem; @ds6-font-size-26: 1.625rem; @ds6-font-size-28: 1.75rem; +@ds6-font-size-30: 1.8625rem; +@ds6-font-size-36: 2.25rem; -@ds6-font-size-headline-1: @ds6-font-size-28; -@ds6-font-size-headline-2: @ds6-font-size-26; -@ds6-font-size-headline-3: @ds6-font-size-24; - -@ds6-font-size-title-1: @ds6-font-size-22; -@ds6-font-size-title-2: @ds6-font-size-18; -@ds6-font-size-title-3: @ds6-font-size-16; -@ds6-font-size-title-4: @ds6-font-size-16; - -@ds6-font-size-body-1: @ds6-font-size-14; - -@ds6-font-size-caption-1: @ds6-font-size-13; -@ds6-font-size-caption-2: @ds6-font-size-12; -@ds6-font-size-caption-3: @ds6-font-size-12; - -@ds6-font-size-legal-1: @ds6-font-size-12; +@ds6-font-size-giant-2: @ds6-font-size-36; +@ds6-font-size-giant-1: @ds6-font-size-30; +@ds6-font-size-large-2: @ds6-font-size-24; +@ds6-font-size-large-1: @ds6-font-size-20; +@ds6-font-size-medium: @ds6-font-size-16; +@ds6-font-size-regular: @ds6-font-size-14; +@ds6-font-size-small: @ds6-font-size-12; // Font-weights //------------------------- diff --git a/dist/typography/ds6/typography.css b/dist/typography/ds6/typography.css index e69de29bb..a8b6f1a91 100644 --- a/dist/typography/ds6/typography.css +++ b/dist/typography/ds6/typography.css @@ -0,0 +1,30 @@ +.giant-text-2 { + font-size: 2.25rem; + font-weight: 700; + line-height: 46px; +} +.giant-text-1 { + font-size: 1.8625rem; + font-weight: 700; + line-height: 40px; +} +.large-text-2 { + font-size: 1.5rem; + line-height: 32px; +} +.large-text-1 { + font-size: 1.25rem; + line-height: 28px; +} +.medium-text { + font-size: 1rem; + line-height: 24px; +} +.regular-text { + font-size: 0.875rem; + line-height: 20px; +} +.small-text { + font-size: 0.75rem; + line-height: 18px; +} diff --git a/docs/_includes/ds6/less.html b/docs/_includes/ds6/less.html index 6ae24cd23..180e4b598 100644 --- a/docs/_includes/ds6/less.html +++ b/docs/_includes/ds6/less.html @@ -2,27 +2,20 @@

    @ebay/skin/less

    The LESS module contains variables and mixins.

    -

    Color Palette

    diff --git a/docs/_includes/ds6/typography.html b/docs/_includes/ds6/typography.html index 3010e15b7..885d2546e 100644 --- a/docs/_includes/ds6/typography.html +++ b/docs/_includes/ds6/typography.html @@ -4,18 +4,13 @@

    @ebay/skin/typography

      -
    • .headline-1
      • -
    • .headline-2
      • -
    • .headline-3
      • -
    • .title-1
      • -
    • .title-2
      • -
    • .title-3
      • -
    • .title-4
      • -
    • .body-1
      • -
    • .caption-1
      • -
    • .caption-2
      • -
    • .caption-3
      • -
    • .legal-1
      • +
    • .giant-text-2
      • +
    • .giant-text-1
      • +
    • .large-text-2
      • +
    • .large-text-1
      • +
    • .medium-text
      • +
    • .regular-text
      • +
    • .small-text
    diff --git a/docs/ds6/index.html b/docs/ds6/index.html index 8d57f08a9..6ddcfd54e 100644 --- a/docs/ds6/index.html +++ b/docs/ds6/index.html @@ -29,6 +29,7 @@

    Contents

  • @ebay/skin/listbox
  • @ebay/skin/menu
  • @ebay/skin/svg
    • +
  • @ebay/skin/typography
    • {% include ds6/global.html %} {% include ds6/less.html %} @@ -38,4 +39,5 @@

    Contents

    {% include ds6/listbox.html %} {% include ds6/menu.html %} {% include ds6/svg.html %} + {% include ds6/typography.html %} diff --git a/docs/static/ds6/skin.css b/docs/static/ds6/skin.css index d05268cbb..8e35bcb37 100644 --- a/docs/static/ds6/skin.css +++ b/docs/static/ds6/skin.css @@ -596,6 +596,36 @@ span.listbox__arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); } +.giant-text-2 { + font-size: 2.25rem; + font-weight: 700; + line-height: 46px; +} +.giant-text-1 { + font-size: 1.8625rem; + font-weight: 700; + line-height: 40px; +} +.large-text-2 { + font-size: 1.5rem; + line-height: 32px; +} +.large-text-1 { + font-size: 1.25rem; + line-height: 28px; +} +.medium-text { + font-size: 1rem; + line-height: 24px; +} +.regular-text { + font-size: 0.875rem; + line-height: 20px; +} +.small-text { + font-size: 0.75rem; + line-height: 18px; +} .clearfix::before, .clearfix::after { display: table; diff --git a/src/less/bundles/skin/ds6/skin.less b/src/less/bundles/skin/ds6/skin.less index 26af58370..0588d7f03 100644 --- a/src/less/bundles/skin/ds6/skin.less +++ b/src/less/bundles/skin/ds6/skin.less @@ -5,8 +5,7 @@ @import "../../../button/ds6/button.less"; @import "../../../color/ds6/color.less"; @import "../../../icon/ds6/icon.less"; -// @import "../../../menu/ds6/menu.less"; @import "../../../dropdown/ds6/dropdown.less"; // @import "../../../notice/ds6/notice.less"; -// @import "../../../typography/ds6/typography.less"; +@import "../../../typography/ds6/typography.less"; @import "../../../utility/ds6/utility.less"; diff --git a/src/less/less/ds6/mixins.less b/src/less/less/ds6/mixins.less index 5dcb7f187..db15c5b23 100644 --- a/src/less/less/ds6/mixins.less +++ b/src/less/less/ds6/mixins.less @@ -3,79 +3,39 @@ // Typography //----------------------------- -.ds6-typography-headline-1() { - font-size: @ds6-font-size-headline-1; +.ds6-typography-giant-2() { + font-size: @ds6-font-size-giant-2; font-weight: @ds6-font-weight-bold; - line-height: 30px; + line-height: 46px; } -.ds6-typography-headline-2() { - font-size: @ds6-font-size-headline-2; +.ds6-typography-giant-1() { + font-size: @ds6-font-size-giant-1; font-weight: @ds6-font-weight-bold; - line-height: 28px; -} - -.ds6-typography-headline-3() { - font-size: @ds6-font-size-headline-3; - font-weight: @ds6-font-weight-regular; - line-height: 26px; -} - -.ds6-typography-title-1() { - font-size: @ds6-font-size-title-1; - font-weight: @ds6-font-weight-bold; - line-height: 24px; + line-height: 40px; } -.ds6-typography-title-2() { - font-size: @ds6-font-size-title-2; - font-weight: @ds6-font-weight-regular; - line-height: 20px; +.ds6-typography-large-2() { + font-size: @ds6-font-size-large-2; + line-height: 32px; } -.ds6-typography-title-3() { - font-size: @ds6-font-size-title-3; - font-weight: @ds6-font-weight-bold; - line-height: 18px; +.ds6-typography-large-1() { + font-size: @ds6-font-size-large-1; + line-height: 28px; } -.ds6-typography-title-4() { - font-size: @ds6-font-size-title-4; - font-weight: @ds6-font-weight-regular; - line-height: 16px; +.ds6-typography-medium() { + font-size: @ds6-font-size-medium; + line-height: 24px; } -.ds6-typography-body-1() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-body-1; - font-weight: @ds6-font-weight-regular; +.ds6-typography-regular() { + font-size: @ds6-font-size-regular; line-height: 20px; } -.ds6-typography-caption-1() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-caption-1; - font-weight: @ds6-font-weight-regular; - line-height: 15px; -} - -.ds6-typography-caption-2() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-caption-2; - font-weight: @ds6-font-weight-bold; - line-height: 14px; -} - -.ds6-typography-caption-3() { - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-caption-3; - font-weight: @ds6-font-weight-regular; - line-height: 14px; -} - -.ds6-typography-legal-1() { - color: @ds6-color-light; - font-family: @ds6-font-family-default; - font-size: @ds6-font-size-legal-1; - font-weight: @ds6-font-weight-regular; +.ds6-typography-small() { + font-size: @ds6-font-size-small; + line-height: 18px; } diff --git a/src/less/less/ds6/variables.less b/src/less/less/ds6/variables.less index 619578f34..5818ce5e0 100644 --- a/src/less/less/ds6/variables.less +++ b/src/less/less/ds6/variables.less @@ -59,23 +59,16 @@ @ds6-font-size-24: 1.5rem; @ds6-font-size-26: 1.625rem; @ds6-font-size-28: 1.75rem; +@ds6-font-size-30: 1.8625rem; +@ds6-font-size-36: 2.25rem; -@ds6-font-size-headline-1: @ds6-font-size-28; -@ds6-font-size-headline-2: @ds6-font-size-26; -@ds6-font-size-headline-3: @ds6-font-size-24; - -@ds6-font-size-title-1: @ds6-font-size-22; -@ds6-font-size-title-2: @ds6-font-size-18; -@ds6-font-size-title-3: @ds6-font-size-16; -@ds6-font-size-title-4: @ds6-font-size-16; - -@ds6-font-size-body-1: @ds6-font-size-14; - -@ds6-font-size-caption-1: @ds6-font-size-13; -@ds6-font-size-caption-2: @ds6-font-size-12; -@ds6-font-size-caption-3: @ds6-font-size-12; - -@ds6-font-size-legal-1: @ds6-font-size-12; +@ds6-font-size-giant-2: @ds6-font-size-36; +@ds6-font-size-giant-1: @ds6-font-size-30; +@ds6-font-size-large-2: @ds6-font-size-24; +@ds6-font-size-large-1: @ds6-font-size-20; +@ds6-font-size-medium: @ds6-font-size-16; +@ds6-font-size-regular: @ds6-font-size-14; +@ds6-font-size-small: @ds6-font-size-12; // Font-weights //------------------------- diff --git a/src/less/typography/ds6/typography-base.less b/src/less/typography/ds6/typography-base.less index f59eb542c..6ae21d9e1 100644 --- a/src/less/typography/ds6/typography-base.less +++ b/src/less/typography/ds6/typography-base.less @@ -1,47 +1,27 @@ -.headline-1 { - .ds6-typography-headline-1; +.giant-text-2 { + .ds6-typography-giant-2; } -.headline-2 { - .ds6-typography-headline-2; +.giant-text-1 { + .ds6-typography-giant-1; } -.headline-3 { - .ds6-typography-headline-3; +.large-text-2 { + .ds6-typography-large-2; } -.title-1 { - .ds6-typography-title-1; +.large-text-1 { + .ds6-typography-large-1; } -.title-2 { - .ds6-typography-title-2; +.medium-text { + .ds6-typography-medium; } -.title-3 { - .ds6-typography-title-3; +.regular-text { + .ds6-typography-regular; } -.title-4 { - .ds6-typography-title-4; -} - -.body-1 { - .ds6-typography-body-1; -} - -.caption-1 { - .ds6-typography-caption-1; -} - -.caption-2 { - .ds6-typography-caption-2; -} - -.caption-3 { - .ds6-typography-caption-3; -} - -.legal-1 { - .ds6-typography-legal-1; +.small-text { + .ds6-typography-small; } diff --git a/src/less/typography/ds6/typography.less b/src/less/typography/ds6/typography.less index a344e72e9..2e7392ba9 100644 --- a/src/less/typography/ds6/typography.less +++ b/src/less/typography/ds6/typography.less @@ -1,4 +1,4 @@ @import "../../less/ds6/variables.less"; @import "../../less/ds6/mixins.less"; -//@import "typography-base.less"; +@import "typography-base.less"; From c32bccaf84cb55cfda506b700192273e0eafb5ff Mon Sep 17 00:00:00 2001 From: Ian McBurnie Date: Mon, 5 Feb 2018 16:25:30 -0800 Subject: [PATCH 4/7] Stamped files with 3.3.0-0 --- dist/grid/ds4/grid-full.css | 2 +- docs/static/ds4/docs.js | 2 +- docs/static/ds4/grid-full.css | 2 +- docs/static/ds4/skin-full.css | 2 +- docs/static/ds4/skin-large.css | 2 +- docs/static/ds4/skin.css | 2 +- docs/static/ds6/docs.js | 12 ++++++------ docs/static/ds6/skin.css | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/dist/grid/ds4/grid-full.css b/dist/grid/ds4/grid-full.css index 2f06e164d..9797a58a4 100644 --- a/dist/grid/ds4/grid-full.css +++ b/dist/grid/ds4/grid-full.css @@ -1,5 +1,5 @@ /*! -Skin v3.2.0 +Skin v3.3.0-0 Copyright 2017 eBay! Inc. All rights reserved. Licensed under the BSD License. https://github.com/eBay/skin/blob/master/LICENSE.txt" diff --git a/docs/static/ds4/docs.js b/docs/static/ds4/docs.js index 2d7a68cc7..4e01f18d4 100644 --- a/docs/static/ds4/docs.js +++ b/docs/static/ds4/docs.js @@ -1,5 +1,5 @@ !function(){function r(r,n){var t=new Error('Cannot find module "'+r+'"'+(n?' from "'+n+'"':""));return t.code="MODULE_NOT_FOUND",t}function n(r){this.id=this.filename=r,this.loaded=!1,this.exports=void 0}function t(r,n,t){var i=t&&t.globals;if(O[r]=n,i)for(var e=b||global,o=0;o2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e0&&t-1 in e)}function i(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}function o(e,t,n){return he.isFunction(t)?he.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?he.grep(e,function(e){return e===t!==n}):"string"!=typeof t?he.grep(e,function(e){return se.call(t,e)>-1!==n}):Ee.test(t)?he.filter(t,e,n):(t=he.filter(t,e),he.grep(e,function(e){return se.call(t,e)>-1!==n&&1===e.nodeType}))}function a(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}function s(e){var t={};return he.each(e.match(De)||[],function(e,n){t[n]=!0}),t}function u(e){return e}function l(e){throw e}function c(e,t,n,r){var i;try{e&&he.isFunction(i=e.promise)?i.call(e).done(t).fail(n):e&&he.isFunction(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}function f(){ne.removeEventListener("DOMContentLoaded",f),e.removeEventListener("load",f),he.ready()}function p(){this.expando=he.expando+p.uid++}function d(e){return"true"===e||"false"!==e&&("null"===e?null:e===+e+""?+e:Pe.test(e)?JSON.parse(e):e)}function h(e,t,n){var r;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(Re,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n=d(n)}catch(e){}Oe.set(e,t,n)}else n=void 0;return n}function g(e,t,n,r){var i,o=1,a=20,s=r?function(){return r.cur()}:function(){return he.css(e,t,"")},u=s(),l=n&&n[3]||(he.cssNumber[t]?"":"px"),c=(he.cssNumber[t]||"px"!==l&&+u)&&Ie.exec(he.css(e,t));if(c&&c[3]!==l){l=l||c[3],n=n||[],c=+u||1;do{o=o||".5",c/=o,he.style(e,t,c+l)}while(o!==(o=s()/u)&&1!==o&&--a)}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}function v(e){var t,n=e.ownerDocument,r=e.nodeName,i=_e[r];return i||(t=n.body.appendChild(n.createElement(r)),i=he.css(t,"display"),t.parentNode.removeChild(t),"none"===i&&(i="block"),_e[r]=i,i)}function m(e,t){for(var n,r,i=[],o=0,a=e.length;o-1)i&&i.push(o);else if(l=he.contains(o.ownerDocument,o),a=y(f.appendChild(o),"script"),l&&x(a),n)for(c=0;o=a[c++];)Ue.test(o.type||"")&&n.push(o);return f}function w(){return!0}function T(){return!1}function C(){try{return ne.activeElement}catch(e){}}function E(e,t,n,r,i,o){var a,s;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(s in t)E(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=T;else if(!i)return e;return 1===o&&(a=i,i=function(e){return he().off(e),a.apply(this,arguments)},i.guid=a.guid||(a.guid=he.guid++)),e.each(function(){he.event.add(this,t,i,r,n)})}function k(e,t){return i(e,"table")&&i(11!==t.nodeType?t:t.firstChild,"tr")?he(">tbody",e)[0]||e:e}function S(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function N(e){var t=nt.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function j(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Fe.hasData(e)&&(o=Fe.access(e),a=Fe.set(t,o),l=o.events)){delete a.handle,a.events={};for(i in l)for(n=0,r=l[i].length;n1&&"string"==typeof h&&!de.checkClone&&tt.test(h))return e.each(function(n){var o=e.eq(n);g&&(t[0]=h.call(this,n,o.html())),A(o,t,r,i)});if(p&&(o=b(t,e[0].ownerDocument,!1,e,i),a=o.firstChild,1===o.childNodes.length&&(o=a),a||i)){for(s=he.map(y(o,"script"),S),u=s.length;f=0&&nw.cacheLength&&delete e[t.shift()],e[n+" "]=r}var t=[];return e}function r(e){return e[M]=!0,e}function i(e){var t=q.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function o(e,t){for(var n=e.split("|"),r=n.length;r--;)w.attrHandle[n[r]]=t}function a(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)for(;n=n.nextSibling;)if(n===t)return-1;return e?1:-1}function s(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&Te(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function u(e){return r(function(t){return t=+t,r(function(n,r){for(var i,o=e([],n.length,t),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function l(e){return e&&void 0!==e.getElementsByTagName&&e}function c(){}function f(e){for(var t=0,n=e.length,r="";t1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function h(e,n,r){for(var i=0,o=n.length;i-1&&(r[l]=!(a[l]=f))}}else x=g(x===a?x.splice(v,x.length):x),o?o(null,a,x,u):Q.apply(a,x)})}function m(e){for(var t,n,r,i=e.length,o=w.relative[e[0].type],a=o||w.relative[" "],s=o?1:0,u=p(function(e){return e===t},a,!0),l=p(function(e){return K(t,e)>-1},a,!0),c=[function(e,n,r){var i=!o&&(r||n!==N)||((t=n).nodeType?u(e,n,r):l(e,n,r));return t=null,i}];s1&&d(c),s>1&&f(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace(oe,"$1"),n,s0,o=e.length>0,a=function(r,a,s,u,l){var c,f,p,d=0,h="0",v=r&&[],m=[],y=N,x=r||o&&w.find.TAG("*",l),b=W+=null==y?1:Math.random()||.1,T=x.length;for(l&&(N=a===q||a||l);h!==T&&null!=(c=x[h]);h++){if(o&&c){for(f=0,a||c.ownerDocument===q||(A(c),s=!H);p=e[f++];)if(p(c,a||q,s)){u.push(c);break}l&&(W=b)}i&&((c=!p&&c)&&d--,r&&v.push(c))}if(d+=h,i&&h!==d){for(f=0;p=n[f++];)p(v,m,a,s);if(r){if(d>0)for(;h--;)v[h]||m[h]||(m[h]=G.call(u));m=g(m)}Q.apply(u,m),l&&!r&&m.length>0&&d+n.length>1&&t.uniqueSort(u)}return l&&(W=b,N=y),v};return i?r(a):a}var x,b,w,T,C,E,k,S,N,j,D,A,q,L,H,F,O,P,R,M="sizzle"+1*new Date,I=e.document,W=0,$=0,B=n(),_=n(),z=n(),X=function(e,t){return e===t&&(D=!0),0},U={}.hasOwnProperty,V=[],G=V.pop,Y=V.push,Q=V.push,J=V.slice,K=function(e,t){for(var n=0,r=e.length;n+~]|"+ee+")"+ee+"*"),ue=new RegExp("="+ee+"*([^\\]'\"]*?)"+ee+"*\\]","g"),le=new RegExp(re),ce=new RegExp("^"+te+"$"),fe={ID:new RegExp("^#("+te+")"),CLASS:new RegExp("^\\.("+te+")"),TAG:new RegExp("^("+te+"|[*])"),ATTR:new RegExp("^"+ne),PSEUDO:new RegExp("^"+re),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+ee+"*(even|odd|(([+-]|)(\\d*)n|)"+ee+"*(?:([+-]|)"+ee+"*(\\d+)|))"+ee+"*\\)|)","i"),bool:new RegExp("^(?:"+Z+")$","i"),needsContext:new RegExp("^"+ee+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+ee+"*((?:-\\d)?\\d*)"+ee+"*\\)|)(?=[^-]|$)","i")},pe=/^(?:input|select|textarea|button)$/i,de=/^h\d$/i,he=/^[^{]+\{\s*\[native \w/,ge=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ve=/[+~]/,me=new RegExp("\\\\([\\da-f]{1,6}"+ee+"?|("+ee+")|.)","ig"),ye=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},xe=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,be=function(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},we=function(){A()},Te=p(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{Q.apply(V=J.call(I.childNodes),I.childNodes),V[I.childNodes.length].nodeType}catch(e){Q={apply:V.length?function(e,t){Y.apply(e,J.call(t))}:function(e,t){for(var n=e.length,r=0;e[n++]=t[r++];);e.length=n-1}}}b=t.support={},C=t.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},A=t.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:I;return r!==q&&9===r.nodeType&&r.documentElement?(q=r,L=q.documentElement,H=!C(q),I!==q&&(n=q.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",we,!1):n.attachEvent&&n.attachEvent("onunload",we)),b.attributes=i(function(e){return e.className="i",!e.getAttribute("className")}),b.getElementsByTagName=i(function(e){return e.appendChild(q.createComment("")),!e.getElementsByTagName("*").length}),b.getElementsByClassName=he.test(q.getElementsByClassName),b.getById=i(function(e){return L.appendChild(e).id=M,!q.getElementsByName||!q.getElementsByName(M).length}),b.getById?(w.filter.ID=function(e){var t=e.replace(me,ye);return function(e){return e.getAttribute("id")===t}},w.find.ID=function(e,t){if(void 0!==t.getElementById&&H){var n=t.getElementById(e);return n?[n]:[]}}):(w.filter.ID=function(e){var t=e.replace(me,ye);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},w.find.ID=function(e,t){if(void 0!==t.getElementById&&H){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];for(i=t.getElementsByName(e),r=0;o=i[r++];)if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),w.find.TAG=b.getElementsByTagName?function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):b.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[i++];)1===n.nodeType&&r.push(n);return r}return o},w.find.CLASS=b.getElementsByClassName&&function(e,t){if(void 0!==t.getElementsByClassName&&H)return t.getElementsByClassName(e)},O=[],F=[],(b.qsa=he.test(q.querySelectorAll))&&(i(function(e){L.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&F.push("[*^$]="+ee+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||F.push("\\["+ee+"*(?:value|"+Z+")"),e.querySelectorAll("[id~="+M+"-]").length||F.push("~="),e.querySelectorAll(":checked").length||F.push(":checked"),e.querySelectorAll("a#"+M+"+*").length||F.push(".#.+[+~]")}),i(function(e){e.innerHTML="";var t=q.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&F.push("name"+ee+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&F.push(":enabled",":disabled"),L.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&F.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),F.push(",.*:")})),(b.matchesSelector=he.test(P=L.matches||L.webkitMatchesSelector||L.mozMatchesSelector||L.oMatchesSelector||L.msMatchesSelector))&&i(function(e){b.disconnectedMatch=P.call(e,"*"),P.call(e,"[s!='']:x"),O.push("!=",re)}),F=F.length&&new RegExp(F.join("|")),O=O.length&&new RegExp(O.join("|")),t=he.test(L.compareDocumentPosition),R=t||he.test(L.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},X=t?function(e,t){if(e===t)return D=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1,1&n||!b.sortDetached&&t.compareDocumentPosition(e)===n?e===q||e.ownerDocument===I&&R(I,e)?-1:t===q||t.ownerDocument===I&&R(I,t)?1:j?K(j,e)-K(j,t):0:4&n?-1:1)}:function(e,t){if(e===t)return D=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,s=[e],u=[t];if(!i||!o)return e===q?-1:t===q?1:i?-1:o?1:j?K(j,e)-K(j,t):0;if(i===o)return a(e,t);for(n=e;n=n.parentNode;)s.unshift(n);for(n=t;n=n.parentNode;)u.unshift(n);for(;s[r]===u[r];)r++;return r?a(s[r],u[r]):s[r]===I?-1:u[r]===I?1:0},q):q},t.matches=function(e,n){return t(e,null,null,n)},t.matchesSelector=function(e,n){if((e.ownerDocument||e)!==q&&A(e),n=n.replace(ue,"='$1']"),b.matchesSelector&&H&&!z[n+" "]&&(!O||!O.test(n))&&(!F||!F.test(n)))try{var r=P.call(e,n);if(r||b.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return t(n,q,null,[e]).length>0},t.contains=function(e,t){return(e.ownerDocument||e)!==q&&A(e),R(e,t)},t.attr=function(e,t){(e.ownerDocument||e)!==q&&A(e);var n=w.attrHandle[t.toLowerCase()],r=n&&U.call(w.attrHandle,t.toLowerCase())?n(e,t,!H):void 0;return void 0!==r?r:b.attributes||!H?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},t.escape=function(e){return(e+"").replace(xe,be)},t.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},t.uniqueSort=function(e){var t,n=[],r=0,i=0;if(D=!b.detectDuplicates,j=!b.sortStable&&e.slice(0),e.sort(X),D){for(;t=e[i++];)t===e[i]&&(r=n.push(i));for(;r--;)e.splice(n[r],1)}return j=null,e},T=t.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=T(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r++];)n+=T(t);return n},w=t.selectors={cacheLength:50,createPseudo:r,match:fe,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(me,ye),e[3]=(e[3]||e[4]||e[5]||"").replace(me,ye),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||t.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&t.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return fe.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&le.test(n)&&(t=E(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(me,ye).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=B[e+" "];return t||(t=new RegExp("(^|"+ee+")"+e+"("+ee+"|$)"))&&B(e,function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,n,r){return function(i){var o=t.attr(i,e);return null==o?"!="===n:!n||(o+="","="===n?o===r:"!="===n?o!==r:"^="===n?r&&0===o.indexOf(r):"*="===n?r&&o.indexOf(r)>-1:"$="===n?r&&o.slice(-r.length)===r:"~="===n?(" "+o.replace(ie," ")+" ").indexOf(r)>-1:"|="===n&&(o===r||o.slice(0,r.length+1)===r+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",v=t.parentNode,m=s&&t.nodeName.toLowerCase(),y=!u&&!s,x=!1;if(v){if(o){for(;g;){for(p=t;p=p[g];)if(s?p.nodeName.toLowerCase()===m:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?v.firstChild:v.lastChild],a&&y){for(p=v,f=p[M]||(p[M]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),l=c[e]||[],d=l[0]===W&&l[1],x=d&&l[2],p=d&&v.childNodes[d];p=++d&&p&&p[g]||(x=d=0)||h.pop();)if(1===p.nodeType&&++x&&p===t){c[e]=[W,d,x];break}}else if(y&&(p=t,f=p[M]||(p[M]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),l=c[e]||[],d=l[0]===W&&l[1],x=d),!1===x)for(;(p=++d&&p&&p[g]||(x=d=0)||h.pop())&&((s?p.nodeName.toLowerCase()!==m:1!==p.nodeType)||!++x||(y&&(f=p[M]||(p[M]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),c[e]=[W,x]),p!==t)););return(x-=i)===r||x%r==0&&x/r>=0}}},PSEUDO:function(e,n){var i,o=w.pseudos[e]||w.setFilters[e.toLowerCase()]||t.error("unsupported pseudo: "+e);return o[M]?o(n):o.length>1?(i=[e,e,"",n],w.setFilters.hasOwnProperty(e.toLowerCase())?r(function(e,t){for(var r,i=o(e,n),a=i.length;a--;)r=K(e,i[a]),e[r]=!(t[r]=i[a])}):function(e){return o(e,0,i)}):o}},pseudos:{not:r(function(e){var t=[],n=[],i=k(e.replace(oe,"$1"));return i[M]?r(function(e,t,n,r){for(var o,a=i(e,null,r,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,r,o){return t[0]=e,i(t,null,o,n),t[0]=null,!n.pop()}}),has:r(function(e){return function(n){return t(e,n).length>0}}),contains:r(function(e){return e=e.replace(me,ye),function(t){return(t.textContent||t.innerText||T(t)).indexOf(e)>-1}}),lang:r(function(e){return ce.test(e||"")||t.error("unsupported lang: "+e),e=e.replace(me,ye).toLowerCase(),function(t){var n;do{if(n=H?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===L},focus:function(e){return e===q.activeElement&&(!q.hasFocus||q.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:s(!1),disabled:s(!0),checked:function(e){ var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!w.pseudos.empty(e)},header:function(e){return de.test(e.nodeName)},input:function(e){return pe.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:u(function(){return[0]}),last:u(function(e,t){return[t-1]}),eq:u(function(e,t,n){return[n<0?n+t:n]}),even:u(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:u(function(e,t,n){for(var r=n<0?n+t:n;++r2&&"ID"===(a=o[0]).type&&9===t.nodeType&&H&&w.relative[o[1].type]){if(!(t=(w.find.ID(a.matches[0].replace(me,ye),t)||[])[0]))return n;c&&(t=t.parentNode),e=e.slice(o.shift().value.length)}for(i=fe.needsContext.test(e)?0:o.length;i--&&(a=o[i],!w.relative[s=a.type]);)if((u=w.find[s])&&(r=u(a.matches[0].replace(me,ye),ve.test(o[0].type)&&l(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&f(o)))return Q.apply(n,r),n;break}}return(c||k(e,p))(r,t,!H,n,!t||ve.test(e)&&l(t.parentNode)||t),n},b.sortStable=M.split("").sort(X).join("")===M,b.detectDuplicates=!!D,A(),b.sortDetached=i(function(e){return 1&e.compareDocumentPosition(q.createElement("fieldset"))}),i(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||o("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),b.attributes&&i(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||o("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),i(function(e){return null==e.getAttribute("disabled")})||o(Z,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),t}(e);he.find=xe,he.expr=xe.selectors,he.expr[":"]=he.expr.pseudos,he.uniqueSort=he.unique=xe.uniqueSort,he.text=xe.getText,he.isXMLDoc=xe.isXML,he.contains=xe.contains,he.escapeSelector=xe.escape;var be=function(e,t,n){for(var r=[],i=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(i&&he(e).is(n))break;r.push(e)}return r},we=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},Te=he.expr.match.needsContext,Ce=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,Ee=/^.[^:#\[\.,]*$/;he.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?he.find.matchesSelector(r,e)?[r]:[]:he.find.matches(e,he.grep(t,function(e){return 1===e.nodeType}))},he.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(he(e).filter(function(){for(t=0;t1?he.uniqueSort(n):n},filter:function(e){return this.pushStack(o(this,e||[],!1))},not:function(e){return this.pushStack(o(this,e||[],!0))},is:function(e){return!!o(this,"string"==typeof e&&Te.test(e)?he(e):e||[],!1).length}});var ke,Se=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(he.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||ke,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:Se.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof he?t[0]:t,he.merge(this,he.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:ne,!0)),Ce.test(r[1])&&he.isPlainObject(t))for(r in t)he.isFunction(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return i=ne.getElementById(r[2]),i&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):he.isFunction(e)?void 0!==n.ready?n.ready(e):e(he):he.makeArray(e,this)}).prototype=he.fn,ke=he(ne);var Ne=/^(?:parents|prev(?:Until|All))/,je={children:!0,contents:!0,next:!0,prev:!0};he.fn.extend({has:function(e){var t=he(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&he.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?he.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?se.call(he(e),this[0]):se.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(he.uniqueSort(he.merge(this.get(),he(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),he.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return be(e,"parentNode")},parentsUntil:function(e,t,n){return be(e,"parentNode",n)},next:function(e){return a(e,"nextSibling")},prev:function(e){return a(e,"previousSibling")},nextAll:function(e){return be(e,"nextSibling")},prevAll:function(e){return be(e,"previousSibling")},nextUntil:function(e,t,n){return be(e,"nextSibling",n)},prevUntil:function(e,t,n){return be(e,"previousSibling",n)},siblings:function(e){return we((e.parentNode||{}).firstChild,e)},children:function(e){return we(e.firstChild)},contents:function(e){return i(e,"iframe")?e.contentDocument:(i(e,"template")&&(e=e.content||e),he.merge([],e.childNodes))}},function(e,t){he.fn[e]=function(n,r){var i=he.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=he.filter(r,i)),this.length>1&&(je[e]||he.uniqueSort(i),Ne.test(e)&&i.reverse()),this.pushStack(i)}});var De=/[^\x20\t\r\n\f]+/g;he.Callbacks=function(e){e="string"==typeof e?s(e):he.extend({},e);var t,n,r,i,o=[],a=[],u=-1,l=function(){for(i=i||e.once,r=t=!0;a.length;u=-1)for(n=a.shift();++u-1;)o.splice(n,1),n<=u&&u--}),this},has:function(e){return e?he.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=n||[],n=[e,n.slice?n.slice():n],a.push(n),t||l()),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!r}};return c},he.extend({Deferred:function(t){var n=[["notify","progress",he.Callbacks("memory"),he.Callbacks("memory"),2],["resolve","done",he.Callbacks("once memory"),he.Callbacks("once memory"),0,"resolved"],["reject","fail",he.Callbacks("once memory"),he.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},catch:function(e){return i.then(null,e)},pipe:function(){var e=arguments;return he.Deferred(function(t){he.each(n,function(n,r){var i=he.isFunction(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&he.isFunction(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){function o(t,n,r,i){return function(){var s=this,c=arguments,f=function(){var e,f;if(!(t=a&&(r!==l&&(s=void 0,c=[e]),n.rejectWith(s,c))}};t?p():(he.Deferred.getStackHook&&(p.stackTrace=he.Deferred.getStackHook()),e.setTimeout(p))}}var a=0;return he.Deferred(function(e){n[0][3].add(o(0,e,he.isFunction(i)?i:u,e.notifyWith)),n[1][3].add(o(0,e,he.isFunction(t)?t:u)),n[2][3].add(o(0,e,he.isFunction(r)?r:l))}).promise()},promise:function(e){return null!=e?he.extend(e,i):i}},o={};return he.each(n,function(e,t){var a=t[2],s=t[5];i[t[1]]=a.add,s&&a.add(function(){r=s},n[3-e][2].disable,n[0][2].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=ie.call(arguments),o=he.Deferred(),a=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?ie.call(arguments):n,--t||o.resolveWith(r,i)}};if(t<=1&&(c(e,o.done(a(n)).resolve,o.reject,!t),"pending"===o.state()||he.isFunction(i[n]&&i[n].then)))return o.then();for(;n--;)c(i[n],a(n),o.reject);return o.promise()}});var Ae=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;he.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&Ae.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},he.readyException=function(t){e.setTimeout(function(){throw t})};var qe=he.Deferred();he.fn.ready=function(e){return qe.then(e).catch(function(e){he.readyException(e)}),this},he.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--he.readyWait:he.isReady)||(he.isReady=!0,!0!==e&&--he.readyWait>0||qe.resolveWith(ne,[he]))}}),he.ready.then=qe.then,"complete"===ne.readyState||"loading"!==ne.readyState&&!ne.documentElement.doScroll?e.setTimeout(he.ready):(ne.addEventListener("DOMContentLoaded",f),e.addEventListener("load",f));var Le=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===he.type(n)){i=!0;for(s in n)Le(e,t,s,n[s],!0,o,a)}else if(void 0!==r&&(i=!0,he.isFunction(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(he(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){Oe.remove(this,e)})}}),he.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Fe.get(e,t),n&&(!r||Array.isArray(n)?r=Fe.access(e,t,he.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=he.queue(e,t),r=n.length,i=n.shift(),o=he._queueHooks(e,t),a=function(){he.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Fe.get(e,n)||Fe.access(e,n,{empty:he.Callbacks("once memory").add(function(){Fe.remove(e,[t+"queue",n])})})}}),he.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,Ue=/^$|\/(?:java|ecma)script/i,Ve={option:[1,""],thead:[1,"","
    "],col:[2,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],_default:[0,"",""]};Ve.optgroup=Ve.option,Ve.tbody=Ve.tfoot=Ve.colgroup=Ve.caption=Ve.thead,Ve.th=Ve.td;var Ge=/<|&#?\w+;/;!function(){var e=ne.createDocumentFragment(),t=e.appendChild(ne.createElement("div")),n=ne.createElement("input");n.setAttribute("type","radio"),n.setAttribute("checked","checked"),n.setAttribute("name","t"),t.appendChild(n),de.checkClone=t.cloneNode(!0).cloneNode(!0).lastChild.checked,t.innerHTML="",de.noCloneChecked=!!t.cloneNode(!0).lastChild.defaultValue}();var Ye=ne.documentElement,Qe=/^key/,Je=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ke=/^([^.]*)(?:\.(.+)|)/;he.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Fe.get(e);if(v)for(n.handler&&(o=n,n=o.handler,i=o.selector),i&&he.find.matchesSelector(Ye,i),n.guid||(n.guid=he.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(t){return void 0!==he&&he.event.triggered!==t.type?he.event.dispatch.apply(e,arguments):void 0}),t=(t||"").match(De)||[""],l=t.length;l--;)s=Ke.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d&&(f=he.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=he.event.special[d]||{},c=he.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&he.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||(p=u[d]=[],p.delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),he.event.global[d]=!0)},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Fe.hasData(e)&&Fe.get(e);if(v&&(u=v.events)){for(t=(t||"").match(De)||[""],l=t.length;l--;)if(s=Ke.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){for(f=he.event.special[d]||{},d=(r?f.delegateType:f.bindType)||d,p=u[d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||he.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)he.event.remove(e,d+t[l],n,r,!0);he.isEmptyObject(u)&&Fe.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=he.event.fix(e),u=new Array(arguments.length),l=(Fe.get(this,"events")||{})[s.type]||[],c=he.event.special[s.type]||{};for(u[0]=s,t=1;t=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:he.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,et=/\s*$/g;he.extend({htmlPrefilter:function(e){return e.replace(Ze,"<$1>")},clone:function(e,t,n){var r,i,o,a,s=e.cloneNode(!0),u=he.contains(e.ownerDocument,e);if(!(de.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||he.isXMLDoc(e)))for(a=y(s),o=y(e),r=0,i=o.length;r0&&x(a,!u&&y(e,"script")),s},cleanData:function(e){for(var t,n,r,i=he.event.special,o=0;void 0!==(n=e[o]);o++)if(He(n)){if(t=n[Fe.expando]){if(t.events)for(r in t.events)i[r]?he.event.remove(n,r):he.removeEvent(n,r,t.handle);n[Fe.expando]=void 0}n[Oe.expando]&&(n[Oe.expando]=void 0)}}}),he.fn.extend({detach:function(e){return q(this,e,!0)},remove:function(e){return q(this,e)},text:function(e){return Le(this,function(e){return void 0===e?he.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return A(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){k(this,e).appendChild(e)}})},prepend:function(){return A(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=k(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return A(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return A(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(he.cleanData(y(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return he.clone(this,e,t)})},html:function(e){return Le(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!et.test(e)&&!Ve[(Xe.exec(e)||["",""])[1].toLowerCase()]){e=he.htmlPrefilter(e);try{for(;n1)}}),he.Tween=I,I.prototype={constructor:I,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||he.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(he.cssNumber[n]?"":"px")},cur:function(){var e=I.propHooks[this.prop];return e&&e.get?e.get(this):I.propHooks._default.get(this)},run:function(e){var t,n=I.propHooks[this.prop];return this.options.duration?this.pos=t=he.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):I.propHooks._default.set(this),this}},I.prototype.init.prototype=I.prototype,I.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=he.css(e.elem,e.prop,""),t&&"auto"!==t?t:0)},set:function(e){he.fx.step[e.prop]?he.fx.step[e.prop](e):1!==e.elem.nodeType||null==e.elem.style[he.cssProps[e.prop]]&&!he.cssHooks[e.prop]?e.elem[e.prop]=e.now:he.style(e.elem,e.prop,e.now+e.unit)}}},I.propHooks.scrollTop=I.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},he.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},he.fx=I.prototype.init,he.fx.step={};var dt,ht,gt=/^(?:toggle|show|hide)$/,vt=/queueHooks$/;he.Animation=he.extend(U,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return g(n.elem,e,Ie.exec(t),n),n}]},tweener:function(e,t){he.isFunction(e)?(t=e,e=["*"]):e=e.match(De);for(var n,r=0,i=e.length;r2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(a));return n=n.filter(function(e){return"none"!==window.getComputedStyle(e).display}),!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); $_mod.def("/makeup-expander$0.3.0/index",function(t,e,s,i,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function h(t){var e=t.keyCode;13!==e&&32!==e||(this.keyDownFlag=!0,32===e&&!0===this.options.spacebar&&this.hostEl.click())}var a=Object.assign||function(t){for(var e=1;e=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()}function i(e){e.addEventListener("keydown",r)}function k(e){e.removeEventListener("keydown",r)}o.exports={add:i,remove:k}}); -$_mod.def("/@ebay/skin$3.2.0/docs/src/js/ds6/main",function(e,t,n,o,c){function r(e){return Array.prototype.slice.call(e)}var a=e("/makeup-expander$0.3.0/index"),l=e("/makeup-roving-tabindex$0.0.3/index"),i=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");r(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),r(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),r(document.querySelectorAll("[role=menu]")).forEach(function(e,t){l.createLinear(e,"[role^=menuitem]",{autoReset:0})}),r(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role=listbox]")).forEach(function(e,t){l.createLinear(e,"[role^=option]",{autoReset:0})}),r(document.querySelectorAll(".listbox")).forEach(function(e,t){var n=new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".listbox__control > input",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){n.collapse(),this.querySelector(".listbox__control > input").focus()})}),r(document.querySelectorAll(".listbox__control > input")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role^=option]")).forEach(function(e,t){u.add(e)})}); -$_mod.run("/@ebay/skin$3.2.0/docs/src/js/ds6/main"); \ No newline at end of file +$_mod.def("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main",function(e,t,n,o,c){function r(e){return Array.prototype.slice.call(e)}var a=e("/makeup-expander$0.3.0/index"),l=e("/makeup-roving-tabindex$0.0.3/index"),i=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");r(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),r(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),r(document.querySelectorAll("[role=menu]")).forEach(function(e,t){l.createLinear(e,"[role^=menuitem]",{autoReset:0})}),r(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role=listbox]")).forEach(function(e,t){l.createLinear(e,"[role^=option]",{autoReset:0})}),r(document.querySelectorAll(".listbox")).forEach(function(e,t){var n=new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".listbox__control > input",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){n.collapse(),this.querySelector(".listbox__control > input").focus()})}),r(document.querySelectorAll(".listbox__control > input")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role^=option]")).forEach(function(e,t){u.add(e)})}); +$_mod.run("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main"); \ No newline at end of file diff --git a/docs/static/ds6/skin.css b/docs/static/ds6/skin.css index 8e35bcb37..e06d2a470 100644 --- a/docs/static/ds6/skin.css +++ b/docs/static/ds6/skin.css @@ -1,5 +1,5 @@ /*! -Skin v3.2.0 +Skin v3.3.0-0 Copyright 2017 eBay! Inc. All rights reserved. Licensed under the BSD License. https://github.com/eBay/skin/blob/master/LICENSE.txt" From 2df14692471350183a0bf6a2b65ebd953dd6dd61 Mon Sep 17 00:00:00 2001 From: Ian McBurnie Date: Mon, 5 Feb 2018 16:25:54 -0800 Subject: [PATCH 5/7] 3.3.0-0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e4cd9cda8..5163b243f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@ebay/skin", "description": "Skin - CSS modules that represent the brand eBay", - "version": "3.2.0", + "version": "3.3.0-0", "license": "MIT", "maintainers": [ "Ian McBurnie " From c9648331e1f72db809ec89c45b91f72adc0f71df Mon Sep 17 00:00:00 2001 From: Ian McBurnie Date: Thu, 15 Feb 2018 16:13:00 -0800 Subject: [PATCH 6/7] Added basic kb & mouse interaction to listbox examples #38 --- docs/src/js/ds6/main.js | 63 +++++++++++++++++++++++++++++------------ docs/static/ds6/docs.js | 2 +- 2 files changed, 46 insertions(+), 19 deletions(-) diff --git a/docs/src/js/ds6/main.js b/docs/src/js/ds6/main.js index 683b2d610..e491a7f90 100644 --- a/docs/src/js/ds6/main.js +++ b/docs/src/js/ds6/main.js @@ -1,4 +1,4 @@ -// Most of this is code for the menu logic, which will be abstracted away in it's own module soon +// Most of this is code for the menu and listbox logic, which will be abstracted away into their own modules at some point // makeup-js accessibility modules var Expander = require('makeup-expander'); @@ -11,6 +11,8 @@ function nodeListToArray(nodeList) { return Array.prototype.slice.call(nodeList); } +// BUTTON WIDGET + // simple button logic on buttons nodeListToArray(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(el, i) { el.addEventListener('click', function(e) { @@ -26,6 +28,8 @@ nodeListToArray(document.querySelectorAll('.expand-btn-example')).forEach(functi }) }); +// MENU WIDGET (basic interactivity only) + // roving tab index logic on menu items container nodeListToArray(document.querySelectorAll('[role=menu]')).forEach(function(el, i) { var widget = Rover.createLinear(el, '[role^=menuitem]', {autoReset: 0}); @@ -54,38 +58,61 @@ nodeListToArray(document.querySelectorAll('[role^=menuitem]')).forEach(function( scrollKeyPreventer.add(el); }); -// roving tab index logic on listbox options container -nodeListToArray(document.querySelectorAll('[role=listbox]')).forEach(function(el, i) { - var widget = Rover.createLinear(el, '[role^=option]', {autoReset: 0}); -}); +// LISTBOX WIDGET (basic interactivity only) -// aria expanded logic on listbox input and overlay -// escape key logic on listbox (closes listbox) nodeListToArray(document.querySelectorAll('.listbox')).forEach(function(el, i) { var widget = new Expander(el, { autoCollapse: true, click: true, - focusManagement: 'interactive', - hostSelector: '.listbox__control > input', + hostSelector: 'input[role=combobox]', hostContainerClass: 'listbox__control', contentSelector: '.listbox__options', spacebar: true }); + var inputEl = el.querySelector('input[role=combobox]'); + var optionEls = nodeListToArray(el.querySelectorAll('[role=option]')); + var selectedOptionEl = el.querySelector('[role=option][aria-selected=true]'); + var size = optionEls.length; + var currentIndex; + + var updateListbox = function(newIndex) { + selectedOptionEl.setAttribute('aria-selected', 'false'); + currentIndex = newIndex; + inputEl.value = 'Option ' + (currentIndex + 1); + selectedOptionEl = optionEls[currentIndex]; + selectedOptionEl.setAttribute('aria-selected', 'true'); + }; + + optionEls.forEach(function(el, i) { + // assign an index data attribute to each el + el.dataset.listboxIndex = i; + + // add a click handler to each el + el.addEventListener('click', function(e) { + updateListbox(parseInt(this.dataset.listboxIndex, 10)); + }); + }); + + currentIndex = parseInt(selectedOptionEl.dataset.listboxIndex, 10); + keyEmitter.addKeyDown(el); + scrollKeyPreventer.add(el); el.addEventListener('escapeKeyDown', function() { widget.collapse(); - this.querySelector('.listbox__control > input').focus(); + inputEl.focus(); }); -}); -// prevent scroll keys logic on the listbox button -nodeListToArray(document.querySelectorAll('.listbox__control > input')).forEach(function (el, i) { - scrollKeyPreventer.add(el); -}); + el.addEventListener('arrowDownKeyDown', function(e) { + if (currentIndex < (size - 1)) { + updateListbox(currentIndex + 1); + } + }); -// prevent scroll keys logic on listbox options -nodeListToArray(document.querySelectorAll('[role^=option]')).forEach(function(el, i) { - scrollKeyPreventer.add(el); + el.addEventListener('arrowUpKeyDown', function(e) { + if (currentIndex > 0) { + updateListbox(currentIndex - 1); + } + }); }); diff --git a/docs/static/ds6/docs.js b/docs/static/ds6/docs.js index 1924fc06d..8450ed27f 100644 --- a/docs/static/ds6/docs.js +++ b/docs/static/ds6/docs.js @@ -36,5 +36,5 @@ $_mod.installed("@ebay/skin$3.3.0-0","makeup-key-emitter","0.0.2"); $_mod.installed("@ebay/skin$3.3.0-0","makeup-prevent-scroll-keys","0.0.1"); $_mod.main("/makeup-prevent-scroll-keys$0.0.1",""); $_mod.def("/makeup-prevent-scroll-keys$0.0.1/index",function(e,n,o,t,d){"use strict";function r(e){(e.keyCode>=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()}function i(e){e.addEventListener("keydown",r)}function k(e){e.removeEventListener("keydown",r)}o.exports={add:i,remove:k}}); -$_mod.def("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main",function(e,t,n,o,c){function r(e){return Array.prototype.slice.call(e)}var a=e("/makeup-expander$0.3.0/index"),l=e("/makeup-roving-tabindex$0.0.3/index"),i=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");r(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),r(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),r(document.querySelectorAll("[role=menu]")).forEach(function(e,t){l.createLinear(e,"[role^=menuitem]",{autoReset:0})}),r(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),r(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role=listbox]")).forEach(function(e,t){l.createLinear(e,"[role^=option]",{autoReset:0})}),r(document.querySelectorAll(".listbox")).forEach(function(e,t){var n=new a(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".listbox__control > input",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0});i.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){n.collapse(),this.querySelector(".listbox__control > input").focus()})}),r(document.querySelectorAll(".listbox__control > input")).forEach(function(e,t){u.add(e)}),r(document.querySelectorAll("[role^=option]")).forEach(function(e,t){u.add(e)})}); +$_mod.def("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main",function(e,t,n,o,r){function a(e){return Array.prototype.slice.call(e)}var c=e("/makeup-expander$0.3.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),l=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");a(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),a(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),a(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),a(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new c(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});l.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),a(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),a(document.querySelectorAll(".listbox")).forEach(function(e,t){var n,o=new c(e,{autoCollapse:!0,click:!0,hostSelector:"input[role=combobox]",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0}),r=e.querySelector("input[role=combobox]"),i=a(e.querySelectorAll("[role=option]")),d=e.querySelector("[role=option][aria-selected=true]"),s=i.length,f=function(e){d.setAttribute("aria-selected","false"),n=e,r.value="Option "+(n+1),d=i[n],d.setAttribute("aria-selected","true")};i.forEach(function(e,t){e.dataset.listboxIndex=t,e.addEventListener("click",function(e){f(parseInt(this.dataset.listboxIndex,10))})}),n=parseInt(d.dataset.listboxIndex,10),l.addKeyDown(e),u.add(e),e.addEventListener("escapeKeyDown",function(){o.collapse(),r.focus()}),e.addEventListener("arrowDownKeyDown",function(e){n0&&f(n-1)})})}); $_mod.run("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main"); \ No newline at end of file From 0d73ac655b18c6cf9f44b346e12857aa637f92e2 Mon Sep 17 00:00:00 2001 From: Ian McBurnie Date: Thu, 15 Feb 2018 16:32:29 -0800 Subject: [PATCH 7/7] Stamped files with v3.3.0 --- dist/grid/ds4/grid-full.css | 2 +- docs/_includes/cdn.html | 6 +++--- docs/_includes/grid.html | 2 +- docs/static/ds4/docs.js | 2 +- docs/static/ds4/grid-full.css | 2 +- docs/static/ds4/skin-full.css | 2 +- docs/static/ds4/skin-large.css | 2 +- docs/static/ds4/skin.css | 2 +- docs/static/ds6/docs.js | 12 ++++++------ docs/static/ds6/skin.css | 2 +- 10 files changed, 17 insertions(+), 17 deletions(-) diff --git a/dist/grid/ds4/grid-full.css b/dist/grid/ds4/grid-full.css index 9797a58a4..1ce06518f 100644 --- a/dist/grid/ds4/grid-full.css +++ b/dist/grid/ds4/grid-full.css @@ -1,5 +1,5 @@ /*! -Skin v3.3.0-0 +Skin v3.3.0 Copyright 2017 eBay! Inc. All rights reserved. Licensed under the BSD License. https://github.com/eBay/skin/blob/master/LICENSE.txt" diff --git a/docs/_includes/cdn.html b/docs/_includes/cdn.html index 3c9bb3b45..5b098c55f 100644 --- a/docs/_includes/cdn.html +++ b/docs/_includes/cdn.html @@ -1,10 +1,10 @@

    CDN

    A CSS file containing the full collection of modules (except grid) for small screens is available via the following url:

    -

    https://ir.ebaystatic.com/cr/v/c1/skin/v3.2.0/ds4/skin.min.css

    +

    https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.0/ds4/skin.min.css

    A small CSS file containing only the additional rules for large screens, for an adaptive approach, is also available:

    -

    https://ir.ebaystatic.com/cr/v/c1/skin/v3.2.0/ds4/skin-large.min.css

    +

    https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.0/ds4/skin-large.min.css

    Finally, a CSS file containing all rules (with the large rules contained in a media query) is available at:

    -

    https://ir.ebaystatic.com/cr/v/c1/skin/v3.2.0/ds4/skin-full.min.css

    +

    https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.0/ds4/skin-full.min.css

    Using this "full" file effectively means that your site is opting into a responsive approach rather than adaptive.

    diff --git a/docs/_includes/grid.html b/docs/_includes/grid.html index e61de8f01..430f40a7e 100644 --- a/docs/_includes/grid.html +++ b/docs/_includes/grid.html @@ -49,7 +49,7 @@

    Lasso

    {% endhighlight %}

    CDN

    -

    The grid system is also available via CDN: https://ir.ebaystatic.com/cr/v/c1/skin/v3.2.0/ds4/grid-full.min.css

    +

    The grid system is also available via CDN: https://ir.ebaystatic.com/cr/v/c1/skin/v3.3.0/ds4/grid-full.min.css

    Basic Grid

      diff --git a/docs/static/ds4/docs.js b/docs/static/ds4/docs.js index 4e01f18d4..4ae5fbd17 100644 --- a/docs/static/ds4/docs.js +++ b/docs/static/ds4/docs.js @@ -1,5 +1,5 @@ !function(){function r(r,n){var t=new Error('Cannot find module "'+r+'"'+(n?' from "'+n+'"':""));return t.code="MODULE_NOT_FOUND",t}function n(r){this.id=this.filename=r,this.loaded=!1,this.exports=void 0}function t(r,n,t){var i=t&&t.globals;if(O[r]=n,i)for(var e=b||global,o=0;o2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e0&&t-1 in e)}function i(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}function o(e,t,n){return he.isFunction(t)?he.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?he.grep(e,function(e){return e===t!==n}):"string"!=typeof t?he.grep(e,function(e){return se.call(t,e)>-1!==n}):Ee.test(t)?he.filter(t,e,n):(t=he.filter(t,e),he.grep(e,function(e){return se.call(t,e)>-1!==n&&1===e.nodeType}))}function a(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}function s(e){var t={};return he.each(e.match(De)||[],function(e,n){t[n]=!0}),t}function u(e){return e}function l(e){throw e}function c(e,t,n,r){var i;try{e&&he.isFunction(i=e.promise)?i.call(e).done(t).fail(n):e&&he.isFunction(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}function f(){ne.removeEventListener("DOMContentLoaded",f),e.removeEventListener("load",f),he.ready()}function p(){this.expando=he.expando+p.uid++}function d(e){return"true"===e||"false"!==e&&("null"===e?null:e===+e+""?+e:Pe.test(e)?JSON.parse(e):e)}function h(e,t,n){var r;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(Re,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n=d(n)}catch(e){}Oe.set(e,t,n)}else n=void 0;return n}function g(e,t,n,r){var i,o=1,a=20,s=r?function(){return r.cur()}:function(){return he.css(e,t,"")},u=s(),l=n&&n[3]||(he.cssNumber[t]?"":"px"),c=(he.cssNumber[t]||"px"!==l&&+u)&&Ie.exec(he.css(e,t));if(c&&c[3]!==l){l=l||c[3],n=n||[],c=+u||1;do{o=o||".5",c/=o,he.style(e,t,c+l)}while(o!==(o=s()/u)&&1!==o&&--a)}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}function v(e){var t,n=e.ownerDocument,r=e.nodeName,i=_e[r];return i||(t=n.body.appendChild(n.createElement(r)),i=he.css(t,"display"),t.parentNode.removeChild(t),"none"===i&&(i="block"),_e[r]=i,i)}function m(e,t){for(var n,r,i=[],o=0,a=e.length;o-1)i&&i.push(o);else if(l=he.contains(o.ownerDocument,o),a=y(f.appendChild(o),"script"),l&&x(a),n)for(c=0;o=a[c++];)Ue.test(o.type||"")&&n.push(o);return f}function w(){return!0}function T(){return!1}function C(){try{return ne.activeElement}catch(e){}}function E(e,t,n,r,i,o){var a,s;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(s in t)E(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=T;else if(!i)return e;return 1===o&&(a=i,i=function(e){return he().off(e),a.apply(this,arguments)},i.guid=a.guid||(a.guid=he.guid++)),e.each(function(){he.event.add(this,t,i,r,n)})}function k(e,t){return i(e,"table")&&i(11!==t.nodeType?t:t.firstChild,"tr")?he(">tbody",e)[0]||e:e}function S(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function N(e){var t=nt.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function j(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Fe.hasData(e)&&(o=Fe.access(e),a=Fe.set(t,o),l=o.events)){delete a.handle,a.events={};for(i in l)for(n=0,r=l[i].length;n1&&"string"==typeof h&&!de.checkClone&&tt.test(h))return e.each(function(n){var o=e.eq(n);g&&(t[0]=h.call(this,n,o.html())),A(o,t,r,i)});if(p&&(o=b(t,e[0].ownerDocument,!1,e,i),a=o.firstChild,1===o.childNodes.length&&(o=a),a||i)){for(s=he.map(y(o,"script"),S),u=s.length;f=0&&nw.cacheLength&&delete e[t.shift()],e[n+" "]=r}var t=[];return e}function r(e){return e[M]=!0,e}function i(e){var t=q.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function o(e,t){for(var n=e.split("|"),r=n.length;r--;)w.attrHandle[n[r]]=t}function a(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)for(;n=n.nextSibling;)if(n===t)return-1;return e?1:-1}function s(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&Te(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function u(e){return r(function(t){return t=+t,r(function(n,r){for(var i,o=e([],n.length,t),a=o.length;a--;)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function l(e){return e&&void 0!==e.getElementsByTagName&&e}function c(){}function f(e){for(var t=0,n=e.length,r="";t1?function(t,n,r){for(var i=e.length;i--;)if(!e[i](t,n,r))return!1;return!0}:e[0]}function h(e,n,r){for(var i=0,o=n.length;i-1&&(r[l]=!(a[l]=f))}}else x=g(x===a?x.splice(v,x.length):x),o?o(null,a,x,u):Q.apply(a,x)})}function m(e){for(var t,n,r,i=e.length,o=w.relative[e[0].type],a=o||w.relative[" "],s=o?1:0,u=p(function(e){return e===t},a,!0),l=p(function(e){return K(t,e)>-1},a,!0),c=[function(e,n,r){var i=!o&&(r||n!==N)||((t=n).nodeType?u(e,n,r):l(e,n,r));return t=null,i}];s1&&d(c),s>1&&f(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace(oe,"$1"),n,s0,o=e.length>0,a=function(r,a,s,u,l){var c,f,p,d=0,h="0",v=r&&[],m=[],y=N,x=r||o&&w.find.TAG("*",l),b=W+=null==y?1:Math.random()||.1,T=x.length;for(l&&(N=a===q||a||l);h!==T&&null!=(c=x[h]);h++){if(o&&c){for(f=0,a||c.ownerDocument===q||(A(c),s=!H);p=e[f++];)if(p(c,a||q,s)){u.push(c);break}l&&(W=b)}i&&((c=!p&&c)&&d--,r&&v.push(c))}if(d+=h,i&&h!==d){for(f=0;p=n[f++];)p(v,m,a,s);if(r){if(d>0)for(;h--;)v[h]||m[h]||(m[h]=G.call(u));m=g(m)}Q.apply(u,m),l&&!r&&m.length>0&&d+n.length>1&&t.uniqueSort(u)}return l&&(W=b,N=y),v};return i?r(a):a}var x,b,w,T,C,E,k,S,N,j,D,A,q,L,H,F,O,P,R,M="sizzle"+1*new Date,I=e.document,W=0,$=0,B=n(),_=n(),z=n(),X=function(e,t){return e===t&&(D=!0),0},U={}.hasOwnProperty,V=[],G=V.pop,Y=V.push,Q=V.push,J=V.slice,K=function(e,t){for(var n=0,r=e.length;n+~]|"+ee+")"+ee+"*"),ue=new RegExp("="+ee+"*([^\\]'\"]*?)"+ee+"*\\]","g"),le=new RegExp(re),ce=new RegExp("^"+te+"$"),fe={ID:new RegExp("^#("+te+")"),CLASS:new RegExp("^\\.("+te+")"),TAG:new RegExp("^("+te+"|[*])"),ATTR:new RegExp("^"+ne),PSEUDO:new RegExp("^"+re),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+ee+"*(even|odd|(([+-]|)(\\d*)n|)"+ee+"*(?:([+-]|)"+ee+"*(\\d+)|))"+ee+"*\\)|)","i"),bool:new RegExp("^(?:"+Z+")$","i"),needsContext:new RegExp("^"+ee+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+ee+"*((?:-\\d)?\\d*)"+ee+"*\\)|)(?=[^-]|$)","i")},pe=/^(?:input|select|textarea|button)$/i,de=/^h\d$/i,he=/^[^{]+\{\s*\[native \w/,ge=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ve=/[+~]/,me=new RegExp("\\\\([\\da-f]{1,6}"+ee+"?|("+ee+")|.)","ig"),ye=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},xe=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,be=function(e,t){return t?"\0"===e?"�":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},we=function(){A()},Te=p(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{Q.apply(V=J.call(I.childNodes),I.childNodes),V[I.childNodes.length].nodeType}catch(e){Q={apply:V.length?function(e,t){Y.apply(e,J.call(t))}:function(e,t){for(var n=e.length,r=0;e[n++]=t[r++];);e.length=n-1}}}b=t.support={},C=t.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},A=t.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:I;return r!==q&&9===r.nodeType&&r.documentElement?(q=r,L=q.documentElement,H=!C(q),I!==q&&(n=q.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",we,!1):n.attachEvent&&n.attachEvent("onunload",we)),b.attributes=i(function(e){return e.className="i",!e.getAttribute("className")}),b.getElementsByTagName=i(function(e){return e.appendChild(q.createComment("")),!e.getElementsByTagName("*").length}),b.getElementsByClassName=he.test(q.getElementsByClassName),b.getById=i(function(e){return L.appendChild(e).id=M,!q.getElementsByName||!q.getElementsByName(M).length}),b.getById?(w.filter.ID=function(e){var t=e.replace(me,ye);return function(e){return e.getAttribute("id")===t}},w.find.ID=function(e,t){if(void 0!==t.getElementById&&H){var n=t.getElementById(e);return n?[n]:[]}}):(w.filter.ID=function(e){var t=e.replace(me,ye);return function(e){var n=void 0!==e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},w.find.ID=function(e,t){if(void 0!==t.getElementById&&H){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];for(i=t.getElementsByName(e),r=0;o=i[r++];)if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),w.find.TAG=b.getElementsByTagName?function(e,t){return void 0!==t.getElementsByTagName?t.getElementsByTagName(e):b.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){for(;n=o[i++];)1===n.nodeType&&r.push(n);return r}return o},w.find.CLASS=b.getElementsByClassName&&function(e,t){if(void 0!==t.getElementsByClassName&&H)return t.getElementsByClassName(e)},O=[],F=[],(b.qsa=he.test(q.querySelectorAll))&&(i(function(e){L.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&F.push("[*^$]="+ee+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||F.push("\\["+ee+"*(?:value|"+Z+")"),e.querySelectorAll("[id~="+M+"-]").length||F.push("~="),e.querySelectorAll(":checked").length||F.push(":checked"),e.querySelectorAll("a#"+M+"+*").length||F.push(".#.+[+~]")}),i(function(e){e.innerHTML="";var t=q.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&F.push("name"+ee+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&F.push(":enabled",":disabled"),L.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&F.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),F.push(",.*:")})),(b.matchesSelector=he.test(P=L.matches||L.webkitMatchesSelector||L.mozMatchesSelector||L.oMatchesSelector||L.msMatchesSelector))&&i(function(e){b.disconnectedMatch=P.call(e,"*"),P.call(e,"[s!='']:x"),O.push("!=",re)}),F=F.length&&new RegExp(F.join("|")),O=O.length&&new RegExp(O.join("|")),t=he.test(L.compareDocumentPosition),R=t||he.test(L.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)for(;t=t.parentNode;)if(t===e)return!0;return!1},X=t?function(e,t){if(e===t)return D=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1,1&n||!b.sortDetached&&t.compareDocumentPosition(e)===n?e===q||e.ownerDocument===I&&R(I,e)?-1:t===q||t.ownerDocument===I&&R(I,t)?1:j?K(j,e)-K(j,t):0:4&n?-1:1)}:function(e,t){if(e===t)return D=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,s=[e],u=[t];if(!i||!o)return e===q?-1:t===q?1:i?-1:o?1:j?K(j,e)-K(j,t):0;if(i===o)return a(e,t);for(n=e;n=n.parentNode;)s.unshift(n);for(n=t;n=n.parentNode;)u.unshift(n);for(;s[r]===u[r];)r++;return r?a(s[r],u[r]):s[r]===I?-1:u[r]===I?1:0},q):q},t.matches=function(e,n){return t(e,null,null,n)},t.matchesSelector=function(e,n){if((e.ownerDocument||e)!==q&&A(e),n=n.replace(ue,"='$1']"),b.matchesSelector&&H&&!z[n+" "]&&(!O||!O.test(n))&&(!F||!F.test(n)))try{var r=P.call(e,n);if(r||b.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return t(n,q,null,[e]).length>0},t.contains=function(e,t){return(e.ownerDocument||e)!==q&&A(e),R(e,t)},t.attr=function(e,t){(e.ownerDocument||e)!==q&&A(e);var n=w.attrHandle[t.toLowerCase()],r=n&&U.call(w.attrHandle,t.toLowerCase())?n(e,t,!H):void 0;return void 0!==r?r:b.attributes||!H?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},t.escape=function(e){return(e+"").replace(xe,be)},t.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},t.uniqueSort=function(e){var t,n=[],r=0,i=0;if(D=!b.detectDuplicates,j=!b.sortStable&&e.slice(0),e.sort(X),D){for(;t=e[i++];)t===e[i]&&(r=n.push(i));for(;r--;)e.splice(n[r],1)}return j=null,e},T=t.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=T(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r++];)n+=T(t);return n},w=t.selectors={cacheLength:50,createPseudo:r,match:fe,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(me,ye),e[3]=(e[3]||e[4]||e[5]||"").replace(me,ye),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||t.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&t.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return fe.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&le.test(n)&&(t=E(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(me,ye).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=B[e+" "];return t||(t=new RegExp("(^|"+ee+")"+e+"("+ee+"|$)"))&&B(e,function(e){return t.test("string"==typeof e.className&&e.className||void 0!==e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,n,r){return function(i){var o=t.attr(i,e);return null==o?"!="===n:!n||(o+="","="===n?o===r:"!="===n?o!==r:"^="===n?r&&0===o.indexOf(r):"*="===n?r&&o.indexOf(r)>-1:"$="===n?r&&o.slice(-r.length)===r:"~="===n?(" "+o.replace(ie," ")+" ").indexOf(r)>-1:"|="===n&&(o===r||o.slice(0,r.length+1)===r+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,f,p,d,h,g=o!==a?"nextSibling":"previousSibling",v=t.parentNode,m=s&&t.nodeName.toLowerCase(),y=!u&&!s,x=!1;if(v){if(o){for(;g;){for(p=t;p=p[g];)if(s?p.nodeName.toLowerCase()===m:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?v.firstChild:v.lastChild],a&&y){for(p=v,f=p[M]||(p[M]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),l=c[e]||[],d=l[0]===W&&l[1],x=d&&l[2],p=d&&v.childNodes[d];p=++d&&p&&p[g]||(x=d=0)||h.pop();)if(1===p.nodeType&&++x&&p===t){c[e]=[W,d,x];break}}else if(y&&(p=t,f=p[M]||(p[M]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),l=c[e]||[],d=l[0]===W&&l[1],x=d),!1===x)for(;(p=++d&&p&&p[g]||(x=d=0)||h.pop())&&((s?p.nodeName.toLowerCase()!==m:1!==p.nodeType)||!++x||(y&&(f=p[M]||(p[M]={}),c=f[p.uniqueID]||(f[p.uniqueID]={}),c[e]=[W,x]),p!==t)););return(x-=i)===r||x%r==0&&x/r>=0}}},PSEUDO:function(e,n){var i,o=w.pseudos[e]||w.setFilters[e.toLowerCase()]||t.error("unsupported pseudo: "+e);return o[M]?o(n):o.length>1?(i=[e,e,"",n],w.setFilters.hasOwnProperty(e.toLowerCase())?r(function(e,t){for(var r,i=o(e,n),a=i.length;a--;)r=K(e,i[a]),e[r]=!(t[r]=i[a])}):function(e){return o(e,0,i)}):o}},pseudos:{not:r(function(e){var t=[],n=[],i=k(e.replace(oe,"$1"));return i[M]?r(function(e,t,n,r){for(var o,a=i(e,null,r,[]),s=e.length;s--;)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,r,o){return t[0]=e,i(t,null,o,n),t[0]=null,!n.pop()}}),has:r(function(e){return function(n){return t(e,n).length>0}}),contains:r(function(e){return e=e.replace(me,ye),function(t){return(t.textContent||t.innerText||T(t)).indexOf(e)>-1}}),lang:r(function(e){return ce.test(e||"")||t.error("unsupported lang: "+e),e=e.replace(me,ye).toLowerCase(),function(t){var n;do{if(n=H?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===L},focus:function(e){return e===q.activeElement&&(!q.hasFocus||q.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:s(!1),disabled:s(!0),checked:function(e){ var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!w.pseudos.empty(e)},header:function(e){return de.test(e.nodeName)},input:function(e){return pe.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:u(function(){return[0]}),last:u(function(e,t){return[t-1]}),eq:u(function(e,t,n){return[n<0?n+t:n]}),even:u(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:u(function(e,t,n){for(var r=n<0?n+t:n;++r2&&"ID"===(a=o[0]).type&&9===t.nodeType&&H&&w.relative[o[1].type]){if(!(t=(w.find.ID(a.matches[0].replace(me,ye),t)||[])[0]))return n;c&&(t=t.parentNode),e=e.slice(o.shift().value.length)}for(i=fe.needsContext.test(e)?0:o.length;i--&&(a=o[i],!w.relative[s=a.type]);)if((u=w.find[s])&&(r=u(a.matches[0].replace(me,ye),ve.test(o[0].type)&&l(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&f(o)))return Q.apply(n,r),n;break}}return(c||k(e,p))(r,t,!H,n,!t||ve.test(e)&&l(t.parentNode)||t),n},b.sortStable=M.split("").sort(X).join("")===M,b.detectDuplicates=!!D,A(),b.sortDetached=i(function(e){return 1&e.compareDocumentPosition(q.createElement("fieldset"))}),i(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||o("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),b.attributes&&i(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||o("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),i(function(e){return null==e.getAttribute("disabled")})||o(Z,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),t}(e);he.find=xe,he.expr=xe.selectors,he.expr[":"]=he.expr.pseudos,he.uniqueSort=he.unique=xe.uniqueSort,he.text=xe.getText,he.isXMLDoc=xe.isXML,he.contains=xe.contains,he.escapeSelector=xe.escape;var be=function(e,t,n){for(var r=[],i=void 0!==n;(e=e[t])&&9!==e.nodeType;)if(1===e.nodeType){if(i&&he(e).is(n))break;r.push(e)}return r},we=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},Te=he.expr.match.needsContext,Ce=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i,Ee=/^.[^:#\[\.,]*$/;he.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?he.find.matchesSelector(r,e)?[r]:[]:he.find.matches(e,he.grep(t,function(e){return 1===e.nodeType}))},he.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(he(e).filter(function(){for(t=0;t1?he.uniqueSort(n):n},filter:function(e){return this.pushStack(o(this,e||[],!1))},not:function(e){return this.pushStack(o(this,e||[],!0))},is:function(e){return!!o(this,"string"==typeof e&&Te.test(e)?he(e):e||[],!1).length}});var ke,Se=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(he.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||ke,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:Se.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof he?t[0]:t,he.merge(this,he.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:ne,!0)),Ce.test(r[1])&&he.isPlainObject(t))for(r in t)he.isFunction(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return i=ne.getElementById(r[2]),i&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):he.isFunction(e)?void 0!==n.ready?n.ready(e):e(he):he.makeArray(e,this)}).prototype=he.fn,ke=he(ne);var Ne=/^(?:parents|prev(?:Until|All))/,je={children:!0,contents:!0,next:!0,prev:!0};he.fn.extend({has:function(e){var t=he(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&he.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?he.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?se.call(he(e),this[0]):se.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(he.uniqueSort(he.merge(this.get(),he(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),he.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return be(e,"parentNode")},parentsUntil:function(e,t,n){return be(e,"parentNode",n)},next:function(e){return a(e,"nextSibling")},prev:function(e){return a(e,"previousSibling")},nextAll:function(e){return be(e,"nextSibling")},prevAll:function(e){return be(e,"previousSibling")},nextUntil:function(e,t,n){return be(e,"nextSibling",n)},prevUntil:function(e,t,n){return be(e,"previousSibling",n)},siblings:function(e){return we((e.parentNode||{}).firstChild,e)},children:function(e){return we(e.firstChild)},contents:function(e){return i(e,"iframe")?e.contentDocument:(i(e,"template")&&(e=e.content||e),he.merge([],e.childNodes))}},function(e,t){he.fn[e]=function(n,r){var i=he.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=he.filter(r,i)),this.length>1&&(je[e]||he.uniqueSort(i),Ne.test(e)&&i.reverse()),this.pushStack(i)}});var De=/[^\x20\t\r\n\f]+/g;he.Callbacks=function(e){e="string"==typeof e?s(e):he.extend({},e);var t,n,r,i,o=[],a=[],u=-1,l=function(){for(i=i||e.once,r=t=!0;a.length;u=-1)for(n=a.shift();++u-1;)o.splice(n,1),n<=u&&u--}),this},has:function(e){return e?he.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=n||[],n=[e,n.slice?n.slice():n],a.push(n),t||l()),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!r}};return c},he.extend({Deferred:function(t){var n=[["notify","progress",he.Callbacks("memory"),he.Callbacks("memory"),2],["resolve","done",he.Callbacks("once memory"),he.Callbacks("once memory"),0,"resolved"],["reject","fail",he.Callbacks("once memory"),he.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},catch:function(e){return i.then(null,e)},pipe:function(){var e=arguments;return he.Deferred(function(t){he.each(n,function(n,r){var i=he.isFunction(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&he.isFunction(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){function o(t,n,r,i){return function(){var s=this,c=arguments,f=function(){var e,f;if(!(t=a&&(r!==l&&(s=void 0,c=[e]),n.rejectWith(s,c))}};t?p():(he.Deferred.getStackHook&&(p.stackTrace=he.Deferred.getStackHook()),e.setTimeout(p))}}var a=0;return he.Deferred(function(e){n[0][3].add(o(0,e,he.isFunction(i)?i:u,e.notifyWith)),n[1][3].add(o(0,e,he.isFunction(t)?t:u)),n[2][3].add(o(0,e,he.isFunction(r)?r:l))}).promise()},promise:function(e){return null!=e?he.extend(e,i):i}},o={};return he.each(n,function(e,t){var a=t[2],s=t[5];i[t[1]]=a.add,s&&a.add(function(){r=s},n[3-e][2].disable,n[0][2].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=ie.call(arguments),o=he.Deferred(),a=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?ie.call(arguments):n,--t||o.resolveWith(r,i)}};if(t<=1&&(c(e,o.done(a(n)).resolve,o.reject,!t),"pending"===o.state()||he.isFunction(i[n]&&i[n].then)))return o.then();for(;n--;)c(i[n],a(n),o.reject);return o.promise()}});var Ae=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;he.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&Ae.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},he.readyException=function(t){e.setTimeout(function(){throw t})};var qe=he.Deferred();he.fn.ready=function(e){return qe.then(e).catch(function(e){he.readyException(e)}),this},he.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--he.readyWait:he.isReady)||(he.isReady=!0,!0!==e&&--he.readyWait>0||qe.resolveWith(ne,[he]))}}),he.ready.then=qe.then,"complete"===ne.readyState||"loading"!==ne.readyState&&!ne.documentElement.doScroll?e.setTimeout(he.ready):(ne.addEventListener("DOMContentLoaded",f),e.addEventListener("load",f));var Le=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===he.type(n)){i=!0;for(s in n)Le(e,t,s,n[s],!0,o,a)}else if(void 0!==r&&(i=!0,he.isFunction(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(he(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){Oe.remove(this,e)})}}),he.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Fe.get(e,t),n&&(!r||Array.isArray(n)?r=Fe.access(e,t,he.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=he.queue(e,t),r=n.length,i=n.shift(),o=he._queueHooks(e,t),a=function(){he.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Fe.get(e,n)||Fe.access(e,n,{empty:he.Callbacks("once memory").add(function(){Fe.remove(e,[t+"queue",n])})})}}),he.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,Ue=/^$|\/(?:java|ecma)script/i,Ve={option:[1,""],thead:[1,"","
      "],col:[2,"","
      "],tr:[2,"","
      "],td:[3,"","
      "],_default:[0,"",""]};Ve.optgroup=Ve.option,Ve.tbody=Ve.tfoot=Ve.colgroup=Ve.caption=Ve.thead,Ve.th=Ve.td;var Ge=/<|&#?\w+;/;!function(){var e=ne.createDocumentFragment(),t=e.appendChild(ne.createElement("div")),n=ne.createElement("input");n.setAttribute("type","radio"),n.setAttribute("checked","checked"),n.setAttribute("name","t"),t.appendChild(n),de.checkClone=t.cloneNode(!0).cloneNode(!0).lastChild.checked,t.innerHTML="",de.noCloneChecked=!!t.cloneNode(!0).lastChild.defaultValue}();var Ye=ne.documentElement,Qe=/^key/,Je=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ke=/^([^.]*)(?:\.(.+)|)/;he.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Fe.get(e);if(v)for(n.handler&&(o=n,n=o.handler,i=o.selector),i&&he.find.matchesSelector(Ye,i),n.guid||(n.guid=he.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(t){return void 0!==he&&he.event.triggered!==t.type?he.event.dispatch.apply(e,arguments):void 0}),t=(t||"").match(De)||[""],l=t.length;l--;)s=Ke.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d&&(f=he.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=he.event.special[d]||{},c=he.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&he.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||(p=u[d]=[],p.delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),he.event.global[d]=!0)},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Fe.hasData(e)&&Fe.get(e);if(v&&(u=v.events)){for(t=(t||"").match(De)||[""],l=t.length;l--;)if(s=Ke.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){for(f=he.event.special[d]||{},d=(r?f.delegateType:f.bindType)||d,p=u[d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;o--;)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||he.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)he.event.remove(e,d+t[l],n,r,!0);he.isEmptyObject(u)&&Fe.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=he.event.fix(e),u=new Array(arguments.length),l=(Fe.get(this,"events")||{})[s.type]||[],c=he.event.special[s.type]||{};for(u[0]=s,t=1;t=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:he.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,et=/\s*$/g;he.extend({htmlPrefilter:function(e){return e.replace(Ze,"<$1>")},clone:function(e,t,n){var r,i,o,a,s=e.cloneNode(!0),u=he.contains(e.ownerDocument,e);if(!(de.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||he.isXMLDoc(e)))for(a=y(s),o=y(e),r=0,i=o.length;r0&&x(a,!u&&y(e,"script")),s},cleanData:function(e){for(var t,n,r,i=he.event.special,o=0;void 0!==(n=e[o]);o++)if(He(n)){if(t=n[Fe.expando]){if(t.events)for(r in t.events)i[r]?he.event.remove(n,r):he.removeEvent(n,r,t.handle);n[Fe.expando]=void 0}n[Oe.expando]&&(n[Oe.expando]=void 0)}}}),he.fn.extend({detach:function(e){return q(this,e,!0)},remove:function(e){return q(this,e)},text:function(e){return Le(this,function(e){return void 0===e?he.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return A(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){k(this,e).appendChild(e)}})},prepend:function(){return A(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=k(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return A(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return A(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(he.cleanData(y(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return he.clone(this,e,t)})},html:function(e){return Le(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!et.test(e)&&!Ve[(Xe.exec(e)||["",""])[1].toLowerCase()]){e=he.htmlPrefilter(e);try{for(;n1)}}),he.Tween=I,I.prototype={constructor:I,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||he.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(he.cssNumber[n]?"":"px")},cur:function(){var e=I.propHooks[this.prop];return e&&e.get?e.get(this):I.propHooks._default.get(this)},run:function(e){var t,n=I.propHooks[this.prop];return this.options.duration?this.pos=t=he.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):I.propHooks._default.set(this),this}},I.prototype.init.prototype=I.prototype,I.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=he.css(e.elem,e.prop,""),t&&"auto"!==t?t:0)},set:function(e){he.fx.step[e.prop]?he.fx.step[e.prop](e):1!==e.elem.nodeType||null==e.elem.style[he.cssProps[e.prop]]&&!he.cssHooks[e.prop]?e.elem[e.prop]=e.now:he.style(e.elem,e.prop,e.now+e.unit)}}},I.propHooks.scrollTop=I.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},he.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},he.fx=I.prototype.init,he.fx.step={};var dt,ht,gt=/^(?:toggle|show|hide)$/,vt=/queueHooks$/;he.Animation=he.extend(U,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return g(n.elem,e,Ie.exec(t),n),n}]},tweener:function(e,t){he.isFunction(e)?(t=e,e=["*"]):e=e.match(De);for(var n,r=0,i=e.length;r2&&0===r[t-1].length&&t--,r.length=t,r.join("/"))}function f(r,n){var t=n.split("/");return u(("/"==r?[""]:r.split("/")).concat(t))}function s(r){var n,t=r.lastIndexOf(".");return-1===t||-1!==(n=r.lastIndexOf("/"))&&n>t?null:r.substring(0,t)}function l(r){r=r.substring(1);var n=r.indexOf("/");"@"===r.charAt(1)&&(n=r.indexOf("/",n+1));var t=-1===n?r.length:n;return[r.substring(0,t),r.substring(t)]}function c(r,n){"/"===r.charAt(r.length-1)&&(r=r.slice(0,-1));var t=M[r];if(t)return t;var i,e,o=l(n),a=o[0],u=r.indexOf("/");u<0?(i=r,e=""):("@"===r.charAt(0)&&(u=r.indexOf("/",u+1)),i=r.substring(0,u),e=r.substring(u));var f=I[a+"/"+i];if(f){var s="/"+i+"$"+f;return e&&(s+=e),s}}function v(r,n){var t;if("."===r.charAt(0))t=f(n,r);else if("/"===r.charAt(0))t=u(r.split("/"));else{for(var i=m.length,e=0;e1&&void 0!==arguments[1]&&arguments[1],n=Array.prototype.slice.call(e.querySelectorAll(a));return n=n.filter(function(e){return"none"!==window.getComputedStyle(e).display}),!0===t&&(n=n.filter(function(e){return"-1"!==e.getAttribute("tabindex")})),n}}); $_mod.def("/makeup-expander$0.3.0/index",function(t,e,s,i,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function h(t){var e=t.keyCode;13!==e&&32!==e||(this.keyDownFlag=!0,32===e&&!0===this.options.spacebar&&this.hostEl.click())}var a=Object.assign||function(t){for(var e=1;e=32&&e.keyCode<=36||38===e.keyCode||40===e.keyCode)&&e.preventDefault()}function i(e){e.addEventListener("keydown",r)}function k(e){e.removeEventListener("keydown",r)}o.exports={add:i,remove:k}}); -$_mod.def("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main",function(e,t,n,o,r){function a(e){return Array.prototype.slice.call(e)}var c=e("/makeup-expander$0.3.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),l=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");a(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),a(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),a(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),a(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new c(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});l.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),a(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),a(document.querySelectorAll(".listbox")).forEach(function(e,t){var n,o=new c(e,{autoCollapse:!0,click:!0,hostSelector:"input[role=combobox]",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0}),r=e.querySelector("input[role=combobox]"),i=a(e.querySelectorAll("[role=option]")),d=e.querySelector("[role=option][aria-selected=true]"),s=i.length,f=function(e){d.setAttribute("aria-selected","false"),n=e,r.value="Option "+(n+1),d=i[n],d.setAttribute("aria-selected","true")};i.forEach(function(e,t){e.dataset.listboxIndex=t,e.addEventListener("click",function(e){f(parseInt(this.dataset.listboxIndex,10))})}),n=parseInt(d.dataset.listboxIndex,10),l.addKeyDown(e),u.add(e),e.addEventListener("escapeKeyDown",function(){o.collapse(),r.focus()}),e.addEventListener("arrowDownKeyDown",function(e){n0&&f(n-1)})})}); -$_mod.run("/@ebay/skin$3.3.0-0/docs/src/js/ds6/main"); \ No newline at end of file +$_mod.def("/@ebay/skin$3.3.0/docs/src/js/ds6/main",function(e,t,n,o,r){function a(e){return Array.prototype.slice.call(e)}var c=e("/makeup-expander$0.3.0/index"),i=e("/makeup-roving-tabindex$0.0.3/index"),l=e("/makeup-key-emitter$0.0.2/index"),u=e("/makeup-prevent-scroll-keys$0.0.1/index");a(document.querySelectorAll('.btn:not([aria-disabled="true"])')).forEach(function(e,t){e.addEventListener("click",function(e){alert("You clicked "+this)})}),a(document.querySelectorAll(".expand-btn-example")).forEach(function(e,t){e.addEventListener("click",function(e){var t="true"===this.getAttribute("aria-expanded");this.setAttribute("aria-expanded",!t)})}),a(document.querySelectorAll("[role=menu]")).forEach(function(e,t){i.createLinear(e,"[role^=menuitem]",{autoReset:0})}),a(document.querySelectorAll(".menu, .fake-menu")).forEach(function(e,t){new c(e,{autoCollapse:!0,click:!0,focusManagement:"interactive",hostSelector:".expand-btn",contentSelector:".menu__items, .fake-menu__items"});l.addKeyDown(e),e.addEventListener("escapeKeyDown",function(){this.querySelector(".expand-btn").focus()})}),a(document.querySelectorAll("[role^=menuitem]")).forEach(function(e,t){u.add(e)}),a(document.querySelectorAll(".listbox")).forEach(function(e,t){var n,o=new c(e,{autoCollapse:!0,click:!0,hostSelector:"input[role=combobox]",hostContainerClass:"listbox__control",contentSelector:".listbox__options",spacebar:!0}),r=e.querySelector("input[role=combobox]"),i=a(e.querySelectorAll("[role=option]")),d=e.querySelector("[role=option][aria-selected=true]"),s=i.length,f=function(e){d.setAttribute("aria-selected","false"),n=e,r.value="Option "+(n+1),d=i[n],d.setAttribute("aria-selected","true")};i.forEach(function(e,t){e.dataset.listboxIndex=t,e.addEventListener("click",function(e){f(parseInt(this.dataset.listboxIndex,10))})}),n=parseInt(d.dataset.listboxIndex,10),l.addKeyDown(e),u.add(e),e.addEventListener("escapeKeyDown",function(){o.collapse(),r.focus()}),e.addEventListener("arrowDownKeyDown",function(e){n0&&f(n-1)})})}); +$_mod.run("/@ebay/skin$3.3.0/docs/src/js/ds6/main"); \ No newline at end of file diff --git a/docs/static/ds6/skin.css b/docs/static/ds6/skin.css index e06d2a470..3f1102a56 100644 --- a/docs/static/ds6/skin.css +++ b/docs/static/ds6/skin.css @@ -1,5 +1,5 @@ /*! -Skin v3.3.0-0 +Skin v3.3.0 Copyright 2017 eBay! Inc. All rights reserved. Licensed under the BSD License. https://github.com/eBay/skin/blob/master/LICENSE.txt"