Open ghost opened 7 years ago
Maybe open a v2 branch for this?
Yes please
On Oct 18, 2017 8:32 PM, "KIP" notifications@github.com 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 https://github.com/x-tag/tabbox/issues/1#issuecomment-337790072, or mute the thread https://github.com/notifications/unsubscribe-auth/AAICys0JLxb0-78Tjxe0hkc0LuSgTQeXks5stsLmgaJpZM4P-p4A .
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?
alright I just got the demo up and running I'm going to make a pull request soon....After some COD....:)
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 https://github.com/x-tag/tabbox/issues/2
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
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 */} );
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.
Also are you still using the same component stub?
It hasn't been updated from v1, but probably needs to be.
On Wed, May 23, 2018, 6:01 PM KIP notifications@github.com 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 https://github.com/x-tag/tabbox/issues/1#issuecomment-391554190, or mute the thread https://github.com/notifications/unsubscribe-auth/AAICyhCAv8_bco3fwk77Sdxp_rvtp2hzks5t1gZYgaJpZM4P-p4A .
Its all the same except for the selectEvent gets wrapped around an event function.
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?
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
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
@csuwildcat do you want a pull request for a v2 version?