First version of tinyDOM, using cssSelector to replicate certain jQuery functionality

4a183070 · Commander-lol · 4a183070 · 4a183070
Commit 4a183070 authored 10 years ago by Commander-lol
--- a/js/tinyDOM.js
+++ b/js/tinyDOM.js
+//Prevent pollution of global namespace with closure
+(function(){
+	var tinyDOM = function(selector){
+		return new tinyDOMFunction(selector);
+	}
+
+	var tinyDOMFunction = function(selector) {
+		var elements = document.querySelectorAll(selector);
+
+		this.length = elements.length;
+		for(var i = 0; i < elements.length; i++){
+			var e = elements.item(i);
+			if(typeof(e.td_prop) === 'undefined'){
+				e.td_prop = {
+					isHidden: false
+				};
+			}
+			this[i] = elements.item(i);
+		}
+
+		return this;
+	}
+
+	tinyDOM.fn = tinyDOMFunction.prototype = {
+		each: function(fn) {
+			var l = this.length;
+			while(l--){
+				fn(l, this[l], this);
+			}
+			return this;
+		},
+		hide: function(){
+			this.each(function(i, e){
+				if(!e.td_prop.isHidden){
+					e.style.td_previousDisplay = e.style.display;
+					e.style.display = 'none';
+					e.td_prop.isHidden = true;
+				}
+			});
+			return this;
+		},
+		show: function(){
+			this.each(function(i, e){
+				if(e.td_prop.isHidden === true){
+					if(typeof(e.style.td_previousDisplay) !== 'undefined'){
+						e.style.display = e.style.td_previousDisplay;
+					} else {
+						e.style.display = 'block';
+					}
+					e.td_prop.isHidden = false;
+				}
+			});
+			return this;
+		},
+		on: function(ev, fn){
+			this.each(function(i, e){
+				e.addEventListener(ev, fn);
+			});
+			return this;
+		},
+		first: function(){
+			if(typeof(this[0]) !== 'undefined'){
+				return this[0];
+			} else {
+				return null;
+			}
+		},
+		data: function(key, value){
+			var e = this[0];
+			if(typeof(value) !== 'undefined'){
+				e.setAttribute('data-'+key, value);
+				return this;
+			} else {
+				return e.getAttribute('data-'+key);
+			}
+		}
+	}
+
+	if(!window.π){
+		window.π = tinyDOM;
+	}
+})();
\ No newline at end of file
--- a/test.html
+++ b/test.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>tinyDOM test</title>
+		<meta charset="utf-8">
+	</head>
+
+	<body>
+		<h1> this is a title </h1>
+		<div id="test">
+			These are <span class="important">words</span>! They are kind of important words too,
+			so it would be <span class='important'>bad</span> if any of them dissapeared.
+		</div>
+
+		<button id="btn-hide">HIDE THINGS</button>
+		<button id="btn-show">SHOW THINGS</button>
+
+		<section class='information' data-href='/info/test.php'>
+			<h2>About tinyDOM functions</h2>
+			<p>
+				tinyDOM operates on dom elements to make it a bit easier
+				to select and manipulate them. It also provides some simple
+				functions to do basic things like hide and show.
+			</p>
+			<p>
+				There are two basic types of target for the built in functions: 
+				any number of elements<sup>[1]</sup> and one exactly one element<sup>[2]</sup>. 
+				An example of [1] would be hiding all elements with the class 'important' whereas
+				an example of [2] would be getting the value of a given data attribute - it wouldn't
+				make sense to perform the second on a group of elements. 
+			</p>
+			<p>
+				As such, where appopriate, tinyDOM will operate only on the first element if a group 
+				are matched by whatever selector is given. Such functions are as follows:
+			</p>
+			<ul>
+				<li>.data(<em>attribute</em>)</li>
+			</ul>
+		</section>
+	</body>
+
+	<script type="text/javascript" src="js/tinyDOM.js"></script>
+	<script type="text/javascript">
+	π('#btn-show').on('click', function(){
+		π('.important').show();
+	});
+
+	π('#btn-hide').on('click', function(){
+		π('.important').hide();
+	});
+
+	π('h1').on('click', function(){
+		console.log(this);
+	});
+	</script>
+</html>
\ No newline at end of file