From 0fce530a46963d845525f80499b239adbc596cb7 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 01:52:14 -0300 Subject: [PATCH 01/14] adding structure of the plugin --- dom-node-appear/dom-node-appear.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 dom-node-appear/dom-node-appear.js diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js new file mode 100644 index 0000000..4d2951a --- /dev/null +++ b/dom-node-appear/dom-node-appear.js @@ -0,0 +1,8 @@ +xui.extend({ + + appears: function(callback) { + var self = this; + + return this; + } +}); From cf78e239c734491a2bfbc43c9acd42f5c96a9c6c Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 01:54:47 -0300 Subject: [PATCH 02/14] catching the selector through of method find --- dom-node-appear/dom-node-appear.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index 4d2951a..1566e9c 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -6,3 +6,14 @@ xui.extend({ return this; } }); + +//It just exists to get the selector +//It saves the reference of the xui and replaces the main "find" in order to save the selector +(function (window) { + var _xui = xui; + window.x$ = window.xui = xui = function(q, context) { + var Xui = new _xui.fn.find(q, context); + Xui.selector = q; + return Xui; + }; +}(window)); \ No newline at end of file From b11b5bfbd9377f5c88b0877ff2c7cbb703d3466b Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 01:56:23 -0300 Subject: [PATCH 03/14] ending the plugin --- dom-node-appear/dom-node-appear.js | 41 ++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index 1566e9c..7560e30 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -1,7 +1,44 @@ xui.extend({ appears: function(callback) { - var self = this; + var self = this, + head = x$('head'), + + //Options of animation + options = { + keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ", + selector: self.selector, + stylesClass: self.selector.replace(".", ""), + styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }" + }, + + //list of events + events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '), + + //Callback of dom node appear + animationStart = function (event) { + var target = x$(event.target), + targetSelector = x$(options.selector); + + targetSelector = targetSelector[targetSelector.length -1]; + + if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') { + callback.call(target[0], target); + } + }; + + //if the keyframes aren't present, add them in a style element + if(!x$("style.domnodeappear-keyframes").length) { + head.bottom(""); + } + + //add animation to selected element + head.bottom("") + + //Attaches events to the document + events.forEach(function (eventString) { + x$(document).on(eventString, animationStart); + }); return this; } @@ -16,4 +53,4 @@ xui.extend({ Xui.selector = q; return Xui; }; -}(window)); \ No newline at end of file +}(window)); From 605d04dda800055153b74153f1049b455eda9d45 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 01:58:49 -0300 Subject: [PATCH 04/14] adding comments --- dom-node-appear/dom-node-appear.js | 106 +++++++++++++++++------------ 1 file changed, 63 insertions(+), 43 deletions(-) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index 7560e30..824eab8 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -1,47 +1,67 @@ xui.extend({ - - appears: function(callback) { - var self = this, - head = x$('head'), - - //Options of animation - options = { - keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ", - selector: self.selector, - stylesClass: self.selector.replace(".", ""), - styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }" - }, - - //list of events - events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '), - - //Callback of dom node appear - animationStart = function (event) { - var target = x$(event.target), - targetSelector = x$(options.selector); - - targetSelector = targetSelector[targetSelector.length -1]; - - if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') { - callback.call(target[0], target); - } - }; - - //if the keyframes aren't present, add them in a style element - if(!x$("style.domnodeappear-keyframes").length) { - head.bottom(""); - } - - //add animation to selected element - head.bottom("") - - //Attaches events to the document - events.forEach(function (eventString) { - x$(document).on(eventString, animationStart); - }); - - return this; - } + /** + * + * This executes a callback only when the element appears on the DOM + * + * @param {Function} callback Function that will be called when the element appears on the DOM. + * @return self + * @example + * + * ### appears + * + * syntax: + * + * appears(callback); + * + * example: + * + * x$('#node').appears(function () { + * //do something + * }); + * + */ + appears: function(callback) { + var self = this, + head = x$('head'), + + //Options of animation + options = { + keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ", + selector: self.selector, + stylesClass: self.selector.replace(".", ""), + styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }" + }, + + //list of events + events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '), + + //Callback of dom node appear + animationStart = function (event) { + var target = x$(event.target), + targetSelector = x$(options.selector); + + targetSelector = targetSelector[targetSelector.length -1]; + + if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') { + callback.call(target[0], target); + } + }; + + //if the keyframes aren't present, add them in a style element + if(!x$("style.domnodeappear-keyframes").length) { + head.bottom(""); + } + + //add animation to selected element + head.bottom("") + + //Attaches events to the document + events.forEach(function (eventString) { + x$(document).on(eventString, animationStart); + }); + + return this; + } }); //It just exists to get the selector From c9c4bb34c74996d5ebd7642d25251cff960b0633 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 01:59:27 -0300 Subject: [PATCH 05/14] adding readme --- dom-node-appear/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 dom-node-appear/README.md diff --git a/dom-node-appear/README.md b/dom-node-appear/README.md new file mode 100644 index 0000000..1c62214 --- /dev/null +++ b/dom-node-appear/README.md @@ -0,0 +1,8 @@ +DOMNodeAppear - .appears +------------- +It's a version of [DOMNodeAppear]() for xuijs. It will be useful when you don't need jquery or don't want to include it. + +For more informations about this: + +* [DOMNodeAppear](https://github.com/liamdanger/jQuery.DOMNodeAppear) +* [Back Alley Coder](http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/) \ No newline at end of file From 0bd6a1a10ea1b1d2106f9d26f1c9fab904e15595 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 02:01:06 -0300 Subject: [PATCH 06/14] adding an example --- dom-node-appear/example.html | 70 ++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 dom-node-appear/example.html diff --git a/dom-node-appear/example.html b/dom-node-appear/example.html new file mode 100644 index 0000000..c50096a --- /dev/null +++ b/dom-node-appear/example.html @@ -0,0 +1,70 @@ + + + + + Dom Node Appear - XUIJS + + + + + + +
+ +

