Permalink
Browse files

Initial add of current tags from the main X-Tag library repo

  • Loading branch information...
0 parents commit 1882138a082f38d4b7322f75cbb0d8b3f372c076 @csuwildcat csuwildcat committed Jul 6, 2012
@@ -0,0 +1,35 @@
+
+x-accordion, x-accordion x-toggler, x-accordion > * {
+ display: block;
+ display: box;
+ display: -o-box;
+ display: -ms-box;
+ display: -moz-box;
+ display: -webkit-box;
+ box-orient: vertical;
+ -o-box-orient: vertical;
+ -ms-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -webkit-box-orient: vertical;
+}
+
+x-accordion x-toggler {
+ cursor: default;
+}
+
+x-accordion x-toggler[selected="true"] {
+ text-decoration: underline;
+}
+
+x-accordion > * {
+ display: none;
+}
+
+x-accordion x-toggler[selected="true"] + * {
+ display: block;
+ display: box;
+ display: -o-box;
+ display: -ms-box;
+ display: -moz-box;
+ display: -webkit-box;
+}
@@ -0,0 +1,46 @@
+
+xtag.register('x-accordion', {
+ events: {
+ 'tap:delegate(x-toggler)': function(event){
+ this.xtag.selectToggler();
+ }
+ },
+ methods: {
+ getSelectedIndex: function(){
+ return xtag.query(this, 'x-toggler').indexOf(this.querySelector('x-toggler[selected="true"]'));
+ },
+ getSelectedToggler: function(){
+ return xtag.query(this, 'x-toggler[selected="true"]')[0];
+ },
+ nextToggler: function(){
+ var togglers = xtag.query(this.parentNode, 'x-toggler');
+ if (togglers[0]) (togglers[this.xtag.getSelectedIndex() + 1] || togglers[0]).xtag.selectToggler();
+ },
+ previousToggler: function(){
+ var togglers = xtag.query(this.parentNode, 'x-toggler');
+ if (togglers[0]) (togglers[this.xtag.getSelectedIndex() - 1] || togglers.pop()).xtag.selectToggler();
+ }
+ }
+});
+
+xtag.register('x-toggler', {
+ onCreate: function(){
+ this.setAttribute('tabindex', 0);
+ },
+ events: {
+ 'keydown': function(event){
+ switch(event.keyCode) {
+ case 13: this.xtag.selectToggler(); break;
+ case 37: this.parentNode.xtag.previousToggler(); break;
+ case 39: this.parentNode.xtag.nextToggler(); break;
+ }
+ }
+ },
+ methods: {
+ selectToggler: function(){
+ xtag.query(this.parentNode, 'x-toggler').forEach(function(el){
+ el.setAttribute('selected', el == this ? true : null);
+ }, this);
+ }
+ }
+});
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8" />
+
+ <title>X-Tag - Accordion Test</title>
+
+ <link href="../../demo/images/shortcut.png" rel="shortcut icon" type="image/x-icon" />
+ <link rel="stylesheet" type="text/css" href="../../demo/css/reset.css" />
+ <link rel="stylesheet" type="text/css" href="accordion.css" />
+ <script type="text/javascript" src="../../x-tag.js"></script>
+ <script type="text/javascript" src="accordion.js"></script>
+
+ <style>
+ #accordion {
+ width: 300px;
+ margin: 50px;
+ }
+ </style>
+ </head>
+
+<body>
+
+
+ <nav class="actions">
+ <button data-action-type="addSection">Add Section</button>
+ <button data-action-type="previousToggler"><-- Select Previous Section</button>
+ <button data-action-type="nextToggler">Select Next Section --></button>
+ </nav>
+
+ <x-accordion id="accordion" class="style">
+ <x-toggler selected="true">Toggler 1</x-toggler>
+ <div>
+ <p>
+ Tabboxes are great for showing users only the content they need to see, while providing users an easy way to access additional content on-demand.
+ </p>
+ </div>
+
+ <x-toggler>Toggler 2</x-toggler>
+ <div>
+ <p>
+ Examples of use-cases for tabboxes include: a set of step-wise directions, grouping like content elements together, or as a building block for a tabbed viewing interface in a mobile web app.
+ </p>
+ </div>
+
+ <x-toggler>Toggler 3</x-toggler>
+ <div>
+ <p>
+ In short, tabboxes are pretty freaking cool, and when you pair them with CSS animations/transitions, you can do things with a few styles that used to take a ton of JavaScript and custom code.
+ </p>
+ </div>
+ </x-accordion>
+</body>
+
+<script type="text/javascript">
+
+ document.addEventListener('click', function(e){
+
+ var action = e.target,
+ parent = action.parentNode,
+ actionType = action.getAttribute('data-action-type');
+
+ if (actionType) {
+
+
+ var tag = action.parentElement.nextElementSibling.id,
+ demo = document.getElementById(tag);
+
+ switch(actionType) {
+
+ case 'addSection':
+ toggler = document.createElement('x-toggler'),
+ div = document.createElement('div'),
+ length = xtag.query(demo, 'x-toggler').length;
+
+ toggler.textContent = 'Toggler ' + (length + 1);
+ demo.appendChild(toggler);
+
+ div.innerHTML = 'This panel was added dynamically, it shows when you click on the toggler element above entitled "Toggler ' + (length + 1) + '"';
+ demo.appendChild(div);
+
+ toggler.xtag.selectToggler();
+ break;
+
+ case 'previousToggler':
+ demo.xtag.previousToggler();
+ break;
+
+ case 'nextToggler':
+ demo.xtag.nextToggler();
+ break;
+ }
+ }
+
+ }, false);
+
+</script>
+
+</html>
@@ -0,0 +1,88 @@
+
+x-actionbar {
+ width: 100%;
+ display: box;
+ display: -o-box;
+ display: -ms-box;
+ display: -moz-box;
+ display: -webkit-box;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+}
+
+x-actionbar x-action[for] {
+ display: none;
+}
+
+x-action {
+ display: block;
+ text-align: center;
+ box-flex: 1;
+ -o-box-flex: 1;
+ -ms-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-box-flex: 1;
+}
+
+x-action img{
+ display: block;
+ height: auto;
+ margin: 0 auto;
+}
+
+x-action label {
+ text-align: center;
+ font-size: 80%;
+}
+
+x-actionbar[data-action-style="icon"] > x-action img {
+
+}
+
+x-actionbar[data-action-style="icon"] > x-action label {
+ display: none;
+}
+
+x-actionbar[data-action-style="text"] > x-action img {
+ display: none;
+}
+
+x-actionbar[data-action-style="text"] > x-action label {
+ font-size: 100%;
+}
+
+x-action[data-action-style="icon"] img {
+
+}
+
+x-action[data-action-style="icon"] label {
+ display: none;
+}
+
+x-action[data-action-style="text"] img {
+ display: none;
+}
+
+x-action[data-action-style="text"] label {
+ font-size: 100%;
+}
+
+
+/*** MODAL STYLES ***/
+
+x-modal[data-action-group-modal] {
+ background: #fff;
+ z-index: 1000;
+}
+
+x-modal[data-action-group-modal] x-action {
+ display: table;
+}
+
+x-modal[data-action-group-modal] x-action img, x-modal[data-action-group-modal] x-action label {
+ display: table-cell;
+ vertical-align: middle;
+}
@@ -0,0 +1,76 @@
+
+(function(){
+
+ xtag.register('x-actionbar', {
+ events: {
+ 'command:delegate(x-action)': function(e){
+ var group = this.getAttribute('group'),
+ actions = group ? xtag.query(this.parentNode, '[for="' + group + '"]') : false,
+ modal = document.querySelector('[data-action-group-modal="' + group + '"]'),
+ command = this.getAttribute('command'),
+ node = (document.getElementById(this.getAttribute('data-modal-target')) || document.body);
+
+ if (actions && !modal){
+ var overlay = document.createElement('x-overlay');
+ overlay.setAttribute('data-click-remove', true);
+ node.appendChild(overlay);
+
+ modal = document.createElement('x-modal');
+ modal.setAttribute('data-overlay', true);
+ modal.setAttribute('data-action-group-modal', group);
+ xtag.addEvents(overlay,{
+ 'command:delegate(x-action)': function(e){
+ var cmd = this.getAttribute('command');
+ actions.forEach(function(action){
+ if(action.getAttribute('command') == cmd){
+ xtag.fireEvent(action, 'command', { command: cmd });
+ }
+ });
+ e.stopImmediatePropagation();
+ },
+ 'modalhide': function(){
+ node.removeChild(overlay);
+ }
+ });
+ actions.forEach(function(action){
+ modal.appendChild(action.cloneNode(false));
+ });
+ overlay.appendChild(modal);
+ }
+ else if (modal) {
+ node.removeChild(modal.parentNode);
+ }
+ }
+ }
+ });
+
+
+
+ var onCommand = function(e){
+ xtag.fireEvent(this, 'command', { command: this.getAttribute('command') });
+ }
+
+ xtag.register('x-action', {
+ content: '<img /><label></label>',
+ onCreate: function(){
+ this.setAttribute('tabindex', 0);
+ this.label = this.getAttribute('label');
+ this.src = this.getAttribute('src');
+ },
+ events: {
+ 'tap': onCommand,
+ 'keyup:keypass(13)': onCommand,
+ },
+ setters: {
+ 'src': function(src){
+ this.firstElementChild.src = src;
+ this.setAttribute('src', src);
+ },
+ 'label': function(html){
+ this.lastElementChild.innerHTML = html;
+ this.setAttribute('label', html);
+ }
+ }
+ });
+
+})();
@@ -0,0 +1,36 @@
+
+x-autosuggest {
+ display: inline-block;
+ position: relative;
+ width: 100%;
+}
+
+x-autosuggest > input[type="text"] {
+ display: block;
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+}
+
+x-autosuggest > ul {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: #fff;
+}
+
+x-autosuggest ul[data-show-suggestions="true"] {
+ display: block;
+}
+
+x-autosuggest > ul > li:hover {
+ text-decoration: underline;
+}
+
+x-autosuggest > ul > li[selected="true"] {
+ text-decoration: underline;
+}
Oops, something went wrong.

0 comments on commit 1882138

Please sign in to comment.