From 63920f0da69e3ea928b0abef48d119dd31abb4b4 Mon Sep 17 00:00:00 2001 From: ironchefpython Date: Tue, 28 Jun 2011 20:59:10 +0000 Subject: [PATCH 1/3] change href properties of anchors by default --- lib/weld.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/lib/weld.js b/lib/weld.js index ef1c2cf..e533a69 100644 --- a/lib/weld.js +++ b/lib/weld.js @@ -26,6 +26,7 @@ var inputRegex = /input|select|textarea|option|button/i; var imageRegex = /img/i; + var anchorRegex = /^a$/i; var depth = 0; // The current depth of the traversal, used for debugging. var successIndicator = nodejs ? (color.green + ' ✓' + color.gray) : ' Success'; var failureIndicator = nodejs ? (color.red + ' ✗' + color.gray) : ' Fail'; @@ -292,6 +293,11 @@ if (imageRegex.test(nodeName)) { return 'image'; } + + if (anchorRegex.test(nodeName)) { + return 'anchor'; + } + } } }, @@ -339,6 +345,10 @@ element.setAttribute('src', value); res = true; } + else if (type === 'anchor') { + element.setAttribute('href', value); + res = true; + } else { // simple text assignment. element.textContent = value; res = true; From ef360e4eea3ed3b00ca39c96e040c3cd66f35d39 Mon Sep 17 00:00:00 2001 From: ironchefpython Date: Tue, 28 Jun 2011 14:47:51 -0700 Subject: [PATCH 2/3] updated readme with my thoughts on weld. --- README.md | 337 +++--------------------------------------------------- 1 file changed, 18 insertions(+), 319 deletions(-) diff --git a/README.md b/README.md index 59da94e..b1daa0c 100644 --- a/README.md +++ b/README.md @@ -1,332 +1,31 @@ -![Alt text](https://github.com/hij1nx/weld/raw/master/documentation-assets/github-header.png)
+This is my fork of weld, to add a few enhancements to support my personal projects. -## What is it? +Utimately, I'd like to be have a version of weld that is able to perform the following actions. -Simple. Weld binds data to markup, and can generate markup based on your data. There's NO special syntax or data reshaping required. It works in the browser and in node.js! Weld is currently 3.66Kb uglified with no dependencies other than a valid DOM. Weld will apply values to elements the way that elements expect to have their values set. +var $ = require('jquery'); -## Motivation +require('weld').plugin($); // import weld and register it with jquery as a plugin -- Standards compliant. No foreign concepts such as <%=foo%> or {{foo}}. -- Promote portable code/markup by decoupling decision making from presentation. -- Make both the code and markup more readable and maintainable. -- Allow designers to write up sample markup and test styling without a developer. -- Increase maintainability by developers with various skill sets. -- Code reuse between node.js and the browser +var weldInstance = $('.myDiv').weldable(); // created a "weldable" element -## How does it work? +weldInstance.weld(data) // welds new data to the element -Pass in a parent DOM Element, some data, and optionally some configuration details. -

-  weld(element, data, [config]);
-      
-
+weldInstance.clear(); // removes the element and all siblings -`element` - This is the target node that will be used as the template.
-`data` - This could be any data, an object an array, an array of objects, etc.
-`config` - An object literal (optional), can include any of the items listed in the section below.
+weldInstance.weld(data) // creates the element again, and welds data + // to it -### Config options -`map` - A map function is executed against every match of data-key/element. It gives the opportunity to manipulate the element before it is finalized. Returning false from `map` will cause the traversal of the current branch to stop. -

-  map: function(parent, element, key, val) { 
-    return true; // returning false will cancel the traversal down this branch
-  }
-      
-
-`alias` - An object literal that provides a mapping between data key and a key that will match a class/name/id. This is useful when you have data that doesn't explicitly correlate with the name, class or id of an HTML element. `alias` values may be any of the following: - - * A string - * `false` - * A function that returns a string, `false`, or a _single_ DOM Element - -

