updated to v2 almost complete

[ghost]

@csuwildcat do you want a pull request for a v2 version?

[ghost]

Maybe open a v2 branch for this?

[csuwildcat]

Yes please

…

On Oct 18, 2017 8:32 PM, "KIP" ***@***.***> wrote: Maybe open a v2 branch for this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAICys0JLxb0-78Tjxe0hkc0LuSgTQeXks5stsLmgaJpZM4P-p4A> .

[ghost]

Okay I just forked it. I'll probably make a pull request tonight.

Just got to move the x-toggle over to the x-tabbox.

-edit --always do this...found one that does the same thing

You interested in creating a x-toggle component repo here?

[ghost]

alright I just got the demo up and running I'm going to make a pull request soon....After some COD....:)

[ghost]

https://kipomaha.github.io/kipsTabbox/demo/index.html
^ Above is a link to the v2 demo. Without any style or event attributes on the tab box. See issue #2

[ghost]

I got a new PR that could go with alpha. It was part of a diff lib that I was building on my own. It was based off of what I saw in v2 from before => no custom elements or prototyping...but implemented a type=>mode hierarchy. You could add diff types and assign modes to those types. Info was passed to the object by using a build() function that read the functions return value.

In any case I made a cordial little box class toggle application part with it. It would be a simple matter to put it into v2-A.

Regards Steve

[ghost]

  var rules = {};
  var sheet = document.head.appendChild(document.createElement('style')).sheet;

  function selectTab(tabbox, tab){
    var previous = [], fireSelected = tab && !tab.hasAttribute('selected');
    xtag.queryChildren(tabbox, 'menu > [selected], ul > [selected]').forEach(function(node){
      previous.push(node);
      node.removeAttribute('selected');
    });
    tab.setAttribute('selected', '');
    var index = xtag.toArray(tab.parentNode.children).indexOf(tab);
    if (index != tabbox.selectedIndex) tabbox.selectedIndex = index;
    if (!rules[index]) {
      rules[index] = 1;
      var transform = 'transform: translateX(' + (index * -100) + '%);';
      sheet.insertRule('x-tabbox[selected-index="' + index + '"] > ul > li:nth-of-type(' + (index + 1) + '){ opacity: 1; z-index: 1; ' + xtag.prefix.css + transform + transform + '}', sheet.cssRules.length);
    }
    var panel = xtag.queryChildren(tabbox, 'ul > li')[index];
    if (panel) panel.setAttribute('selected', '');
    if (fireSelected) xtag.fireEvent(tabbox, 'tabselected', {
      detail: {
        currentTab: tab,
        currentPanel: panel,
        previousTab: previous[0],
        previousPanel: previous[1]
      }
    })
  };

  function selectEvent(e){
    if (this.parentNode && this.parentNode.parentNode == e.currentTarget) selectTab(e.currentTarget, this);
  };

  function createAccessor(selector){
    return {
      get: function(){
        return xtag.queryChildren(this, selector)[0];
      }
    }
  };

/* ** @NAME: X-TABBOX
  * @DESCRIPTION: V2 VERSION
* **/
const tabbox = xtag.extensions.tabbox = {
	name: "tabbox",
	mixin: (base) => class extends base {
		constructor(){
			super();
			// SETUP THE TABBOX API
			this.tabbox ? this.tabbox = {} : true;
		}
		get 'tabElements::attr'(){
			return xtag.queryChildren(this, 'menu > *');
		}
		set 'tabElements::attr'(nm){
			return nm;
		}
		get 'panelElements::attr'(){
			return xtag.queryChildren(this, 'ul');
		}
		set 'panelElements::attr'(_panel){
			return _panel;
		}
		get 'selectedIndex::attr'(){
			return xtag.queryChildren(this, 'ul');
		}
		set 'selectedIndex::attr'(_index){
            var index = Number(_index),
				tab = xtag.queryChildren(this, 'menu > *')[index],
				_r = tab ? index : -1;

				selectTab(this, xtag.queryChildren(this, 'menu > *')[_r])
		}
		'tap::event:delegate(x-tabbox > menu > *)'(e){
			selectEvent(e);
		}
		'keydown::event:delegate(x-tabbox > menu > *):keypass(a3, 32)'(e){
			selectEvent(e);
		}
	},
    selectedTab: createAccessor('menu > [selected]'),
    selectedPanel: createAccessor('ul > [selected]')
};

xtag.create("x-tabbox", class extends XTagElement.extensions("tabbox") { /* To Do: Build More of the x-tabbox */} ); 

[ghost]

Not that you wanted to look at that in this form, but could you let me know if you want this as a PR. So you can take a better look.

[ghost]

Also are you still using the same component stub?

[csuwildcat]

It hasn't been updated from v1, but probably needs to be.

…

On Wed, May 23, 2018, 6:01 PM KIP ***@***.***> wrote: Also are you still using the same component stub? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAICyhCAv8_bco3fwk77Sdxp_rvtp2hzks5t1gZYgaJpZM4P-p4A> .

[ghost]

Its all the same except for the selectEvent gets wrapped around an event function.

[ghost]

what do you think of using the extensions like that or should I just pass the definition straight through VIA create.

I was going to do it the direct way, but decided that people could use the create method
to write a tabbox component that extends the tabbox extension definition.

I was think that this would be a good way to get contributors to extend V1 components a little bit more creatively. What do you think?

[ghost]

Than again I think that XTagElement is all you need for that too lol.. there are so many ways to do things with this one @csuwildcat

[ghost]

The keyboard shortcuts don't go backwards only forwards. I don't know if this is intended behavior I think it is.

Would you accept a pull request where you press left or right and enter so the direction can be controlled instead of tab + enter?

I am updating x-tabbox to react that way in V2 so it deviates from the specs from v1.

EDIT: meant tab and left or right arrow, but I think that it would be better to not override normal browser behavior and use ctl + arrow