initial commit
This commit is contained in:
a-Sansara
commit
86e4c56268
119
demo.html
Normal file
119
demo.html
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
<!doctype>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>pluie.org - svan demo - v0.4</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<style>
|
||||||
|
body { background-color:#888; color:white; font-family:arial; font-size:1.3rem; }
|
||||||
|
#test { border: 1px dashed #ccc; }
|
||||||
|
body > div { border-radius:20px; margin:40px; padding:20px; background-color: #ccc; color:black; }
|
||||||
|
body > span { font-size:0.8rem; }
|
||||||
|
button { padding:5px 15px; }
|
||||||
|
h3 { margin:35px 0 10px 0; }
|
||||||
|
h2 { margin:5px 0 0 0; }
|
||||||
|
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; }
|
||||||
|
.cssAdded { color:#990000; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>pluie.org - svan demo : </h2>
|
||||||
|
<button id="click">click</button>
|
||||||
|
<button id="addClass">addClass</button>
|
||||||
|
<button id="removeClass">removeClass</button>
|
||||||
|
<button id="fade">fade</button>
|
||||||
|
<button id="ajax">ajax</button>
|
||||||
|
<div id="output"></div>
|
||||||
|
<script type="text/javascript" src="src/svan-min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var $l = (function alias() {
|
||||||
|
var a = localStorage;
|
||||||
|
return {
|
||||||
|
clear : function() { return a.clear(); },
|
||||||
|
get : function(k) { return a.getItem(k); },
|
||||||
|
rem : function(k) { return a.removeItem(k); },
|
||||||
|
set : function(k, v) { return a.setItem(k, v); }
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
var $j = (function alias() {
|
||||||
|
var a = JSON;
|
||||||
|
return {
|
||||||
|
str : function(o) { return a.stringify(o); },
|
||||||
|
obj : function(s) { return a.parse(s); }
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
var o = function(msg, c) {
|
||||||
|
msg += '<br/>';
|
||||||
|
$('#output').append(msg);
|
||||||
|
if (c) console.log(msg.replace(/\<br\/\>/g, '\n'));
|
||||||
|
}
|
||||||
|
o('on dom ready event<br/>', 1);
|
||||||
|
|
||||||
|
$('#click').on('click', function(e) {
|
||||||
|
o('click click event<br/>context : #'+this.id);
|
||||||
|
console.log(e);
|
||||||
|
console.log(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#addClass').on('click', function(e) {
|
||||||
|
o('addClass click event<br/>context : #'+this.id+'<br/>css before : '+this.className);
|
||||||
|
$(this).addClass('cssAdded');
|
||||||
|
o('css after : '+this.className);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#removeClass').on('click', function(e) {
|
||||||
|
var n = $('#addClass').first();
|
||||||
|
o('removeClass event<br/>context : #'+this.id+'<br/>css before : '+n.className);
|
||||||
|
$(n).removeClass('cssAdded');
|
||||||
|
o('css after : '+n.className);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#fade').on('click', function(e) {
|
||||||
|
o('fade click event<br/>context : #'+this.id);
|
||||||
|
$('#output').fadeOut(600, function() {
|
||||||
|
o('end fade out');
|
||||||
|
$(this).fadeIn(1600, function() {
|
||||||
|
o('end fadeIn');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#ajax').on('click', function(e) {
|
||||||
|
o('ajax click event');
|
||||||
|
$.ajax({
|
||||||
|
url : 'http://domain.dev/ajax-done',
|
||||||
|
async : true,
|
||||||
|
data : { toto : "tata" },
|
||||||
|
done : function(data) {
|
||||||
|
o('ajax done receiving data<br/>' + $j.str(data) +'<br/>');
|
||||||
|
o($j.str(xhr));
|
||||||
|
},
|
||||||
|
always : function(data) {
|
||||||
|
o('ajax always<br/>');
|
||||||
|
},
|
||||||
|
method : 'POST'
|
||||||
|
});
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url : 'http://domain.dev/ajax-fail',
|
||||||
|
async : false,
|
||||||
|
fail : function(data, xhr) {
|
||||||
|
o('ajax fail receiving data<br/>' + $j.str(data) +'<br/>');
|
||||||
|
o($j.str(xhr));
|
||||||
|
},
|
||||||
|
always : function(data) {
|
||||||
|
o('ajax always<br/>');
|
||||||
|
},
|
||||||
|
method : 'GET'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
src/svan-min.js
vendored
Normal file
1
src/svan-min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/* by a-sansara - https://github.com/pluie-org/svan */!function(){var t=function(t,n){return typeof t==n},n=function(n){return t(n,"undefined")},i=function(n){return t(n,"string")},e=function(n){return t(n,"function")},s=function(n){return t(n,"object")},o=function(t,n){return new o.init(t,n)};o.prototype={regsan:function(t){return t.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(t){return this.found&&t>0&&t<this.list.length?this.list[t]:b},all:function(){return this.list},find:function(t){return this.found?[].slice.call(this.list[0].querySelectorAll(t)):[]},foreach:function(t){this.found&&this.list.forEach(t)},html:function(t){return t?void this.foreach(function(n){n.innerHTML=t}):this.found?this.list[0].innerHTML:""},append:function(t){this.foreach(function(n){n.innerHTML+=t})},on:function(t,n,i){this.foreach(function(e){e.addEventListener(t,n,i===!0)})},val:function(t){return t?void this.foreach(function(n){n.value=t}):this.found?this.list[0].value:null},attr:function(t,n){return 1==arguments.length?this.found?this.list[0].getAttribute(t):null:void this.foreach(function(i){i.setAttribute(t,n)})},toggle:function(t){this.foreach(function(n){n.classList.toggle(t)})},hasClass:function(t){return this.found?this.list[0].contains(t):this.found},removeClass:function(t){this.foreach(function(n){n.classList.contains(t)&&n.classList.toggle(t)})},addClass:function(t){this.foreach(function(n){n.classList.contains(t)||n.classList.toggle(t)})},fadeIn:function(t,n,i){if(this.found){t||(t=this.FADE_DURATION);var e=parseFloat(1/t*20),s=this.first();s.style.opacity=0,s.style.display=i||"block",function t(){var i=parseFloat(s.style.opacity);(i+=e)<1?(s.style.opacity=i,requestAnimationFrame(t)):"function"==typeof n&&n.call(s)}(t)}},fadeOut:function(t,n){if(this.found){t||(t=this.FADE_DURATION);var i=parseFloat(1/t*20),e=this.first();e.style.opacity=1,function t(){var s=parseFloat(e.style.opacity);(s-=i)<0?(e.style.display="none","function"==typeof n&&n.call(e)):(e.style.opacity=s,requestAnimationFrame(t))}(t)}},ready:function(t){this.context.addEventListener("DOMContentLoaded",t)}},o.isNone=n,o.isStr=i,o.isObj=s,o.isFunc=e,o.eachObj=function(t,n,i){for(var e in t)t.hasOwnProperty(e)&&n.call(i,e,t[e])},o.ajax=function(t){this.eachObj(t,function(t,n){console.log(t),console.log(n)});var i=new XMLHttpRequest;i.onreadystatechange=function(n){4==this.readyState&&(200==this.status?e(t.done)&&t.done.call(t.context,n,this.responseText,this.statusText):e(t.fail)&&t.fail.call(t.context,n,this.responseText,this.statusText),e(t.always)&&t.always.call(t.context,n,this.responseText,this.statusText))},!n(t.timeout)&&t.async&&(i.timeout=t.timeout),e(t.before)&&t.before.call(i),i.open(t.method,t.url,t.async),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var o="";s(t.data)&&this.eachObj(t.data,function(t,n){o+=t+"="+encodeURIComponent(n)}),i.send(o)};var a=o.init=function(t,e){return this.FADE_DURATION=700,this.VERSION=.4,this.context=n(e)?document:e,this.list=i(t)?[].slice.call(this.context.querySelectorAll(t)):s(t)&&!n(t.nodeType)?[t]:[],this.found=this.list.length>0,this};a.prototype=o.prototype,window.Svan=o,n(window.$)&&(window.$=o)}();
|
||||||
186
src/svan.js
Normal file
186
src/svan.js
Normal file
|
|
@ -0,0 +1,186 @@
|
||||||
|
/*!
|
||||||
|
* @author : a-Sansara <dev]]@[[a-sansara]]dot[[net>
|
||||||
|
* @url : https://github.com/pluie-org/svan
|
||||||
|
* @contributors :
|
||||||
|
* @copyright : pluie.org
|
||||||
|
* @date : 2015-12-14 02:45:17
|
||||||
|
* @version : 0.4
|
||||||
|
* @license : MIT
|
||||||
|
* @require : html5
|
||||||
|
* @desc : Small Vanilla jQuery
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
var is = function(o, intent) { return typeof o == intent; },
|
||||||
|
isNone = function(o) { return is(o, 'undefined'); },
|
||||||
|
isStr = function(o) { return is(o, 'string'); },
|
||||||
|
isFunc = function(o) { return is(o, 'function'); },
|
||||||
|
isObj = function(o) { return is(o, 'object'); },
|
||||||
|
Svan = function (selector, context) {
|
||||||
|
return new Svan.init(selector, context);
|
||||||
|
};
|
||||||
|
|
||||||
|
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(i) {
|
||||||
|
return this.list;
|
||||||
|
},
|
||||||
|
// assume uniq selector
|
||||||
|
find : function(s) {
|
||||||
|
return this.found ? [].slice.call(this.list[0].querySelectorAll(s)) : [];
|
||||||
|
},
|
||||||
|
foreach : function(f) {
|
||||||
|
if (this.found) this.list.forEach(f);
|
||||||
|
},
|
||||||
|
// Living Standard cf https://w3c.github.io/DOM-Parsing/#innerhtml
|
||||||
|
html : function(data) {
|
||||||
|
if (!data) return this.found ? this.list[0].innerHTML : ''; // assume uniq selector
|
||||||
|
else this.foreach(function(node) {
|
||||||
|
node.innerHTML = data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
append : function(data) {
|
||||||
|
this.foreach(function(node) {
|
||||||
|
node.innerHTML += data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
on : function(type, fn, capture) {
|
||||||
|
this.foreach(function(node) {
|
||||||
|
node.addEventListener(type, fn, capture===true);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
val : function(data) {
|
||||||
|
if (!data) return this.found ? this.list[0].value : null; // assume uniq selector
|
||||||
|
else this.foreach(function(node) {
|
||||||
|
node.value = data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
attr : function(key, value) {
|
||||||
|
if (arguments.length == 1) return this.found ? this.list[0].getAttribute(key) : null; // assume uniq selector
|
||||||
|
else this.foreach(function(node) {
|
||||||
|
node.setAttribute(key, value);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toggle : function(cssName) {
|
||||||
|
this.foreach(function(node) {
|
||||||
|
node.classList.toggle(cssName);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// assume uniq selector
|
||||||
|
hasClass : function(cssName) {
|
||||||
|
return this.found ? this.list[0].contains(cssName) : this.found;
|
||||||
|
},
|
||||||
|
removeClass : function(cssName) {
|
||||||
|
this.foreach(function(node) {
|
||||||
|
if (node.classList.contains(cssName)) node.classList.toggle(cssName);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addClass : function(cssName) {
|
||||||
|
this.foreach(function(node) {
|
||||||
|
if (!node.classList.contains(cssName)) node.classList.toggle(cssName);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fadeIn : function(duration, fn, display) {
|
||||||
|
if (this.found) {
|
||||||
|
if (!duration) duration = this.FADE_DURATION;
|
||||||
|
var inc = parseFloat(1.0/duration*20);
|
||||||
|
var n = this.first();
|
||||||
|
n.style.opacity = 0;
|
||||||
|
n.style.display = display || "block";
|
||||||
|
(function fade(duration) {
|
||||||
|
var val = parseFloat(n.style.opacity);
|
||||||
|
if ((val += inc) < 1) {
|
||||||
|
n.style.opacity = val;
|
||||||
|
requestAnimationFrame(fade);
|
||||||
|
}
|
||||||
|
else if (typeof fn == "function") fn.call(n);
|
||||||
|
}(duration));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fadeOut : function(duration, fn) {
|
||||||
|
if (this.found) {
|
||||||
|
if (!duration) duration = this.FADE_DURATION;
|
||||||
|
var inc = parseFloat(1.0/duration*20);
|
||||||
|
var n = this.first();
|
||||||
|
n.style.opacity = 1;
|
||||||
|
(function fade(duration) {
|
||||||
|
var val = parseFloat(n.style.opacity);
|
||||||
|
if ((val -= inc) < 0) {
|
||||||
|
n.style.display = "none";
|
||||||
|
if (typeof fn == "function") fn.call(n);
|
||||||
|
} else {
|
||||||
|
n.style.opacity = val;
|
||||||
|
requestAnimationFrame(fade);
|
||||||
|
}
|
||||||
|
}(duration));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ready : function(fn) {
|
||||||
|
this.context.addEventListener('DOMContentLoaded', fn);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Svan.isNone = isNone;
|
||||||
|
Svan.isStr = isStr;
|
||||||
|
Svan.isObj = isObj;
|
||||||
|
Svan.isFunc = isFunc;
|
||||||
|
Svan.eachObj = function(obj, fn, context) {
|
||||||
|
for (var prop in obj) {
|
||||||
|
if (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(data) {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if(this.status==200) {
|
||||||
|
if (isFunc(def.done)) def.done.call(def.context, data, this.responseText, this.statusText);
|
||||||
|
}
|
||||||
|
else if (isFunc(def.fail)) def.fail.call(def.context, data, this.responseText, this.statusText);
|
||||||
|
if (isFunc(def.always)) def.always.call(def.context, data, this.responseText, this.statusText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!isNone(def.timeout) && def.async) xhr.timeout = def.timeout;
|
||||||
|
if (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 = '';
|
||||||
|
if (isObj(def.data)) {
|
||||||
|
this.eachObj(def.data, function(k, v) {
|
||||||
|
qs += k+'='+encodeURIComponent(v);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
xhr.send(qs);
|
||||||
|
}
|
||||||
|
|
||||||
|
var init = Svan.init = function(selector, context) {
|
||||||
|
this.FADE_DURATION = 700;
|
||||||
|
this.VERSION = 0.4;
|
||||||
|
this.context = isNone(context) ? document : context;
|
||||||
|
this.list = isStr(selector) ? [].slice.call(this.context.querySelectorAll(selector))
|
||||||
|
: (isObj(selector) && !isNone(selector.nodeType) ? [selector] : []);
|
||||||
|
this.found = this.list.length > 0;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
init.prototype = Svan.prototype;
|
||||||
|
window.Svan = Svan;
|
||||||
|
if (isNone(window.$)) window.$ = Svan;
|
||||||
|
|
||||||
|
}());
|
||||||
Loading…
Reference in New Issue
Block a user