|
|
|
@ -2,101 +2,127 @@ define(function() {
|
|
|
|
|
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.replace = function(el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
this.parentNode.replaceChild(element, this);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
function Element(node) {
|
|
|
|
|
this.obj = node;
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.prepend = function(el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
this.insertBefore(element, this.firstChild);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
this.replace = function (el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
node.parentNode.replaceChild(element.obj, node);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.append = function(el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
this.appendChild(element);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
this.prepend = function (el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
node.insertBefore(element.obj, node.firstChild);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.insertAfter = function(el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
this.parentNode.insertBefore(element, this.nextSibling);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
this.append = function (el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
node.appendChild(element.obj);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.on = function(type, listener, prevent) {
|
|
|
|
|
/*
|
|
|
|
|
Shortcut for `Element.addEventListener`, prevents default event
|
|
|
|
|
by default, set :param prevents: to `false` to change that behavior.
|
|
|
|
|
*/
|
|
|
|
|
this.addEventListener(type, function(event) {
|
|
|
|
|
listener(event);
|
|
|
|
|
if (prevent === undefined || prevent) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
this.insertAfter = function(el) {
|
|
|
|
|
var element = DOM.htmlify(el);
|
|
|
|
|
node.parentNode.insertBefore(element.obj, node.nextSibling);
|
|
|
|
|
return element;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.toggle = function(type, a, b) {
|
|
|
|
|
/*
|
|
|
|
|
Toggle between two internal states on event :param type: e.g. to
|
|
|
|
|
cycle form visibility. Callback :param a: is called on first event,
|
|
|
|
|
:param b: next time.
|
|
|
|
|
/**
|
|
|
|
|
* Shortcut for `Element.addEventListener`, prevents default event
|
|
|
|
|
* by default, set :param prevents: to `false` to change that behavior.
|
|
|
|
|
*/
|
|
|
|
|
this.on = function(type, listener, prevent) {
|
|
|
|
|
node.addEventListener(type, function(event) {
|
|
|
|
|
listener(event);
|
|
|
|
|
if (prevent === undefined || prevent) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
You can skip to the next state without executing the callback with
|
|
|
|
|
`toggler.next()`. You can prevent a cycle when you call `toggler.wait()`
|
|
|
|
|
during an event.
|
|
|
|
|
/**
|
|
|
|
|
* Toggle between two internal states on event :param type: e.g. to
|
|
|
|
|
* cycle form visibility. Callback :param a: is called on first event,
|
|
|
|
|
* :param b: next time.
|
|
|
|
|
*
|
|
|
|
|
* You can skip to the next state without executing the callback with
|
|
|
|
|
* `toggler.next()`. You can prevent a cycle when you call `toggler.wait()`
|
|
|
|
|
* during an event.
|
|
|
|
|
*/
|
|
|
|
|
this.toggle = function(type, a, b) {
|
|
|
|
|
|
|
|
|
|
function Toggle(el, a, b) {
|
|
|
|
|
this.state = false;
|
|
|
|
|
this.el = el;
|
|
|
|
|
this.a = a;
|
|
|
|
|
this.b = b;
|
|
|
|
|
}
|
|
|
|
|
var toggler = new Toggle(a, b);
|
|
|
|
|
this.on(type, function() {
|
|
|
|
|
toggler.next();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Toggle.prototype.next = function next() {
|
|
|
|
|
if (! this.state) {
|
|
|
|
|
this.state = true;
|
|
|
|
|
this.a(this);
|
|
|
|
|
} else {
|
|
|
|
|
this.state = false;
|
|
|
|
|
this.b(this);
|
|
|
|
|
}
|
|
|
|
|
this.detach = function() {
|
|
|
|
|
// Detach an element from the DOM and return it.
|
|
|
|
|
node.parentNode.removeChild(this.obj);
|
|
|
|
|
return this;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Toggle.prototype.wait = function wait() {
|
|
|
|
|
this.state = ! this.state;
|
|
|
|
|
this.remove = function() {
|
|
|
|
|
// IE quirks
|
|
|
|
|
node.parentNode.removeChild(this.obj);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var toggler = new Toggle(this, a, b);
|
|
|
|
|
this.on(type, function() {
|
|
|
|
|
toggler.next();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
this.show = function() {
|
|
|
|
|
node.style.display = "block";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.detach = function() {
|
|
|
|
|
/*
|
|
|
|
|
Detach an element from the DOM and return it.
|
|
|
|
|
*/
|
|
|
|
|
this.hide = function() {
|
|
|
|
|
node.style.display = "none";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.parentNode.removeChild(this);
|
|
|
|
|
return this;
|
|
|
|
|
};
|
|
|
|
|
this.setText = function(text) {
|
|
|
|
|
node.textContent = text;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.remove = function() {
|
|
|
|
|
// Mimimi, I am IE and I am so retarded, mimimi.
|
|
|
|
|
this.parentNode.removeChild(this);
|
|
|
|
|
};
|
|
|
|
|
this.setHtml = function(html) {
|
|
|
|
|
node.innerHTML = html;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.show = function() {
|
|
|
|
|
this.style.display = "block";
|
|
|
|
|
};
|
|
|
|
|
this.blur = function() { node.blur() };
|
|
|
|
|
this.focus = function() { node.focus() };
|
|
|
|
|
this.scrollIntoView = function(args) { node.scrollIntoView(args) };
|
|
|
|
|
|
|
|
|
|
this.setAttribute = function(key, value) { node.setAttribute(key, value) };
|
|
|
|
|
this.getAttribute = function(key) { node.getAttribute(key) };
|
|
|
|
|
|
|
|
|
|
this.classList = node.classList;
|
|
|
|
|
|
|
|
|
|
Object.defineProperties(this, {
|
|
|
|
|
"textContent": {
|
|
|
|
|
get: function() { return node.textContent; },
|
|
|
|
|
set: function(textContent) { node.textContent = textContent; }
|
|
|
|
|
},
|
|
|
|
|
"innerHTML": {
|
|
|
|
|
get: function() { return node.innerHTML; },
|
|
|
|
|
set: function(innerHTML) { node.innerHTML = innerHTML; }
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var Toggle = function(a, b) {
|
|
|
|
|
this.state = false;
|
|
|
|
|
|
|
|
|
|
this.next = function() {
|
|
|
|
|
if (! this.state) {
|
|
|
|
|
this.state = true;
|
|
|
|
|
a(this);
|
|
|
|
|
} else {
|
|
|
|
|
this.state = false;
|
|
|
|
|
b(this);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.Element.prototype.hide = function() {
|
|
|
|
|
this.style.display = "none";
|
|
|
|
|
this.wait = function() {
|
|
|
|
|
this.state = ! this.state;
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var DOM = function(query, root, single) {
|
|
|
|
@ -115,31 +141,43 @@ define(function() {
|
|
|
|
|
root = window.document;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var elements = root.querySelectorAll(query);
|
|
|
|
|
if (root instanceof Element) {
|
|
|
|
|
root = root.obj;
|
|
|
|
|
}
|
|
|
|
|
var elements = [].slice.call(root.querySelectorAll(query), 0);
|
|
|
|
|
|
|
|
|
|
if (elements.length === 0) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (elements.length === 1 && single) {
|
|
|
|
|
return elements[0];
|
|
|
|
|
return new Element(elements[0]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return elements;
|
|
|
|
|
// convert NodeList to Array
|
|
|
|
|
elements = [].slice.call(elements, 0);
|
|
|
|
|
|
|
|
|
|
return elements.map(function(el) {
|
|
|
|
|
return new Element(el);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
DOM.htmlify = function(html) {
|
|
|
|
|
DOM.htmlify = function(el) {
|
|
|
|
|
/*
|
|
|
|
|
Convert :param html: into an Element (if not already).
|
|
|
|
|
*/
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
if (el instanceof Element) {
|
|
|
|
|
return el;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (html instanceof window.Element) {
|
|
|
|
|
return html;
|
|
|
|
|
if (el instanceof window.Element) {
|
|
|
|
|
return new Element(el);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var wrapper = DOM.new("div");
|
|
|
|
|
wrapper.innerHTML = html;
|
|
|
|
|
return wrapper.firstChild;
|
|
|
|
|
wrapper.innerHTML = el;
|
|
|
|
|
return new Element(wrapper.firstChild);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
DOM.new = function(tag, content) {
|
|
|
|
@ -173,4 +211,4 @@ define(function() {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return DOM;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|