meta-tech/svan
meta-tech/svan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

amend attr & val for select Node

Browse Source
This commit is contained in:
a-Sansara 2015-12-28 18:48:12 +01:00
parent 737e583694
commit 9f383ad6d3
3 changed files with 75 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
demo.html
View File

@ -14,15 +14,29 @@
textarea { padding:8px 5px; border-radius:10px; border-style:solid; width:100%; height:120px; font-size:1.2rem; } textarea { padding:8px 5px; border-radius:10px; border-style:solid; width:100%; height:120px; font-size:1.2rem; }
#test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; } #test { margin:20px; background-color:white; padding:20px; border: 1px dashed #aaa; }
.cssAdded { color:#990000; } .cssAdded { color:#990000; }
#output { margin-top:250px; }
</style> </style>
</head> </head>
<body> <body>
<h2>pluie.org - svan demo : </h2> <h2>pluie.org - svan demo : </h2>
<button id="click">click</button> <div style="border:1px dashed #ccc; position:fixed; width:90%; ">
<button id="addClass">addClass</button> <button id="click">click</button>
<button id="removeClass">removeClass</button> <button id="addClass">addClass</button>
<button id="fade">fade</button> <button id="removeClass">removeClass</button>
<button id="ajax">ajax</button> <button id="toggle">toggle</button>
<button id="fade">fade</button>
<button id="find">$('div').find('button')</button>
<button id="ajax">ajax</button>
</div>
<div style="border:1px dashed #ccc; position:fixed; width:90%; top:150px;">
<select id="selnode">
<option value="0">value : 0</option>
<option value="1">value : 1</option>
<option value="2">value : 2</option>
</select>
<button id="attrget">attr getselect</button>
<button id="attrset">attr set select to 1 </button>
</div>
<div id="output"></div> <div id="output"></div>
<script type="text/javascript" src="src/svan-min.js"></script> <script type="text/javascript" src="src/svan-min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
@ -46,6 +60,7 @@ var $j = (function alias() {
}()); }());
$(document).ready(function() { $(document).ready(function() {
var sep = "<br/>----------------";
var o = function(msg, c) { var o = function(msg, c) {
msg += '<br/>'; msg += '<br/>';
$('#output').append(msg); $('#output').append(msg);
@ -54,25 +69,56 @@ $(document).ready(function() {
o('on dom ready event<br/>', 1); o('on dom ready event<br/>', 1);
$('#click').on('click', function(e) { $('#click').on('click', function(e) {
o(sep);
o('click click event<br/>context : #'+this.id); o('click click event<br/>context : #'+this.id);
console.log(e); console.log(e);
console.log(this); console.log(this);
}); });
$('#addClass').on('click', function(e) { $('#addClass').on('click', function(e) {
o(sep);
o('addClass click event<br/>context : #'+this.id+'<br/>css before : '+this.className); o('addClass click event<br/>context : #'+this.id+'<br/>css before : '+this.className);
$(this).addClass('cssAdded'); $(this).addClass('cssAdded');
o('css after : '+this.className); o('css after : '+this.className);
}); });
$('#removeClass').on('click', function(e) { $('#removeClass').on('click', function(e) {
o(sep);
var n = $('#addClass').first(); var n = $('#addClass').first();
o('removeClass event<br/>context : #'+this.id+'<br/>css before : '+n.className); o('removeClass event<br/>context : #'+this.id+'<br/>css before : '+n.className);
$(n).removeClass('cssAdded'); $(n).removeClass('cssAdded');
o('css after : '+n.className); o('css after : '+n.className);
}); });
$('#toggle').on('click', function(e) {
o(sep);
var n = $('#addClass').first();
o('toogle event<br/>context : #'+this.id+'<br/>css before : '+n.className);
$(n).toggle('cssAdded');
o('css after : '+n.className);
});
$('#attrset').on('click', function(e) {
o(sep);
$('#selnode').val(1);
o('set selectedIndex to 1');
});
$('#attrget').on('click', function(e) {
o(sep);
o('get selected value : '+($('#selnode').val()));
});
$('#find').on('click', function(e) {
o(sep);
o("find $('div').find('button')");
$('div').find('button').all().forEach(function(n) {
o(n.getAttribute('id'));
});
});
$('#fade').on('click', function(e) { $('#fade').on('click', function(e) {
o(sep);
o('fade click event<br/>context : #'+this.id); o('fade click event<br/>context : #'+this.id);
$('#output').fadeOut(600, function() { $('#output').fadeOut(600, function() {
o('end fade out'); o('end fade out');
@ -83,6 +129,7 @@ $(document).ready(function() {
}); });
$('#ajax').on('click', function(e) { $('#ajax').on('click', function(e) {
o(sep);
o('ajax click event'); o('ajax click event');
$.ajax({ $.ajax({
url : 'http://domain.dev/ajax-done', url : 'http://domain.dev/ajax-done',

2
src/svan-min.js vendored
View File

@ -1 +1 @@
/* by a-sansara - v 0.4 - https://github.com/pluie-org/svan */!function(){var is=function(o,intent){return typeof o==intent},Svan=function(selector,context){return new Svan.init(selector,context)},isNone=Svan.isNone=function(o){return is(o,"undefined")},isStr=Svan.isStr=function(o){return is(o,"string")},isFunc=Svan.isFunc=function(o){return is(o,"function")},isObj=Svan.isObj=function(o){return is(o,"object")},isNode=Svan.isNode=function(o){return isObj(o)&&!isNone(o.nodeType)},isWin=Svan.isWin=function(o){return isObj(o)&&!isNone(o.window)&&o.window==o};Svan.prototype={regsan:function(v){return v.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")},first:function(){return this.found?this.list[0]:null},last:function(){return this.found?this.list[this.list.length-1]:b},index:function(i){return this.found&&i>0&&i<this.list.length?this.list[i]:b},all:function(){return this.list},find:function(s){return this.found?new Svan.init(s,this.list[0]):new Svan.init("")},each:function(f){this.found&&this.list.forEach(f)},html:function(data){return data?void this.each(function(node){node.innerHTML=data}):this.found?this.list[0].innerHTML:""},append:function(data){this.each(function(node){node.innerHTML+=data})},prepend:function(data){if(this.found)if(isStr(data)){var div=document.createElement("div");for(div.innerHTML=data;null!=div.lastChild;)this.first().insertBefore(div.lastChild,this.first().firstChild)}else{var div=isStr(data)?document.createElement("div"):data;this.first().insertBefore(data,this.first().firstChild)}},on:function(type,fn,capture){this.each(function(node){node.addEventListener(type,fn,capture===!0)})},val:function(data){return data?void this.each(function(node){node.value=data}):this.found?this.list[0].value:null},attr:function(key,value){return 1==arguments.length?this.found?this.list[0].getAttribute(key):null:void this.each(function(node){node.setAttribute(key,value)})},toggle:function(cssName){this.each(function(node){node.classList.toggle(cssName)})},hasClass:function(cssName){return this.found?this.list[0].classList.contains(cssName):this.found},removeClass:function(cssName){this.each(function(node){node.classList.contains(cssName)&&node.classList.toggle(cssName)})},addClass:function(cssName){this.each(function(node){node.classList.contains(cssName)||node.classList.toggle(cssName)})},fadeIn:function(duration,fn,display){if(this.found){duration||(duration=this.FADE_DURATION);var inc=parseFloat(1/duration*20),n=this.first();n.style.opacity=0,n.style.display=display||"block",function fade(){var val=parseFloat(n.style.opacity);(val+=inc)<1?(n.style.opacity=val,requestAnimationFrame(fade)):"function"==typeof fn&&fn.call(n)}(duration)}},fadeOut:function(duration,fn){if(this.found){duration||(duration=this.FADE_DURATION);var inc=parseFloat(1/duration*20),n=this.first();n.style.opacity=1,function fade(){var val=parseFloat(n.style.opacity);(val-=inc)<0?(n.style.display="none","function"==typeof fn&&fn.call(n)):(n.style.opacity=val,requestAnimationFrame(fade))}(duration)}},ready:function(fn){this.context.addEventListener("DOMContentLoaded",fn)}},Svan.eachObj=function(obj,fn,context){for(var prop in obj)obj.hasOwnProperty(prop)&&fn.call(context,prop,obj[prop])},Svan.ajax=function(def){this.eachObj(def,function(k,v){console.log(k),console.log(v)});var xhr=new XMLHttpRequest;xhr.onreadystatechange=function(){4==this.readyState&&(200==this.status?isFunc(def.done)&&def.done.call(def.context,this.responseText,this.status):isFunc(def.fail)&&def.fail.call(def.context,this.responseText,this.status),isFunc(def.always)&&def.always.call(def.context,this.responseText,this.status))},!isNone(def.timeout)&&def.async&&(xhr.timeout=def.timeout),isFunc(def.before)&&def.before.call(xhr),xhr.open(def.method,def.url,def.async),xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var qs="";isObj(def.data)&&this.eachObj(def.data,function(k,v){qs+=k+"="+encodeURIComponent(v)}),xhr.send(qs)};var init=Svan.init=function(selector,context){return this.FADE_DURATION=700,this.VERSION=.4,this.context=isNone(context)?document:context,this.list=isStr(selector)?[].slice.call(this.context.querySelectorAll(selector)):isNode(selector)||isWin(selector)?[selector]:[],this.found=this.list.length>0,this};init.prototype=Svan.prototype,window.Svan=Svan,isNone(window.$)&&(window.$=Svan)}(); /* by a-sansara - v 0.5 - https://github.com/pluie-org/svan */!function(){var n=function(n,i){return typeof n==i},i=function(n,o){return new i.init(n,o)},o=i.isNone=function(i){return n(i,"undefined")},l=i.isStr=function(i){return n(i,"string")},r=i.isFunc=function(i){return n(i,"function")},c=i.isObj=function(i){return n(i,"object")},u=i.isNode=function(n){return c(n)&&!o(n.nodeType)},f=i.isWin=function(n){return c(n)&&!o(n.window)&&n.window==n};i.prototype={regsan:function(n){return n.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")},first:function(){return this.found?this.list[0]:null},last:function(){return this.found?this.list[this.list.length-1]:b},index:function(n){return this.found&&n>0&&n<this.list.length?this.list[n]:b},all:function(){return this.list},find:function(s){return this.found?new i.init(s,this.list[0]):new i.init("")},each:function(n){this.found&&this.list.forEach(n)},html:function(n){return n?void this.each(function(i){i.innerHTML=n}):this.found?this.list[0].innerHTML:""},append:function(n){this.each(function(i){i.innerHTML+=n})},prepend:function(n){if(this.found)if(l(n)){var i=document.createElement("div");for(i.innerHTML=n;null!=i.lastChild;)this.first().insertBefore(i.lastChild,this.first().firstChild)}else{var i=l(n)?document.createElement("div"):n;this.first().insertBefore(n,this.first().firstChild)}},on:function(n,i,o){this.each(function(l){l.addEventListener(n,i,o===!0)})},val:function(n){return n?void this.each(function(i){if("select"==i.nodeName.toLowerCase()){for(var o=0,l=i.options.length;l>o;o++)if(i.options[o].value==n){i.options[o].selected=!0;break}}else i.value=n}):this.found?"select"==this.list[0].nodeName.toLowerCase()?this.list[0].options[this.list[0].selectedIndex].value:this.list[0].value:null},attr:function(n,i){return 1==arguments.length?this.found?"disabled"==n?this.list[0].disabled:this.list[0].getAttribute(n):null:void this.each(function(o){"disabled"==n?o.disabled=i:o.setAttribute(n,i)})},toggle:function(n){this.each(function(i){i.classList.toggle(n)})},hasClass:function(n){return this.found?this.list[0].classList.contains(n):this.found},removeClass:function(n){this.each(function(i){i.classList.contains(n)&&i.classList.toggle(n)})},addClass:function(n){this.each(function(i){i.classList.contains(n)||i.classList.toggle(n)})},fadeIn:function(n,i,o){if(this.found){n||(n=this.FADE_DURATION);var l=parseFloat(1/n*20),r=this.first();r.style.opacity=0,r.style.display=o||"block",function n(){var o=parseFloat(r.style.opacity);(o+=l)<1?(r.style.opacity=o,requestAnimationFrame(n)):"function"==typeof i&&i.call(r)}(n)}},fadeOut:function(n,i){if(this.found){n||(n=this.FADE_DURATION);var o=parseFloat(1/n*20),l=this.first();l.style.opacity=1,function n(){var r=parseFloat(l.style.opacity);(r-=o)<0?(l.style.display="none","function"==typeof i&&i.call(l)):(l.style.opacity=r,requestAnimationFrame(n))}(n)}},ready:function(n){this.context.addEventListener("DOMContentLoaded",n)}},i.eachObj=function(n,i,o){for(var l in n)n.hasOwnProperty(l)&&i.call(o,l,n[l])},i.ajax=function(n){this.eachObj(n,function(n,i){console.log(n),console.log(i)});var i=new XMLHttpRequest;i.onreadystatechange=function(){4==this.readyState&&(200==this.status?r(n.done)&&n.done.call(n.context,this.responseText,this.status):r(n.fail)&&n.fail.call(n.context,this.responseText,this.status),r(n.always)&&n.always.call(n.context,this.responseText,this.status))},!o(n.timeout)&&n.async&&(i.timeout=n.timeout),r(n.before)&&n.before.call(i),i.open(n.method,n.url,n.async),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var l="";c(n.data)&&this.eachObj(n.data,function(n,i){l+=n+"="+encodeURIComponent(i)}),i.send(l)};var h=i.init=function(n,i){return this.FADE_DURATION=700,this.VERSION=.5,this.context=o(i)?document:i,this.list=l(n)?[].slice.call(this.context.querySelectorAll(n)):u(n)||f(n)?[n]:[],this.found=this.list.length>0,this};h.prototype=i.prototype,window.Svan=i,o(window.$)&&(window.$=i)}();

21
src/svan.js
View File

@ -78,15 +78,30 @@
}); });
}, },
val : function(data) { val : function(data) {
if (!data) return this.found ? this.list[0].value : null; // assume uniq selector if (!data) return this.found ? ( this.list[0].nodeName.toLowerCase() == 'select' ? this.list[0].options[this.list[0].selectedIndex].value : this.list[0].value) : null; // assume uniq selector
else this.each(function(node) { else this.each(function(node) {
if (node.nodeName.toLowerCase() == 'select') {
for(var i=0, lim = node.options.length; i < lim; i++) {
if (node.options[i].value == data) {
node.options[i].selected = true;
break;
}
}
}
else {
node.value = data; node.value = data;
}
}); });
}, },
attr : function(key, value) { attr : function(key, value) {
if (arguments.length == 1) return this.found ? this.list[0].getAttribute(key) : null; // assume uniq selector if (arguments.length == 1) return this.found ? ( key == "disabled" ? this.list[0].disabled : this.list[0].getAttribute(key)) : null; // assume uniq selector
else this.each(function(node) { else this.each(function(node) {
if (key == "disabled") {
node.disabled = value;
}
else {
node.setAttribute(key, value); node.setAttribute(key, value);
}
}); });
}, },
toggle : function(cssName) { toggle : function(cssName) {
@ -184,7 +199,7 @@
var init = Svan.init = function(selector, context) { var init = Svan.init = function(selector, context) {
this.FADE_DURATION = 700; this.FADE_DURATION = 700;
this.VERSION = 0.4; this.VERSION = 0.5;
this.context = isNone(context) ? document : context; this.context = isNone(context) ? document : context;
this.list = isStr(selector) ? [].slice.call(this.context.querySelectorAll(selector)) this.list = isStr(selector) ? [].slice.call(this.context.querySelectorAll(selector))
: ((isNode(selector) || isWin(selector)) ? [selector] : []); : ((isNode(selector) || isWin(selector)) ? [selector] : []);