Permalink
Browse files

Merge branch 'master' into gh-pages

  • Loading branch information...
2 parents 1af487c + 5159268 commit f613fe98eca3ff7bff0a9a49dde0ef839dc60bb4 @marianoguerra committed Jun 20, 2012
Showing with 1,529 additions and 0 deletions.
  1. +60 −0 README.rest
  2. +4 −0 build.sh
  3. +62 −0 css/style.css
  4. +51 −0 index.html
  5. +83 −0 js/demo.js
  6. +128 −0 src/jquery.lego.js
  7. +261 −0 src/legoparser.jison
  8. +601 −0 src/legoparser.js
  9. +30 −0 src/legoparser.stub.js
  10. +2 −0 templates/legoparser.end.js
  11. +16 −0 templates/legoparser.start.js
  12. +18 −0 test/index.html
  13. +213 −0 test/test.js
View
@@ -0,0 +1,60 @@
+legojs - generate HTML with CSS-like selectors
+==============================================
+
+legojs is an js module that allows to generate complex HTML using
+a syntax that is similar to CSS selectors.
+
+legojs is inspired by zen-coding: https://code.google.com/p/zen-coding/
+
+get it
+------
+
+::
+
+ git clone https://github.com/marianoguerra/legojs
+
+build it
+--------
+
+this builds the parser for the expressions
+
+::
+
+ cd legojs
+ ./build.sh
+
+try it
+------
+
+http://marianoguerra.github.com/legojs/
+
+test it
+-------
+
+http://marianoguerra.github.com/legojs/test
+
+or open test/index.html in your browser
+
+use it
+------
+
+there are two ways of using it, one is like any normal .js file, just add
+a script tag and import it (see test/index.html for an example)
+
+the other one is using an AMD loader like requirejs, in this case you
+just require the lib, it will return you the legojs function standalone and
+will add the function to the jquery object in $.lego so you can just ignore it
+and use $.lego or use the returned function itself.
+
+for an example of out to use it with requirejs see the main page at index.html
+
+author
+------
+
+Mariano Guerra
+
+license
+-------
+
+BSD (+ optional beer to the author)
+
View
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+jison src/legoparser.jison -o src/legoparser.js
+cat templates/legoparser.start.js src/legoparser.js templates/legoparser.end.js > src/legoparser.js.tmp
+mv src/legoparser.js.tmp src/legoparser.js
View
@@ -0,0 +1,62 @@
+body{
+ color: #f5f5f5;
+ background-color: #222;
+ font-style: arial;
+}
+
+
+h1{
+ text-align: center;
+}
+
+p.main{
+ font-style: italic;
+ text-align: center;
+}
+
+em, a{
+ color: #2DA6FF;
+}
+
+strong{
+ color: #cc2222;
+}
+
+.ide{
+ margin: 2em 20%;
+ width: 60%;
+}
+
+#code{
+ margin: 1em;
+ width: 78%;
+ height: 5em;
+ padding: 1em;
+}
+
+.ide label, #code, .output{
+ margin-left: 10%;
+}
+
+.buttons{
+ width: 100%;
+ text-align: center;
+}
+
+#html, #raw, #tree{
+ width: 98%;
+ margin: 1%;
+}
+
+.output label{
+ margin: 0;
+ font-weight: bold;
+}
+
+#footer{
+ position: fixed;
+ font-size: small;
+ bottom: 1em;
+ width: 100%;
+ text-align: center;
+}
View
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>legojs</title>
+ <link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
+ <link rel="stylesheet" href="http://css.cdn.tl/normalize.css">
+ <link rel="stylesheet" href="css/style.css">
+
+ <script data-main="js/demo" src="http://requirejs.org/docs/release/2.0.2/minified/require.js"></script>
+
+</head>
+<body>
+<h1><img src="img/lego.png" alt="lego">js</h1>
+
+ <p class="main">HTML from CSS-like selectors</p>
+
+ <div class="ide">
+ <label for="code">write a <em>legojs</em> expression below and click <strong>run</strong></label>
+ <textarea id="code">
+div > (
+ (h1 > (img[src="img/lego.png" alt="lego"] + {js})) +
+ p.main {HTML from CSS-like selectors} +
+ (p > ({write a } + em {legojs} + { expression below and click } + strong {run}))
+)
+ </textarea>
+ <div class="buttons">
+ <select id="snippets"></select>
+ <button id="load">load</button>
+ <button id="run">run</button>
+ </div>
+
+ <div class="output">
+ <label for="html">result</label>
+ <div id="html"></div>
+ <label for="raw prettyprint">html</label>
+ <div id="raw"></div>
+ <label for="tree">tree</label>
+ <pre id="tree prettyprint"></pre>
+ </div>
+
+ </div>
+
+ <div id="footer">
+ <span><a href="test/">run tests</a></span> <em>|</em>
+ <span><strong>reference:</strong> tag [attr1="value" attr2="value"] #id .class1.class2 * 3 {text} &gt; (childtag1 + childtag2) </a></span>
+ </div>
+ <a href="https://github.com/marianoguerra/legojs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+</body>
+</html>
View
@@ -0,0 +1,83 @@
+/*global require */
+require.config({
+ baseUrl: "js/",
+ paths: {
+ "json": "http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2",
+ "ace": "http://cdnjs.cloudflare.com/ajax/libs/ace/0.2.0/ace",
+ "jquery": "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
+ "prettyPrint": "http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify",
+ "legoparser": "../src/legoparser"
+ },
+
+ shim: {
+ json: {
+ exports: "JSON"
+ },
+ ace: {
+ exports: "ace"
+ },
+ jquery: {
+ exports: "jQuery"
+ },
+ prettyPrint: {
+ exports: "prettyPrint"
+ }
+ }
+});
+
+require(["jquery", "ace", "../src/jquery.lego", "prettyPrint", "json"], function ($, ace, legojs, prettyPrint, JSON) {
+ "use strict";
+ var snippets, key, $select = $("#snippets");
+
+ function getCode() {
+ return $.trim($("#code").val());
+ }
+
+ function updateOutput(code) {
+ var tree = $.lego.parser.parse(code);
+
+ $("#tree").html(JSON.stringify(tree, null, 2));
+ $("#html").html($.lego(code));
+ $("#raw").text($("#html").html());
+ }
+
+ function onRunClick() {
+ var code = getCode();
+
+ updateOutput(code);
+ }
+
+ function onLoadClick() {
+ var name = $("#snippets>option:selected").val();
+ $("#code").val(snippets[name]);
+ }
+
+ $("#run").click(onRunClick);
+ $("#load").click(onLoadClick);
+
+ snippets = {
+ "tag": "p",
+ "tag with content": "p {hello world}",
+ "tag with id": "p#myid",
+ "tag with class": "p.important",
+ "tag with classes": "p.important.first",
+ "tag with id and classes": "p#intro.important.first",
+ "tag with id, classes and content": "p#intro.important.first {hi}",
+ "just id": "#wrapper",
+ "just class": ".paragraph",
+ "id and class": "#wrapper.paragraph",
+ "child": "li > a {click}",
+ "attribute": 'li > a[href="http://marianoguerra.com.ar"] {click}',
+ "attributes": 'img[src="img/lego.png" alt="lego"]',
+ "repetition": "#wrapper > p * 3 {hi}",
+ "id enumeration": "#wrapper > p#item-$ * 3",
+ "siblings and grouping": "#wrapper > ({welcome } + em {username} + strong {!})",
+ "page title": 'h1>(img[src="img/lego.png" alt="lego"] + {js})',
+ "first paragraph": 'p > ({write a } + em {legojs} + { expression below and click } + strong {run})',
+ "list items": 'ul > li#item-$ * 3 {list item}'
+ };
+
+ for (key in snippets) {
+ $select.append($.lego('option[value="' + key + '"] {' + key + '}'));
+ }
+});
View
@@ -0,0 +1,128 @@
+/*global define*/
+(function (root, factory) {
+ "use strict";
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['jquery', 'legoparser'], function (jQuery, legoparser) {
+ // Also create a global in case some scripts
+ // that are loaded still are looking for
+ // a global even when an AMD loader is in use.
+ return (root.legojs = factory(jQuery, legoparser));
+ });
+ } else {
+ // Browser globals
+ root.legojs = factory(root.jQuery, root.legoparser);
+ }
+}(this, function ($, legoparser) {
+ "use strict";
+
+ // if already defined don't redefine it
+ if ($.lego) {
+ return $.lego;
+ }
+
+ var l, events = (
+ "blur focus focusin focusout load resize scroll unload click dblclick " +
+ "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+ "change select submit keydown keypress keyup error").split(" ");
+
+ function getFirstKey(obj) {
+ for (var key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ return key;
+ }
+ }
+ }
+
+ $.lego = function (tag) {
+ var key, $tag, i, childs, attr, options;
+
+ if (typeof(tag) === "string") {
+ // this will only be available if you import the real legoparser
+ return $.lego(legoparser.parse(tag));
+ } else if ($.isArray(tag)) {
+
+ if (tag.length === 1) {
+
+ if (typeof(tag[0]) === "string") {
+ return $.lego({"div": {"$childs": tag}});
+ } else {
+ return $.lego(tag[0]);
+ }
+
+ } else {
+ return $.map(tag, function (item) {
+ return $.lego(item);
+ });
+ }
+
+ } else {
+ key = getFirstKey(tag);
+ options = tag[key];
+ tag = key;
+
+ $tag = $("<" + tag + ">");
+
+ if (options) {
+
+ if (typeof options === "string") {
+ $tag.html(options);
+ } else {
+
+ for (key in options) {
+
+ if (key === "$childs") {
+ childs = options[key];
+
+ if (!$.isArray(childs)) {
+ childs = [childs];
+ }
+
+ for (i = 0; i < childs.length; i += 1) {
+
+ if ($.isPlainObject(childs[i])) {
+ $.lego(childs[i]).appendTo($tag);
+ } else {
+ $tag.append(childs[i]);
+ }
+
+ }
+ }
+
+ if (options.hasOwnProperty(key)) {
+
+ if (key[0] === "$") {
+ attr = key.slice(1);
+
+ if (attr !== "childs") {
+
+ if ($.inArray(attr, events) !== -1) {
+ $tag[attr](options[key]);
+ } else if ($.isFunction(options[key])) {
+ $.bind(attr, options[key]);
+ } else {
+ $.lego.error("unknown internal attribute " + attr);
+ }
+
+ }
+
+ } else if (key[0] === "@") {
+ attr = key.slice(1);
+ $tag.data(attr, options[key]);
+ } else if (key === "class" && $.isArray(options[key])) {
+ $tag.attr(key, options[key].join(" "));
+ } else {
+ $tag.attr(key, options[key]);
+ }
+ }
+ }
+ }
+ }
+
+ return $tag;
+ }
+ };
+
+ $.lego.parser = legoparser;
+ return $.lego;
+}));
Oops, something went wrong.

0 comments on commit f613fe9

Please sign in to comment.