Browse Source

change trs to xts

pull/11/head
A1Gard 3 years ago
parent
commit
3dfe3b6ea2
10 changed files with 232 additions and 230 deletions
  1. +1
    -1
      .gitignore
  2. +18
    -18
      dist/x-tree-select.css
  3. +86
    -86
      dist/x-tree-select.js
  4. +1
    -1
      dist/x-tree-select.min.css
  5. +1
    -1
      dist/x-tree-select.min.js
  6. +3
    -3
      src/themes/xts-bootstrap-theme.css
  7. +6
    -6
      src/themes/xts-materialize-theme.css
  8. +6
    -6
      src/themes/xts-semantic-ui-theme.css
  9. +21
    -21
      src/x-tree-select.css
  10. +89
    -87
      src/x-tree-select.js

+ 1
- 1
.gitignore View File

@ -32,7 +32,7 @@ coverage
bower_components
# node-waf configuration
.lock-trslript
.lock-xtslript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

+ 18
- 18
dist/x-tree-select.css View File

@ -1,4 +1,4 @@
.trsel{
.xtsel{
border: 1px solid silver;
padding: 5px;
text-align: center;
@ -7,7 +7,7 @@
position: relative;
}
#trsel-list{
#xtsel-list{
border: gray 1px solid;
width: 100%;
padding: 0;
@ -22,7 +22,7 @@
z-index: 99;
}
#trsel-list li{
#xtsel-list li{
padding: 4px;
border-bottom: 1px solid rgba(33,33,33,0.2);
display: block;
@ -31,15 +31,15 @@
overflow: hidden;
}
#trsel-list li:nth-child(even){
#xtsel-list li:nth-child(even){
background: #efefef;
}
#trsel-list li:last-child{
#xtsel-list li:last-child{
border: none;
}
#trsel-list li.trsel-childer{
#xtsel-list li.xtsel-childer{
background: transparent url("right.png") no-repeat;
background-position-x: calc(100% - 10px) ;
-ms-background-position-y: center;
@ -47,27 +47,27 @@
background-size: auto 50% ;
}
#trsel-list li:hover{
#xtsel-list li:hover{
background-color: #dbedff ;
}
#trsel-list li.trsel-back{
#xtsel-list li.xtsel-back{
background: white url("left.png") 5px no-repeat;
padding-left: 30px;
background-size: auto 50% ;
}
#trsel-list.xout{
#xtsel-list.xout{
transform-origin: center right;
transform-style: preserve-3d;
transform: translateX(-100%) rotateY(-180deg) skew(0deg) ;
}
#trsel-list.xfade li{
#xtsel-list.xfade li{
opacity: 0;
}
#trsel-list li{
#xtsel-list li{
-webkit-transition: all .55s linear;
-moz-transition: all .55s linear;
-o-transition: all .55s linear;
@ -75,7 +75,7 @@
max-height: 30px;
}
#trsel-list.xslide li{
#xtsel-list.xslide li{
max-height: 0;
overflow: hidden;
box-sizing: border-box;
@ -88,7 +88,7 @@
transition: all .6s linear;
}
.trsel-selectable{
.xtsel-selectable{
float: left;
width: 1.5em;
position: relative;
@ -101,25 +101,25 @@
/** rtl support css */
.trs-rtl{
.xts-rtl{
}
.trs-rtl li {
.xts-rtl li {
direction: rtl !important;
text-align: right !important;
}
.trs-rtl li.trsel-childer {
.xts-rtl li.xtsel-childer {
background-image: url("left.png") !important;
background-position-x: 10px !important;
}
.trs-rtl li.trsel-back {
.xts-rtl li.xtsel-back {
background-image: url("right.png") !important ;
background-position-x: calc(100% - 10px) !important;
padding-right: 30px !important;
}
.trs-rtl .trsel-selectable{
.xts-rtl .xtsel-selectable{
float: right;
margin-left: .7em;
margin-right: 0;

+ 86
- 86
dist/x-tree-select.js View File

@ -17,14 +17,14 @@
};
// set default store for setting
if ($.trsStore === undefined) {
if ($.xtsStore === undefined) {
$.scbCounter = -1;
$.trsStore = [];
$.xtsStore = [];
$.currentCounter = 0;
}
// make app var for use in plugin
$.trs = this;
$.xts = this;
// change plugin info
var settings = $.extend({
@ -63,9 +63,9 @@
// store setting for use
$.scbCounter++;
$.trsStore[$.scbCounter] = settings;
$.xtsStore[$.scbCounter] = settings;
// console.log($.trsStore);
// console.log($.xtsStore);
/**
* initial element
@ -85,63 +85,63 @@
// set rtl class if is rtl
var rtlClass = '';
if ($.trsStore[$.scbCounter].direction === 'rtl') {
rtlClass = 'trs-rtl';
if ($.xtsStore[$.scbCounter].direction === 'rtl') {
rtlClass = 'xts-rtl';
}
// init element for click for choose
$(self).parent().append('<div class="trsel ' + rtlClass + '" data-trcounter="' +
$(self).parent().append('<div class="xtsel ' + rtlClass + '" data-trcounter="' +
$.scbCounter + '" >' + placeholder + '</div>');
// initial idx for use in naviagion
settings.datatree = $.trs.makeId('1', settings.datatree);
settings.datatree = $.xts.makeId('1', settings.datatree);
// on click combowizard
$(self).parent().find('.trsel').bind('click.open', function (e) {
$(self).parent().find('.xtsel').bind('click.open', function (e) {
if (e.target !== this) {
return;
}
var trsel = $(this);
var xtsel = $(this);
if (trsel.hasClass("loading")) {
if (xtsel.hasClass("loading")) {
return;
}
trsel.addClass("loading");
xtsel.addClass("loading");
setTimeout(function () {
trsel.removeClass("loading");
xtsel.removeClass("loading");
}, 600);
$.currentCounter = $(this).data('trcounter');
$.lastx.title = $.trsStore[$.currentCounter].mainTitle;
$.lastx.title = $.xtsStore[$.currentCounter].mainTitle;
// check is open list
if (!$(this).hasClass('active')) {
$.trsStore[$.currentCounter].onOpen();
$.xtsStore[$.currentCounter].onOpen();
// find target for last value
$.trs.target = $(this).parent().find('input');
$.xts.target = $(this).parent().find('input');
// find select text position
$.trs.text = $(self).parent().find('.trsel');
$.xts.text = $(self).parent().find('.xtsel');
//if now list show list and countiniu
$(this).append('<ul id="trsel-list"></ul>');
if ($.trsStore[$.currentCounter].navx === undefined) {
$(this).append('<ul id="xtsel-list"></ul>');
if ($.xtsStore[$.currentCounter].navx === undefined) {
// show first list main cat in list
$.trs.showTree($.trsStore[$.currentCounter].datatree);
$.xts.showTree($.xtsStore[$.currentCounter].datatree);
} else {
$.lastx = $.trsStore[$.currentCounter].lastx;
$.navigatex = $.trsStore[$.currentCounter].navx;
$.trs.showTree($.trs.findTree($.trsStore[$.currentCounter].datatree, $.trsStore[$.currentCounter].lastx.id));
$.lastx = $.xtsStore[$.currentCounter].lastx;
$.navigatex = $.xtsStore[$.currentCounter].navx;
$.xts.showTree($.xts.findTree($.xtsStore[$.currentCounter].datatree, $.xtsStore[$.currentCounter].lastx.id));
}
// slide down list
$("#trsel-list").slideDown(function () {
$("#xtsel-list").slideDown(function () {
$(document).bind('click.handvarrsl', function (e) {
if (!$(e.target).is(".trsel-childer, .trsel-back")) {
$.trs.resetClose();
$("#trsel-list").slideUp(200, function () {
if (!$(e.target).is(".xtsel-childer, .xtsel-back")) {
$.xts.resetClose();
$("#xtsel-list").slideUp(200, function () {
$(this).remove();
});
$($.trs.text).removeClass('active');
$($.xts.text).removeClass('active');
}
e.preventDefault();
return false;
@ -157,19 +157,19 @@
// hide and remove list
$(this).removeClass('active');
$("#trsel-list").slideUp(100, function () {
// $.trs.resetClose();
$("#xtsel-list").slideUp(100, function () {
// $.xts.resetClose();
$(this).remove();
});
}
});
//reset
$(document).off('click', '#trsel-list li');
$(document).off('click', '#xtsel-list li');
// on click items
$(document).on('click', '#trsel-list li', function (e) {
$(document).on('click', '#xtsel-list li', function (e) {
// has child & no parent selecatble
if ($(this).hasClass('trsel-childer') && !$(e.target).hasClass('trsel-selectable')) {
if ($(this).hasClass('xtsel-childer') && !$(e.target).hasClass('xtsel-selectable')) {
// make navigation
var tmp = {
title: $.lastx.title,
@ -181,49 +181,49 @@
// transtion ;
$("#trsel-list").addClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").addClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
var xself = this;
var ax = setTimeout(function () {
// show child items
$.trs.showTree($.trs.findTree($.trsStore[$.currentCounter].datatree, $(xself).data('id')));
$.xts.showTree($.xts.findTree($.xtsStore[$.currentCounter].datatree, $(xself).data('id')));
// remove effect
$("#trsel-list").removeClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").removeClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
}, 600);
} else if ($(this).hasClass('trsel-back')) { // if click on back
} else if ($(this).hasClass('xtsel-back')) { // if click on back
if ($.navigatex[$.navigatex.length - 1] !== undefined) {
// roll back navigtaion to last
$.lastx.title = $.navigatex[$.navigatex.length - 1].title;
$.lastx.id = $.navigatex[$.navigatex.length - 1].id;
} else {
// check is navigation emoppty set def
$.lastx.title = $.trsStore[$.currentCounter].mainTitle;
$.lastx.title = $.xtsStore[$.currentCounter].mainTitle;
$.lastx.id = '';
}
// pop last navigation item
$.navigatex.pop();
// get parent list
var lst = $.trs.findTree($.trsStore[$.currentCounter].datatree, $(this).data('id'));
var lst = $.xts.findTree($.xtsStore[$.currentCounter].datatree, $(this).data('id'));
// if has not parent show main cat
$("#trsel-list").addClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").addClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
var ax = setTimeout(function () {
if (lst.length === 0) {
$.trs.showTree($.trsStore[$.currentCounter].datatree);
$.xts.showTree($.xtsStore[$.currentCounter].datatree);
} else {
// then show parent list
$.trs.showTree(lst);
$.xts.showTree(lst);
}
$("#trsel-list").removeClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").removeClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
}, 600);
} else { // choose|select value
// onChange event
$.trsStore[$.currentCounter].onChange({
value: $($.trs.target).val(),
text: $($.trs.text).clone() //clone the element
$.xtsStore[$.currentCounter].onChange({
value: $($.xts.target).val(),
text: $($.xts.text).clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
@ -233,28 +233,28 @@
text: $(this).text()
});
// set main input value
$($.trs.target).val($(this).data('value'));
$($.xts.target).val($(this).data('value'));
// set choosed test
$($.trs.text).text($(this).text());
$($.xts.text).text($(this).text());
// if selected is not first level store level & last titles
if ($.navigatex.length > 0) {
$.trsStore[$.currentCounter].navx = $.navigatex;
$.trsStore[$.currentCounter].lastx = $.lastx;
$.xtsStore[$.currentCounter].navx = $.navigatex;
$.xtsStore[$.currentCounter].lastx = $.lastx;
} else {
delete $.trsStore[$.currentCounter].navx;
delete $.trsStore[$.currentCounter].lastx;
delete $.xtsStore[$.currentCounter].navx;
delete $.xtsStore[$.currentCounter].lastx;
}
// remove active class and hide list
$($.trs.text).removeClass('active');
$($.xts.text).removeClass('active');
// onChange
$.trsStore[$.currentCounter].onSelect({
$.xtsStore[$.currentCounter].onSelect({
value: $(this).data('value'),
text: $(this).text(),
id: $(this).data('id'),
parent: $.lastx,
ancestors: $.navigatex
});
$("#trsel-list").slideUp(100, function () {
$("#xtsel-list").slideUp(100, function () {
$(this).remove();
});
}
@ -280,13 +280,13 @@
var prefix = base + '-' + (parseInt(ix) + 1);
itm.idx = prefix;
//if there is no child object, just create it
if (itm[$.trsStore[$.scbCounter].json.child] === undefined) {
itm[$.trsStore[$.scbCounter].json.child] = [];
if (itm[$.xtsStore[$.scbCounter].json.child] === undefined) {
itm[$.xtsStore[$.scbCounter].json.child] = [];
}
// if has child
if (itm[$.trsStore[$.scbCounter].json.child].length !== 0) {
if (itm[$.xtsStore[$.scbCounter].json.child].length !== 0) {
// recall this function for children
itm[$.trsStore[$.scbCounter].json.child] = $.trs.makeId(prefix, itm[$.trsStore[$.scbCounter].json.child]);
itm[$.xtsStore[$.scbCounter].json.child] = $.xts.makeId(prefix, itm[$.xtsStore[$.scbCounter].json.child]);
}
all.push(itm);
}
@ -301,34 +301,34 @@
this.showTree = function (list, cb) {
var content = '';
// clear li list
$("#trsel-list li").remove();
$("#xtsel-list li").remove();
// back button handle
// has parent need back button
if ($.navigatex.length !== 0) {
// if navigation is empity not need back button
var back = $.navigatex[$.navigatex.length - 1];
content += '<li class="trsel-back" data-id="' + back.id + '"> &nbsp;' + back.title + '</li>';
content += '<li class="xtsel-back" data-id="' + back.id + '"> &nbsp;' + back.title + '</li>';
}
// show list passed to function
for (var ix in list) {
var item = list[ix];
// ad childs
// check has child
var clsx = ' class="trsel-childer"';
var clsx = ' class="xtsel-childer"';
var select = '';
if (item[$.trsStore[$.currentCounter].json.child].length === 0) {
if (item[$.xtsStore[$.currentCounter].json.child].length === 0) {
clsx = ' class=""';
} else {
if ($.trsStore[$.currentCounter].selectablePrernt) {
var select = '<span class="trsel-selectable"></span>';
if ($.xtsStore[$.currentCounter].selectablePrernt) {
var select = '<span class="xtsel-selectable"></span>';
}
}
// li to list
content += '<li' + clsx + ' data-id="' + item.idx + '" data-value="' + item[$.trsStore[$.currentCounter].json.value] + '">' + select + item[$.trsStore[$.currentCounter].json.title] + '</li>';
content += '<li' + clsx + ' data-id="' + item.idx + '" data-value="' + item[$.xtsStore[$.currentCounter].json.value] + '">' + select + item[$.xtsStore[$.currentCounter].json.title] + '</li>';
}
$("#trsel-list").html(content);
$("#xtsel-list").html(content);
if (cb !== undefined) {
cb();
}
@ -347,14 +347,14 @@
for (var ix in list) {
var item = list[ix];
if (item.idx === idx) {
return item[$.trsStore[$.currentCounter].json.child];
return item[$.xtsStore[$.currentCounter].json.child];
}
}
// if not fond in first level each the childs
for (var ix in list) {
var item = list[ix];
if (item[$.trsStore[$.currentCounter].json.child].length !== 0) {
var tmp = $.trs.findTree(item[$.trsStore[$.currentCounter].json.child], idx);
if (item[$.xtsStore[$.currentCounter].json.child].length !== 0) {
var tmp = $.xts.findTree(item[$.xtsStore[$.currentCounter].json.child], idx);
// if found idx retrur
if (tmp.length !== 0) {
return tmp;
@ -380,35 +380,35 @@
if (parent != null) {
$.navigatex.push({
id: parent.idx,
title: parent[$.trsStore[c].json.title]
title: parent[$.xtsStore[c].json.title]
});
} else {
$.navigatex.push({
id: "",
title: $.trsStore[c].mainTitle
title: $.xtsStore[c].mainTitle
});
$.lastx.title = $.trsStore[c].mainTitle;
$.lastx.title = $.xtsStore[c].mainTitle;
$.lastx.id = '';
}
// each all
for (var ix in list) {
var item = list[ix];
if (item[$.trsStore[c].json.value] == val) {
if (item[$.xtsStore[c].json.value] == val) {
return item;
}
// if has child
if (item[$.trsStore[c].json.child] != undefined && item[$.trsStore[c].json.child].length > 0) {
if (item[$.xtsStore[c].json.child] != undefined && item[$.xtsStore[c].json.child].length > 0) {
// add last
$.lastx = {
id: item.idx,
title: item[$.trsStore[c].json.title]
title: item[$.xtsStore[c].json.title]
};
var back = this.findItem(item[$.trsStore[c].json.child], val, c, item);
var back = this.findItem(item[$.xtsStore[c].json.child], val, c, item);
if (back != false) {
return back;
}
}
// console.log($.trsStore[c].json.child);
// console.log($.xtsStore[c].json.child);
}
$.navigatex.pop();
@ -423,13 +423,13 @@
*/
this.setDefault = function (c, val) {
// find value
var back = $.trs.findItem($.trsStore[c].datatree, val, c);
var back = $.xts.findItem($.xtsStore[c].datatree, val, c);
// if is exits val
if (back != false) {
$.trsStore[c].lastx = $.lastx;
$.xtsStore[c].lastx = $.lastx;
$.navigatex.pop();
$.trsStore[c].navx = $.navigatex;
$("[data-trcounter='" + c + "']").text(back[$.trsStore[c].json.title]);
$.xtsStore[c].navx = $.navigatex;
$("[data-trcounter='" + c + "']").text(back[$.xtsStore[c].json.title]);
}
};
@ -437,11 +437,11 @@
* reset values on close
*/
this.resetClose = function () {
$.trsStore[$.currentCounter].onClose();
$.xtsStore[$.currentCounter].onClose();
// reset navagtion value
$.navigatex = [];
$.lastx = {
title: $.trsStore[$.currentCounter].mainTitle,
title: $.xtsStore[$.currentCounter].mainTitle,
id: ''
};
// reset docuemnt bind
@ -452,7 +452,7 @@
this.html(currentInnerText + " " + newValue)
};
this.each(function () {
$.trs.init(this);
$.xts.init(this);
});
return this;

+ 1
- 1
dist/x-tree-select.min.css View File

@ -1 +1 @@
.trsel{border:1px solid silver;padding:5px;text-align:center;border-radius:4px;cursor:pointer;position:relative}#trsel-list{border:gray 1px solid;width:100%;padding:0;position:absolute;display:none;list-style:none;top:45%;left:-1px;background:#fff;border-radius:0 0 6px 6px;overflow:hidden;z-index:99}#trsel-list li{padding:4px;border-bottom:1px solid rgba(33,33,33,.2);display:block;text-align:left;background:#fff;overflow:hidden}#trsel-list li:nth-child(even){background:#efefef}#trsel-list li:last-child{border:none}#trsel-list li.trsel-childer{background:transparent url(right.png) no-repeat;background-position-x:calc(100% - 10px);-ms-background-position-y:center;background-position-y:center;background-size:auto 50%}#trsel-list li:hover{background-color:#dbedff}#trsel-list li.trsel-back{background:#fff url(left.png) 5px no-repeat;padding-left:30px;background-size:auto 50%}#trsel-list.xout{transform-origin:center right;transform-style:preserve-3d;transform:translateX(-100%) rotateY(-180deg) skew(0)}#trsel-list.xfade li{opacity:0}#trsel-list li{-webkit-transition:all .55s linear;-moz-transition:all .55s linear;-o-transition:all .55s linear;transition:all .55s linear;max-height:30px}#trsel-list.xslide li{max-height:0;overflow:hidden;box-sizing:border-box;padding:0}.anim{-webkit-transition:all .6s linear;-moz-transition:all .6s linear;-o-transition:all .6s linear;transition:all .6s linear}.trsel-selectable{float:left;width:1.5em;position:relative;height:1em;background:transparent url(check-box.png) 5px no-repeat;background-size:auto 95%;background-position:center;margin-right:.7em}.trs-rtl li{direction:rtl!important;text-align:right!important}.trs-rtl li.trsel-childer{background-image:url(left.png)!important;background-position-x:10px!important}.trs-rtl li.trsel-back{background-image:url(right.png)!important;background-position-x:calc(100% - 10px)!important;padding-right:30px!important}.trs-rtl .trsel-selectable{float:right;margin-left:.7em;margin-right:0}
.xtsel{border:1px solid silver;padding:5px;text-align:center;border-radius:4px;cursor:pointer;position:relative}#xtsel-list{border:gray 1px solid;width:100%;padding:0;position:absolute;display:none;list-style:none;top:45%;left:-1px;background:#fff;border-radius:0 0 6px 6px;overflow:hidden;z-index:99}#xtsel-list li{padding:4px;border-bottom:1px solid rgba(33,33,33,.2);display:block;text-align:left;background:#fff;overflow:hidden}#xtsel-list li:nth-child(even){background:#efefef}#xtsel-list li:last-child{border:none}#xtsel-list li.xtsel-childer{background:transparent url(right.png) no-repeat;background-position-x:calc(100% - 10px);-ms-background-position-y:center;background-position-y:center;background-size:auto 50%}#xtsel-list li:hover{background-color:#dbedff}#xtsel-list li.xtsel-back{background:#fff url(left.png) 5px no-repeat;padding-left:30px;background-size:auto 50%}#xtsel-list.xout{transform-origin:center right;transform-style:preserve-3d;transform:translateX(-100%) rotateY(-180deg) skew(0)}#xtsel-list.xfade li{opacity:0}#xtsel-list li{-webkit-transition:all .55s linear;-moz-transition:all .55s linear;-o-transition:all .55s linear;transition:all .55s linear;max-height:30px}#xtsel-list.xslide li{max-height:0;overflow:hidden;box-sizing:border-box;padding:0}.anim{-webkit-transition:all .6s linear;-moz-transition:all .6s linear;-o-transition:all .6s linear;transition:all .6s linear}.xtsel-selectable{float:left;width:1.5em;position:relative;height:1em;background:transparent url(check-box.png) 5px no-repeat;background-size:auto 95%;background-position:center;margin-right:.7em}.xts-rtl li{direction:rtl!important;text-align:right!important}.xts-rtl li.xtsel-childer{background-image:url(left.png)!important;background-position-x:10px!important}.xts-rtl li.xtsel-back{background-image:url(right.png)!important;background-position-x:calc(100% - 10px)!important;padding-right:30px!important}.xts-rtl .xtsel-selectable{float:right;margin-left:.7em;margin-right:0}

+ 1
- 1
dist/x-tree-select.min.js
File diff suppressed because it is too large
View File


+ 3
- 3
src/themes/xts-bootstrap-theme.css View File

@ -20,7 +20,7 @@
* @link https://github.com/4xmen/x-tree-select
* @link https://www.npmjs.com/package/x-tree-select
*/
.trsel{
.xtsel{
background: white;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
@ -41,11 +41,11 @@
text-align: left;
}
.trs-rtl{
.xts-rtl{
text-align: right;
background-position-x:12px;
}
#trsel-list{
#xtsel-list{
top: 1.25rem;
}

+ 6
- 6
src/themes/xts-materialize-theme.css View File

@ -20,7 +20,7 @@
* @link https://github.com/4xmen/x-tree-select
* @link https://www.npmjs.com/package/x-tree-select
*/
.trsel{
.xtsel{
border-radius: 0;
background: white;
border: 0;
@ -38,15 +38,15 @@
background-size: 20px 20px;
background-image: url('data:image/svg+xml;charset=utf8,<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>');
}
.trsel:hover{
.xtsel:hover{
border-bottom: 1px solid #26a69a ;
}
.trs-rtl{
.xts-rtl{
background-position-x: 12px;
text-align: right;
}
#trsel-list {
#xtsel-list {
background: white;
border: 0;
border-radius: 0;
@ -55,13 +55,13 @@
top: 25px;
}
#trsel-list li{
#xtsel-list li{
background: white;
padding: 0 10px;
line-height: 40px !important;
max-height: none;
}
#trsel-list li:hover{
#xtsel-list li:hover{
background-color: rgba(38, 166, 154, 0.4);
}

+ 6
- 6
src/themes/xts-semantic-ui-theme.css View File

@ -20,7 +20,7 @@
* @link https://github.com/4xmen/x-tree-select
* @link https://www.npmjs.com/package/x-tree-select
*/
.trsel{
.xtsel{
background-color: #ffffff;
text-align: left;
background-repeat: no-repeat;
@ -37,27 +37,27 @@
padding-bottom: 8px;
}
.trsel:hover{
.xtsel:hover{
border-color: rgb(150, 200, 218);
}
.trs-rtl{
.xts-rtl{
text-align: right;
background-position-x:12px;
padding-left: 29px;
padding-right: 14px;
}
#trsel-list {
#xtsel-list {
top:20px;
border-color: rgb(150, 200, 218);
}
#trsel-list li{
#xtsel-list li{
background-color: #fff!important;
border-bottom-color: #fafafa;
padding: .48571429rem 1.14285714rem!important;
}
#trsel-list li:hover{
#xtsel-list li:hover{
background-color: rgba(0,0,0,.05) !important;
}

+ 21
- 21
src/x-tree-select.css View File

@ -1,4 +1,4 @@
.trsel{
.xtsel{
border: 1px solid silver;
padding: 5px;
text-align: center;
@ -7,7 +7,7 @@
position: relative;
}
#trsel-list{
#xtsel-list{
border: gray 1px solid;
width: 100%;
padding: 0;
@ -22,7 +22,7 @@
z-index: 99;
}
#trsel-list li{
#xtsel-list li{
padding: 4px;
border-bottom: 1px solid rgba(33,33,33,0.2);
display: block;
@ -31,15 +31,15 @@
overflow: hidden;
}
#trsel-list li:nth-child(even){
#xtsel-list li:nth-child(even){
background: #efefef;
}
#trsel-list li:last-child{
#xtsel-list li:last-child{
border: none;
}
#trsel-list li.trsel-childer{
#xtsel-list li.xtsel-childer{
background: transparent url("right.png") no-repeat;
background-position-x: calc(100% - 10px) ;
-ms-background-position-y: center;
@ -47,27 +47,27 @@
background-size: auto 50% ;
}
#trsel-list li:hover{
#xtsel-list li:hover{
background-color: #dbedff ;
}
#trsel-list li.trsel-back{
#xtsel-list li.xtsel-back{
background: white url("left.png") 5px no-repeat;
padding-left: 30px;
background-size: auto 50% ;
}
#trsel-list.xout{
#xtsel-list.xout{
transform-origin: center right;
transform-style: preserve-3d;
transform: translateX(-100%) rotateY(-180deg) skew(0deg) ;
}
#trsel-list.xfade li{
#xtsel-list.xfade li{
opacity: 0;
}
#trsel-list li{
#xtsel-list li{
-webkit-transition: all .55s linear;
-moz-transition: all .55s linear;
-o-transition: all .55s linear;
@ -75,7 +75,7 @@
max-height: 30px;
}
#trsel-list.xslide li{
#xtsel-list.xslide li{
max-height: 0;
overflow: hidden;
box-sizing: border-box;
@ -88,7 +88,7 @@
transition: all .6s linear;
}
.trsel-selectable{
.xtsel-selectable{
float: left;
width: 1.5em;
position: relative;
@ -101,38 +101,38 @@
/** rtl support css */
.trs-rtl{
.xts-rtl{
}
.trs-rtl li {
.xts-rtl li {
direction: rtl !important;
text-align: right !important;
}
.trs-rtl li.trsel-childer {
.xts-rtl li.xtsel-childer {
background-image: url("left.png") !important;
background-position-x: 10px !important;
}
.trs-rtl li.trsel-back {
.xts-rtl li.xtsel-back {
background-image: url("right.png") !important ;
background-position-x: calc(100% - 10px) !important;
padding-right: 30px !important;
}
.trs-rtl .trsel-selectable{
.xts-rtl .xtsel-selectable{
float: right;
margin-left: .7em;
margin-right: 0;
}
.trsel .search{
.xtsel .search{
display: none;
padding: 0 !important;
}
.trsel.trs-searcable .search{
.xtsel.xts-searcable .search{
display: block;
}
.trsel .search input{
.xtsel .search input{
background: white;
padding: 8px;
border: 0;

+ 89
- 87
src/x-tree-select.js View File

@ -9,14 +9,14 @@
};
// set default store for setting
if ($.trsStore === undefined) {
if ($.xtsStore === undefined) {
$.scbCounter = -1;
$.trsStore = [];
$.xtsStore = [];
$.currentCounter = 0;
}
// make app var for use in plugin
$.trs = this;
$.xts = this;
// change plugin info
var settings = $.extend({
@ -56,9 +56,9 @@
// store setting for use
$.scbCounter++;
$.trsStore[$.scbCounter] = settings;
$.xtsStore[$.scbCounter] = settings;
// console.log($.trsStore);
// console.log($.xtsStore);
/**
* initial element
@ -78,68 +78,70 @@
var elCls = '';
// set rtl class if is rtl
if ($.trsStore[$.scbCounter].direction === 'rtl') {
elCls = 'trs-rtl';
if ($.xtsStore[$.scbCounter].direction === 'rtl') {
elCls = 'xts-rtl';
}
// check is searchable
if ($.trsStore[$.scbCounter].searchable === true) {
elCls += ' trs-searcable';
if ($.xtsStore[$.scbCounter].searchable === true) {
elCls += ' xts-searcable';
}
// init element for click for choose
$(self).parent().append('<div class="trsel ' + elCls + '" data-trcounter="' +
$(self).parent().append('<div class="xtsel ' + elCls + '" data-trcounter="' +
$.scbCounter + '" >' + placeholder + '</div>');
// initial idx for use in naviagion
settings.datatree = $.trs.makeId('1', settings.datatree);
settings.datatree = $.xts.makeId('1', settings.datatree);
// on click combowizard
$(self).parent().find('.trsel').bind('click.open', function (e) {
$(self).parent().find('.xtsel').bind('click.open', function (e) {
if (e.target !== this) {
return;
}
var trsel = $(this);
var xtsel = $(this);
if (trsel.hasClass("loading")) {
if (xtsel.hasClass("loading")) {
return;
}
trsel.addClass("loading");
xtsel.addClass("loading");
setTimeout(function () {
trsel.removeClass("loading");
xtsel.removeClass("loading");
}, 600);
$.currentCounter = $(this).data('trcounter');
$.lastx.title = $.trsStore[$.currentCounter].mainTitle;
$.lastx.title = $.xtsStore[$.currentCounter].mainTitle;
// check is open list
if (!$(this).hasClass('active')) {
$.trsStore[$.currentCounter].onOpen();
$.xtsStore[$.currentCounter].onOpen();
// find target for last value
$.trs.target = $(this).parent().find('input');
$.xts.target = $(this).parent().find('input');
// find select text position
$.trs.text = $(self).parent().find('.trsel');
$.xts.text = $(self).parent().find('.xtsel');
//if now list show list and countiniu
$(this).append('<ul id="trsel-list"></ul>');
if ($.trsStore[$.currentCounter].navx === undefined) {
$(this).append('<ul id="xtsel-list"></ul>');
if ($.xtsStore[$.currentCounter].navx === undefined) {
// show first list main cat in list
$.trs.showTree($.trsStore[$.currentCounter].datatree);
$.xts.showTree($.xtsStore[$.currentCounter].datatree);
} else {
$.lastx = $.trsStore[$.currentCounter].lastx;
$.navigatex = $.trsStore[$.currentCounter].navx;
$.trs.showTree($.trs.findTree($.trsStore[$.currentCounter].datatree, $.trsStore[$.currentCounter].lastx.id));
$.lastx = $.xtsStore[$.currentCounter].lastx;
$.navigatex = $.xtsStore[$.currentCounter].navx;
$.xts.showTree($.xts.findTree($.xtsStore[$.currentCounter].datatree, $.xtsStore[$.currentCounter].lastx.id));
}
// slide down list
$("#trsel-list").slideDown(function () {
$("#xtsel-list").slideDown(function () {
$(document).bind('click.handvarrsl', function (e) {
if (!$(e.target).is(".trsel-childer, .trsel-back, .search, .srch")) {
$.trs.resetClose();
$("#trsel-list").slideUp(200, function () {
if (!$(e.target).is(".xtsel-childer, .xtsel-back, .search, .srch")) {
$.xts.resetClose();
$("#xtsel-list").slideUp(200, function () {
$(this).remove();
});
$($.trs.text).removeClass('active');
$($.xts.text).removeClass('active');
}
e.preventDefault();
return false;
@ -155,19 +157,19 @@
// hide and remove list
$(this).removeClass('active');
$("#trsel-list").slideUp(100, function () {
// $.trs.resetClose();
$("#xtsel-list").slideUp(100, function () {
// $.xts.resetClose();
$(this).remove();
});
}
});
//reset
$(document).off('click', '#trsel-list li');
$(document).off('click', '#xtsel-list li');
// on click items
$(document).on('click', '#trsel-list li', function (e) {
$(document).on('click', '#xtsel-list li', function (e) {
// has child & no parent selecatble
if ($(this).hasClass('trsel-childer') && !$(e.target).hasClass('trsel-selectable')) {
if ($(this).hasClass('xtsel-childer') && !$(e.target).hasClass('xtsel-selectable')) {
// make navigation
var tmp = {
title: $.lastx.title,
@ -179,50 +181,50 @@
// transtion ;
$("#trsel-list").addClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").addClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
var xself = this;
var ax = setTimeout(function () {
// show child items
$.trs.showTree($.trs.findTree($.trsStore[$.currentCounter].datatree, $(xself).data('id')));
$.xts.showTree($.xts.findTree($.xtsStore[$.currentCounter].datatree, $(xself).data('id')));
// remove effect
$("#trsel-list").removeClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").removeClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
}, 600);
} else if ($(this).hasClass('trsel-back')) { // if click on back
} else if ($(this).hasClass('xtsel-back')) { // if click on back
if ($.navigatex[$.navigatex.length - 1] !== undefined) {
// roll back navigtaion to last
$.lastx.title = $.navigatex[$.navigatex.length - 1].title;
$.lastx.id = $.navigatex[$.navigatex.length - 1].id;
} else {
// check is navigation emoppty set def
$.lastx.title = $.trsStore[$.currentCounter].mainTitle;
$.lastx.title = $.xtsStore[$.currentCounter].mainTitle;
$.lastx.id = '';
}
// pop last navigation item
$.navigatex.pop();
// get parent list
var lst = $.trs.findTree($.trsStore[$.currentCounter].datatree, $(this).data('id'));
var lst = $.xts.findTree($.xtsStore[$.currentCounter].datatree, $(this).data('id'));
// if has not parent show main cat
$("#trsel-list").addClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").addClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
var ax = setTimeout(function () {
if (lst.length === 0) {
$.trs.showTree($.trsStore[$.currentCounter].datatree);
$.xts.showTree($.xtsStore[$.currentCounter].datatree);
} else {
// then show parent list
$.trs.showTree(lst);
$.xts.showTree(lst);
}
$("#trsel-list").removeClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
$("#xtsel-list").removeClass($.treeselect_animation[$.xtsStore[$.currentCounter].transition]);
}, 600);
}else if( $(e.target).hasClass('search') || $(e.target).hasClass('srch') ){
// console.log('x');
} else { // choose|select value
// onChange event
$.trsStore[$.currentCounter].onChange({
value: $($.trs.target).val(),
text: $($.trs.text).clone() //clone the element
$.xtsStore[$.currentCounter].onChange({
value: $($.xts.target).val(),
text: $($.xts.text).clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
@ -232,28 +234,28 @@
text: $(this).text()
});
// set main input value
$($.trs.target).val($(this).data('value'));
$($.xts.target).val($(this).data('value'));
// set choosed test
$($.trs.text).text($(this).text());
$($.xts.text).text($(this).text());
// if selected is not first level store level & last titles
if ($.navigatex.length > 0) {
$.trsStore[$.currentCounter].navx = $.navigatex;
$.trsStore[$.currentCounter].lastx = $.lastx;
$.xtsStore[$.currentCounter].navx = $.navigatex;
$.xtsStore[$.currentCounter].lastx = $.lastx;
} else {
delete $.trsStore[$.currentCounter].navx;
delete $.trsStore[$.currentCounter].lastx;
delete $.xtsStore[$.currentCounter].navx;
delete $.xtsStore[$.currentCounter].lastx;
}
// remove active class and hide list
$($.trs.text).removeClass('active');
$($.xts.text).removeClass('active');
// onChange
$.trsStore[$.currentCounter].onSelect({
$.xtsStore[$.currentCounter].onSelect({
value: $(this).data('value'),
text: $(this).text(),
id: $(this).data('id'),
parent: $.lastx,
ancestors: $.navigatex
});
$("#trsel-list").slideUp(100, function () {
$("#xtsel-list").slideUp(100, function () {
$(this).remove();
});
}
@ -279,13 +281,13 @@
var prefix = base + '-' + (parseInt(ix) + 1);
itm.idx = prefix;
//if there is no child object, just create it
if (itm[$.trsStore[$.scbCounter].json.child] === undefined) {
itm[$.trsStore[$.scbCounter].json.child] = [];
if (itm[$.xtsStore[$.scbCounter].json.child] === undefined) {
itm[$.xtsStore[$.scbCounter].json.child] = [];
}
// if has child
if (itm[$.trsStore[$.scbCounter].json.child].length !== 0) {
if (itm[$.xtsStore[$.scbCounter].json.child].length !== 0) {
// recall this function for children
itm[$.trsStore[$.scbCounter].json.child] = $.trs.makeId(prefix, itm[$.trsStore[$.scbCounter].json.child]);
itm[$.xtsStore[$.scbCounter].json.child] = $.xts.makeId(prefix, itm[$.xtsStore[$.scbCounter].json.child]);
}
all.push(itm);
}
@ -300,14 +302,14 @@
this.showTree = function (list, cb) {
var content = '';
// clear li list
$("#trsel-list li").remove();
$("#xtsel-list li").remove();
// back button handle
// has parent need back button
if ($.navigatex.length !== 0) {
// if navigation is empity not need back button
var back = $.navigatex[$.navigatex.length - 1];
content += '<li class="trsel-back" data-id="' + back.id + '"> &nbsp;' + back.title + '</li>';
content += '<li class="xtsel-back" data-id="' + back.id + '"> &nbsp;' + back.title + '</li>';
} else {
// if has no parent
// search element
@ -319,20 +321,20 @@
var item = list[ix];
// ad childs
// check has child
var clsx = ' class="trsel-childer"';
var clsx = ' class="xtsel-childer"';
var select = '';
if (item[$.trsStore[$.currentCounter].json.child].length === 0) {
if (item[$.xtsStore[$.currentCounter].json.child].length === 0) {
clsx = ' class=""';
} else {
if ($.trsStore[$.currentCounter].selectablePrernt) {
var select = '<span class="trsel-selectable"></span>';
if ($.xtsStore[$.currentCounter].selectablePrernt) {
var select = '<span class="xtsel-selectable"></span>';
}
}
// li to list
content += '<li' + clsx + ' data-id="' + item.idx + '" data-value="' + item[$.trsStore[$.currentCounter].json.value] + '">' + select + item[$.trsStore[$.currentCounter].json.title] + '</li>';
content += '<li' + clsx + ' data-id="' + item.idx + '" data-value="' + item[$.xtsStore[$.currentCounter].json.value] + '">' + select + item[$.xtsStore[$.currentCounter].json.title] + '</li>';
}
$("#trsel-list").html(content);
$("#xtsel-list").html(content);
if (cb !== undefined) {
cb();
}
@ -351,14 +353,14 @@
for (var ix in list) {
var item = list[ix];
if (item.idx === idx) {
return item[$.trsStore[$.currentCounter].json.child];
return item[$.xtsStore[$.currentCounter].json.child];
}
}
// if not fond in first level each the childs
for (var ix in list) {
var item = list[ix];
if (item[$.trsStore[$.currentCounter].json.child].length !== 0) {
var tmp = $.trs.findTree(item[$.trsStore[$.currentCounter].json.child], idx);
if (item[$.xtsStore[$.currentCounter].json.child].length !== 0) {
var tmp = $.xts.findTree(item[$.xtsStore[$.currentCounter].json.child], idx);
// if found idx retrur
if (tmp.length !== 0) {
return tmp;
@ -384,30 +386,30 @@
if (parent != null) {
$.navigatex.push({
id: parent.idx,
title: parent[$.trsStore[c].json.title]
title: parent[$.xtsStore[c].json.title]
});
} else {
$.navigatex.push({
id: "",
title: $.trsStore[c].mainTitle
title: $.xtsStore[c].mainTitle
});
$.lastx.title = $.trsStore[c].mainTitle;
$.lastx.title = $.xtsStore[c].mainTitle;
$.lastx.id = '';
}
// each all
for (var ix in list) {
var item = list[ix];
if (item[$.trsStore[c].json.value] == val) {
if (item[$.xtsStore[c].json.value] == val) {
return item;
}
// if has child
if (item[$.trsStore[c].json.child] != undefined && item[$.trsStore[c].json.child].length > 0) {
if (item[$.xtsStore[c].json.child] != undefined && item[$.xtsStore[c].json.child].length > 0) {
// add last
$.lastx = {
id: item.idx,
title: item[$.trsStore[c].json.title]
title: item[$.xtsStore[c].json.title]
};
var back = this.findItem(item[$.trsStore[c].json.child], val, c, item);
var back = this.findItem(item[$.xtsStore[c].json.child], val, c, item);
if (back != false) {
return back;
}
@ -426,13 +428,13 @@
*/
this.setDefault = function (c, val) {
// find value
var back = $.trs.findItem($.trsStore[c].datatree, val, c);
var back = $.xts.findItem($.xtsStore[c].datatree, val, c);
// if is exits val
if (back != false) {
$.trsStore[c].lastx = $.lastx;
$.xtsStore[c].lastx = $.lastx;
$.navigatex.pop();
$.trsStore[c].navx = $.navigatex;
$("[data-trcounter='" + c + "']").text(back[$.trsStore[c].json.title]);
$.xtsStore[c].navx = $.navigatex;
$("[data-trcounter='" + c + "']").text(back[$.xtsStore[c].json.title]);
}
};
@ -440,11 +442,11 @@
* reset values on close
*/
this.resetClose = function () {
$.trsStore[$.currentCounter].onClose();
$.xtsStore[$.currentCounter].onClose();
// reset navagtion value
$.navigatex = [];
$.lastx = {
title: $.trsStore[$.currentCounter].mainTitle,
title: $.xtsStore[$.currentCounter].mainTitle,
id: ''
};
// reset docuemnt bind
@ -455,7 +457,7 @@
this.html(currentInnerText + " " + newValue)
};
this.each(function () {
$.trs.init(this);
$.xts.init(this);
});
return this;

Loading…
Cancel
Save