No new Elements

+
+
+ + + + \ No newline at end of file From 86c7260f475d19ca3c0b6673a4ce54da4dd3e637 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 03:00:39 -0300 Subject: [PATCH 07/14] dom-node-appear - fixing the problem with object inheritance --- dom-node-appear/dom-node-appear.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index 824eab8..7e6f3ed 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -68,9 +68,14 @@ xui.extend({ //It saves the reference of the xui and replaces the main "find" in order to save the selector (function (window) { var _xui = xui; + window.x$ = window.xui = xui = function(q, context) { - var Xui = new _xui.fn.find(q, context); - Xui.selector = q; + var Xui = new _xui.fn.find(q, context); + Xui.selector = q; return Xui; }; + + xui.fn = xui.prototype = _xui.prototype; + xui.fn.find.prototype = _xui.fn; + xui.extend = _xui.fn.extend; }(window)); From bafbac37c101fd82a0fa258a998c4f10464d8189 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 17:28:21 -0300 Subject: [PATCH 08/14] dom-node-appear: fixing indentation --- dom-node-appear/dom-node-appear.js | 128 ++++++++++++++--------------- 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index 7e6f3ed..d18e25a 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -1,81 +1,81 @@ xui.extend({ - /** - * - * This executes a callback only when the element appears on the DOM - * - * @param {Function} callback Function that will be called when the element appears on the DOM. - * @return self - * @example - * - * ### appears - * - * syntax: - * - * appears(callback); - * - * example: - * - * x$('#node').appears(function () { - * //do something - * }); - * - */ - appears: function(callback) { - var self = this, - head = x$('head'), + /** + * + * This executes a callback only when the element appears on the DOM + * + * @param {Function} callback Function that will be called when the element appears on the DOM. + * @return self + * @example + * + * ### appears + * + * syntax: + * + * appears(callback); + * + * example: + * + * x$('#node').appears(function () { + * //do something + * }); + * + */ + appears: function(callback) { + var self = this, + head = x$('head'), - //Options of animation - options = { - keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ", - selector: self.selector, - stylesClass: self.selector.replace(".", ""), - styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }" - }, + //Options of animation + options = { + keyframes: "@keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-moz-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-webkit-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-ms-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } } @-o-keyframes nodeInserted {from {clip: rect(1px, auto, auto, auto); } to {clip: rect(0px, auto, auto, auto); } }, ", + selector: self.selector, + stylesClass: self.selector.replace(".", ""), + styles: self.selector + " { animation-name: nodeInserted; -webkit-animation-name: nodeInserted; animation-duration: 0.001s; -webkit-animation-duration: 0.001s; }" + }, - //list of events - events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '), + //list of events + events = 'animationstart webkitAnimationStart oanimationstart MSAnimationStart'.split(' '), - //Callback of dom node appear - animationStart = function (event) { - var target = x$(event.target), - targetSelector = x$(options.selector); + //Callback of dom node appear + animationStart = function (event) { + var target = x$(event.target), + targetSelector = x$(options.selector); - targetSelector = targetSelector[targetSelector.length -1]; + targetSelector = targetSelector[targetSelector.length -1]; - if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') { - callback.call(target[0], target); - } - }; + if ((event.animationName === 'nodeInserted' && target[0] === targetSelector) && typeof callback === 'function') { + callback.call(target[0], target); + } + }; - //if the keyframes aren't present, add them in a style element - if(!x$("style.domnodeappear-keyframes").length) { - head.bottom(""); - } + //if the keyframes aren't present, add them in a style element + if(!x$("style.domnodeappear-keyframes").length) { + head.bottom(""); + } - //add animation to selected element - head.bottom("") + //add animation to selected element + head.bottom("") - //Attaches events to the document - events.forEach(function (eventString) { - x$(document).on(eventString, animationStart); - }); + //Attaches events to the document + events.forEach(function (eventString) { + x$(document).on(eventString, animationStart); + }); - return this; - } + return this; + } }); //It just exists to get the selector //It saves the reference of the xui and replaces the main "find" in order to save the selector (function (window) { - var _xui = xui; + var _xui = xui; - window.x$ = window.xui = xui = function(q, context) { - var Xui = new _xui.fn.find(q, context); - Xui.selector = q; - return Xui; - }; - - xui.fn = xui.prototype = _xui.prototype; - xui.fn.find.prototype = _xui.fn; - xui.extend = _xui.fn.extend; + window.x$ = window.xui = xui = function(q, context) { + var Xui = new _xui.fn.find(q, context); + Xui.selector = q; + return Xui; + }; + + xui.fn = xui.prototype = _xui.prototype; + xui.fn.find.prototype = _xui.fn; + xui.extend = _xui.fn.extend; }(window)); From e1588e6d66a1a83fbaf86c737db754b1a26acb77 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Fri, 28 Mar 2014 17:31:20 -0300 Subject: [PATCH 09/14] dom-node-appear - fixing indentation --- dom-node-appear/example.html | 122 +++++++++++++++++------------------ 1 file changed, 61 insertions(+), 61 deletions(-) diff --git a/dom-node-appear/example.html b/dom-node-appear/example.html index c50096a..1086ec7 100644 --- a/dom-node-appear/example.html +++ b/dom-node-appear/example.html @@ -1,70 +1,70 @@ - - - Dom Node Appear - XUIJS - - + + + Dom Node Appear - XUIJS + + - - - -
- -

No new Elements

-
-
+ + + +
+ +

No new Elements

+
+
- - + node.addClass('new-element node-index-' + countNodes); + prev.remove(); + eventsText.html('New node number ' + countNodes + '!'); + }); + + \ No newline at end of file From 70aadd8c6fa17e9ff82b0757c1f168e0da939390 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Mon, 15 Sep 2014 16:43:03 -0300 Subject: [PATCH 10/14] changing the name to DOMNodeAppear --- dom-node-appear/dom-node-appear.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index d18e25a..96c21b0 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -7,20 +7,20 @@ xui.extend({ * @return self * @example * - * ### appears + * ### DOMNodeAppear * * syntax: * - * appears(callback); + * DOMNodeAppear(callback); * * example: * - * x$('#node').appears(function () { + * x$('#node').DOMNodeAppear(function () { * //do something * }); * */ - appears: function(callback) { + DOMNodeAppear: function(callback) { var self = this, head = x$('head'), From c75a5ab5aed9a2f5392b8468630fe858b58da0a6 Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Mon, 15 Sep 2014 16:43:39 -0300 Subject: [PATCH 11/14] changing the name to DOMNodeAppear --- dom-node-appear/example.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dom-node-appear/example.html b/dom-node-appear/example.html index 1086ec7..9d0a774 100644 --- a/dom-node-appear/example.html +++ b/dom-node-appear/example.html @@ -58,7 +58,7 @@ countNodes++; }); - x$('.node').appears(function (node) { + x$('.node').DOMNodeAppear(function (node) { var prev = x$(node[0].previousSibling); node.addClass('new-element node-index-' + countNodes); @@ -67,4 +67,4 @@ }); - \ No newline at end of file + From 591eb1a1149de68f4b0968c0e93cc24ecd9aaa5d Mon Sep 17 00:00:00 2001 From: Douglas Hipolito Date: Mon, 15 Sep 2014 17:27:08 -0300 Subject: [PATCH 12/14] fixing '.find' method --- dom-node-appear/dom-node-appear.js | 10 +++------- dom-node-appear/example.html | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/dom-node-appear/dom-node-appear.js b/dom-node-appear/dom-node-appear.js index 96c21b0..ff8e346 100644 --- a/dom-node-appear/dom-node-appear.js +++ b/dom-node-appear/dom-node-appear.js @@ -67,15 +67,11 @@ xui.extend({ //It just exists to get the selector //It saves the reference of the xui and replaces the main "find" in order to save the selector (function (window) { - var _xui = xui; + var _find = xui.fn.find; - window.x$ = window.xui = xui = function(q, context) { - var Xui = new _xui.fn.find(q, context); + xui.fn.find = function (q, context) { + var Xui = new _find(q, context); Xui.selector = q; return Xui; }; - - xui.fn = xui.prototype = _xui.prototype; - xui.fn.find.prototype = _xui.fn; - xui.extend = _xui.fn.extend; }(window)); diff --git a/dom-node-appear/example.html b/dom-node-appear/example.html index 9d0a774..57509b4 100644 --- a/dom-node-appear/example.html +++ b/dom-node-appear/example.html @@ -3,7 +3,7 @@ Dom Node Appear - XUIJS - +