-  alias: { 
-    'user_password': false, // causes an item to not get rendered
+weldInstance.append(otherData)              // adds a sibling to the element, and welds 
+                                            // otherData to it
 
-    'user_email': 'email', // use email instead of user_email in the weld match process
+weldInstance.update(dataArray)              // updates the element and all siblings, matching 
+                                            // elements with data based on a key
 
-    'user_name'     : function(parent, element, key, value) {
-      // element is a DOM Element which will be searched for the current key
 
-      // use fullName in place of user_name
-      return "fullName"
-    },
 
-    'user_hometown' : function(parent, element, key, value) {
-      // use an element instead of allowing weld to match based on class/id/name
-      return element.getElementById('hometown');
-    },
-
-    'personal_info'  : function(parent, element, key, value) {
-      if (session.authorized() === false) {
-        // The user requesting this template is not authorized to view other users' personal information so remove the personal info display from the page
-        var emailDisplay = element.getElementById('personal_info');
-        emailDisplay.parentNode.removeChild(emailDisplay);
-
-        // and return false, which will stop weld from traversing the current branch (personal_info)
-        return false;
-      }
-    }
-
-  }
-      
-
-`insert` (override) - A function which enables some logic to be performed before the element is actually inserted into the target. - -see: https://github.com/hij1nx/weld/blob/master/lib/weld.js#L244 for the default implementation. -

-  insert: function(parent, element) {
-    parent.insertBefore(element, parent.firstChild);
-  }
-
- -`debug` - A boolean value that if set to true will display some useful information as the recursion process occurs. More information about this can be found later on in this document. -

-  debug: true
-       
-
- -#### Advanced Options -The following options are the core of weld but can be overridden in special circumstances. This is for hackers and these api's are known to be a bit volitile. **you have been warned**. and now for the list: `siblings`, `traverse`, `elementType`, `set` , `match` - -As the weld core solidifies these methods will be properly documented, but for now you will need to look at the source. - -## Installing from NPM (Node.js Package Manager) -

-  npm install weld
-
-
-## Examples - -### In Node.js -Using JSDOM, we can easily create a DOM, load some libraries and read a file. Let's weld some data! - - var fs = require('fs'), - jsdom = require('jsdom'); - - jsdom.env( - './test.html', - ['./jquery.js', './weld.js'], - function(errors, window) { - - var data = [{ name: 'hij1nx', title : 'code slayer' }, - { name: 'tmpvar', title : 'code pimp' }]; - - window.weld(window.$('.contact')[0], data); - - } - ); - -Here is the corresponding markup that our script above will load... - - - -Here are the results that it will produce... - - - -### In the browser - -index.html - - - - - - - - - - - - -index.js - - var data = [{ name: 'hij1nx', title : 'code slayer' }, - { name: 'tmpvar', title : 'code pimp' }]; - - weld(document.querySelector('.contact'), data); - -### Being explicit about how data-keys relate to elements - -By default, weld uses a heuristic that assumes each of the keys in the data's `key: value` pairs is an '#id', a '.class' or 'name'. This addresses the 80/20 of cases. - -There are cases where the data is not an exact match to the element's identity. In this case, we can use the alias parameter to explicitly define the relationships between data-keys and an element's class/name/id. So, for the following HTML... - - - -Use .contact as the template and `data` as the data... - - var data = [{ name: 'hij1nx', title: 'code exploder' }, - { name: 'tmpvar', title: 'code pimp' }], - - template = document.getElementByClassName('contact')[0]; - -Since there is no .name class in the markup, we need to alias name to something that does exist.. - - weld(template, data, { alias: { 'name': 'firstAndLast' } }); - -This produces.. - - - -### Working with multiple documents -Weld also supports using elements from one document as a data source to another. For example, the following markup in one document (source.html). - - zero - one - two - -and in another document (dest.html).. - -
-
    -
  • This will be removed
  • -
-
- -Weld will automatically import the nodes into the proper document (dest.html)... - - jsdom.env(path.join(__dirname, 'files', 'source.html'), function(serrs, sw) { - var sources = sw.document.getElementsByTagName("span"); - - jsdom.env(path.join(__dirname, 'files', 'dest.html'), [jqpath, wpath], function(errors, window) { - - var $ = window.jQuery; - - window.weld($('li.number')[0], sources); - - }); - }); - -and insert them much like you would expect.. - -
-
    -
  • - zero -
  • -
  • - one -
  • -
  • - two -
  • -
