release v0.4.0

Author: bcinarli

.eslintignore

@@ -39,6 +39,7 @@ node_modules/
 jspm_packages/
 test/
 build/
+dist/
 
 # Typescript v1 declaration files
 typings/

README.md

@@ -193,7 +193,7 @@ All of the following strings are valid wrapper definitions
 * `<div class='wrapper' id="container"></div>`
 
 ### Element Insertions
-By using `before`, `after`, `prepend` and `append` you can control where to insert newly created elements.
+By using `before`, `after`, `prepend` and `append` you can control where to insert newly created elements. Also with `replaceWith` you can swap the element with a new one.
 
 ``` js
 let el = uxr('.container');
@@ -213,8 +213,46 @@ el.append(uxr('#new'));
 // appends an element add the beginning of selection's content
 el.prepend('<p>This will before "el"</p>');
 el.prepend(uxr('#new'));
+
+// replaces the element with new one
+el.replaceWith('<div id="replaced">Previous element replaced</div>');
 ```
 
+### Traversing
+With traversal methods, you can find adjacent or parent elements accordingly. Almost all traversal methods returns a `uxr` object. You can return the previous `uxr` by chaining `end()` 
+
+```javascript
+
+let el = uxr('li');
+
+// get the immediate parent
+el.closest();
+
+// get the grandparent
+el.closest().closest();
+
+// filter the parents and get the first matched
+el.closest(selector);
+
+// get the next sibling
+el.next();
+
+// get the next sibling if matched 
+el.next(selector);
+
+// get the previous sibling
+el.prev();
+
+// get the previous sibling if matched
+el.prev(selector);
+
+// get the first element in uxr object - selection
+el.first();
+
+// get the last element in uxr object - selection
+el.last();
+``` 
+
 [npm]: https://img.shields.io/npm/v/uxr.svg
 [npm-url]: https://npmjs.com/package/uxr
 

dist/uxr.js

@@ -255,25 +255,15 @@ _.extend.trigger = function (eventName, selector) {
  * filter
  **/
 
-_.extend.filter = function (criteria) {
-    let _this = this;
-    let filtered = _(_this.el.filter(item => item.matches(criteria)));
-
-    filtered.prevObj = this;
+/* global mutated */
 
-    return filtered;
+_.extend.filter = function (criteria) {
+    return mutated(this, this.el.filter(item => item.matches(criteria)));
 };
 
 _.extend.find = function (criteria) {
-    let _this = this;
-    let found = _(_this.el[0].querySelectorAll(criteria));
-
-    found.prevObj = this;
-
-    return found;
+    return mutated(this, this.el[0].querySelectorAll(criteria));
 };
-
-Element.prototype.matches = Element.prototype.matches ? Element.prototype.matches : Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
 /**
  * manipulation
  **/
@@ -282,42 +272,36 @@ Element.prototype.matches = Element.prototype.matches ? Element.prototype.matche
 /* global insertBefore */
 
 _.extend.empty = function () {
-    this.el.forEach(item => item.innerHTML = '');
-
-    return this;
+    return this.el.forEach(item => item.innerHTML = '');
 };
 
 _.extend.remove = function () {
-    this.el.forEach(item => item.parentNode.removeChild(item));
-
-    return this;
+    return this.el.forEach(item => item.parentNode.removeChild(item));
 };
 
 _.extend.append = function (stringOrObject) {
-    this.el.forEach(item => item.appendChild(getInsertableElement(stringOrObject)));
-
-    return this;
+    return this.el.forEach(item => item.appendChild(getInsertableElement(stringOrObject)));
 };
 
 _.extend.prepend = function (stringOrObject) {
-    this.el.forEach(
+    return this.el.forEach(
         item => insertBefore(stringOrObject, item, 'firstChild'));
-
-    return this;
 };
 
 _.extend.after = function (stringOrObject) {
-    this.el.forEach(
+    return this.el.forEach(
         item => insertBefore(stringOrObject, item, 'nextSibling', true));
-
-    return this;
 };
 
 _.extend.before = function (stringOrObject) {
-    this.el.forEach(
+    return this.el.forEach(
         item => insertBefore(stringOrObject, item, 'self', true));
+};
 
-    return this;
+_.extend.replaceWith = function (stringOrObject) {
+    return this.el.map(
+        item => item.parentNode.replaceChild(getInsertableElement(stringOrObject), item)
+    );
 };
 /**
  * ready
@@ -331,32 +315,47 @@ _.ready = function (fn) {
     }
 };
 /**
- * utils
+ * traversing
  **/
 
-/* exported createElementFromString */
+/* global mutated */
 
-// eslint-disable-next-line
-const createElementFromString = str => {
-    let elementString = str.toString();
+_.extend.closest = function (selector) {
+    let el = this.el[0];
 
-    const tagRegex = /([<])?([a-zA-Z]+)/;
-    const theTag = elementString.match(tagRegex);
-    const attrRegex = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g;
-    const mayHaveAttributes = elementString.match(attrRegex) || [];
+    while (el !== null && el.nodeType === 1) {
+        if (el.matches(selector)) {
+            return el;
+        }
 
-    const newElement = document.createElement(theTag[2]);
+        el = el.parentNode;
+    }
 
-    mayHaveAttributes.forEach(attr => {
-        let singleAttrRegex = /([a-zA-Z-]+)=(?:['"])(.*)(?:['"])/g;
-        let theAttr = singleAttrRegex.exec(attr);
+    return null;
+};
 
-        newElement.setAttribute(theAttr[1], theAttr[2]);
-    });
+_.extend.next = function (selector) {
+    return mutated(this, this.el.map(item => item.nextElementSibling).filter(item => selector ? item.matches(selector) : item));
+};
+
+_.extend.prev = function (selector) {
+    return mutated(this, this.el.map(item => item.previousElementSibling).filter(item => selector ? item.matches(selector) : item));
+};
 
-    return newElement;
+_.extend.first = function () {
+    return mutated(this, this.el.filter((item, index) => index === 0));
 };
 
+_.extend.last = function () {
+    let last = this.length - 1;
+    return mutated(this, this.el.filter((item, index) => index === last));
+};
+/**
+ * utils
+ **/
+
+Element.prototype.matches = Element.prototype.matches ? Element.prototype.matches : Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+
 // eslint-disable-next-line
 const normalizeClassName = className => className.charAt(0) === '.' ? className.substr(1) : className;
 
@@ -412,14 +411,32 @@ const insertBefore = (insert, target, ref, parent) => {
 
     to.insertBefore(getInsertableElement(insert), where);
 };
+
+// mutatedObj
+// eslint-disable-next-line
+const mutated = (orgObj, newSet) => {
+    let obj = _(newSet);
+
+    obj.prevObj = orgObj;
+
+    return obj;
+};
 /**
  * wrap
  **/
 
-/* global createElementFromString */
+/* global elementFromString */
+
+const getWrapper = wrapperStr => {
+    let wrapperString = wrapperStr.toString();
+
+    return wrapperString.charAt(0) !== '<' ?
+        document.createElement(wrapperString) :
+        elementFromString(wrapperString);
+};
 
 _.extend.wrap = function (wrapper) {
-    let newWrap = createElementFromString(wrapper);
+    let newWrap = getWrapper(wrapper);
 
     let parent = this.el[0].parentNode;
     let siblings = this.el[0].nextSibling;
@@ -438,7 +455,7 @@ _.extend.wrap = function (wrapper) {
 
 _.extend.wrapAll = function (wrapper) {
     let firstSibling = true;
-    let newWrap = createElementFromString(wrapper);
+    let newWrap = getWrapper(wrapper);
 
     this.el.forEach(item => {
         if (firstSibling) {
@@ -481,5 +498,5 @@ _.extend.unwrap = function (selector) {
 
     return this;
 };
-_.uxr = { version: '0.3.0' };
+_.uxr = { version: '0.4.0' };
 })();