-
- - -## How do I... -For people coming from custom templating paradigms, you might have some of 'how-do-i-do-x' questions. - -### Conditionals -You may want to only render a section of markup depending on the data. - - <% if(person.description) { %> - - <% } %> - -This can be done with the map or alias parameters. - - alias: { - description: false // causes the descriptions to never get rendered. - } - -which is the same as this... - - alias: function(parent, element, key, value) { - if(key==='description') { - return false; - } - } - -but can also be done with the more general purpose `map` parameter. - - map: function(parent, element, key, val) { - if(key==='description') { - return false; - } - } - -### I do some crazy stuff in mustache, how do I do that in weld? -You won't need to do anything crazy in weld, weld is simply javascript, markup and data. - -## Debugging -Debugging recursive data can be a real pain. With the `debug` option, you can see everything that happens as the data is recursed, such as elements that do or dont match, their parents, the keys and values, etc. - -![Alt text](https://github.com/hij1nx/weld/raw/master/documentation-assets/debug.jpg)
-![Alt text](https://github.com/hij1nx/weld/raw/master/documentation-assets/debug-browser.jpg)
- -## Using weld as a plugin to other libraries - -### jQuery - /* - @function {jQuery object} - Turn weld into a jQuery plugin. - @param {object} data - The data which will be used for the weld. - @param {object} config - An optional configuration object. - - Example: $('contacts').weld([ { name: 'John' } ]) - */ - $.fn.weld = function (data, config) { - return this.each (function () { - weld(this, data, config); - }); - }; - - -If you want to learn more about JSDOM, go [here][1] it's an awesome project. - -## Version -0.2.1 - -## Licence - -(The MIT License) - -Copyright (c) 2011 hij1nx , tmpvar - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - - -[1]: https://github.com/tmpvar/jsdom \ No newline at end of file +data = weldInstance.unweld() // The is the key activity I'm trying to support + // My goal is to be able to reverse the weld function + // and extract an object, or an array of objects + // from the same block of HTML that would be a target + // of a weld From e67acc6fee620b8d1afa3e0cf3e02a6decf1285a Mon Sep 17 00:00:00 2001 From: ironchefpython Date: Tue, 28 Jun 2011 16:47:40 -0700 Subject: [PATCH 3/3] Edited README.md via GitHub --- README.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index b1daa0c..5b8e2fb 100644 --- a/README.md +++ b/README.md @@ -2,30 +2,30 @@ This is my fork of weld, to add a few enhancements to support my personal projec Utimately, I'd like to be have a version of weld that is able to perform the following actions. -var $ = require('jquery'); + var $ = require('jquery'); -require('weld').plugin($); // import weld and register it with jquery as a plugin + require('weld').plugin($); // import weld and register it with jquery as a plugin -var weldInstance = $('.myDiv').weldable(); // created a "weldable" element + var weldInstance = $('.myDiv').weldable(); // created a "weldable" element -weldInstance.weld(data) // welds new data to the element + weldInstance.weld(data) // welds new data to the element -weldInstance.clear(); // removes the element and all siblings + weldInstance.clear(); // removes the element and all siblings -weldInstance.weld(data) // creates the element again, and welds data - // to it + weldInstance.weld(data) // creates the element again, and welds data + // to it -weldInstance.append(otherData) // adds a sibling to the element, and welds - // otherData to it + weldInstance.append(otherData) // adds a sibling to the element, and welds + // otherData to it -weldInstance.update(dataArray) // updates the element and all siblings, matching - // elements with data based on a key + weldInstance.update(dataArray) // updates the element and all siblings, matching + // elements with data based on a key -data = weldInstance.unweld() // The is the key activity I'm trying to support - // My goal is to be able to reverse the weld function - // and extract an object, or an array of objects - // from the same block of HTML that would be a target - // of a weld + data = weldInstance.unweld() // The is the key activity I'm trying to support + // My goal is to be able to reverse the weld function + // and extract an object, or an array of objects + // from the same block of HTML that would be a target + // of a weld