Skip to content
Browse files

add page to the master branch

  • Loading branch information...
1 parent 89a5b02 commit 71e6b5636fa08b7d1a7728927388295c8fc1ef67 @marianoguerra committed Jun 20, 2012
Showing with 197 additions and 1 deletion.
  1. +62 −0 css/style.css
  2. +51 −0 index.html
  3. +83 −0 js/demo.js
  4. +1 −1 src/jquery.lego.js
View
62 css/style.css
@@ -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
51 index.html
@@ -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
83 js/demo.js
@@ -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
2 src/jquery.lego.js
@@ -3,7 +3,7 @@
"use strict";
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
- define(['jquery', 'legojs.parser'], function (jQuery, legoparser) {
+ 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.

0 comments on commit 71e6b56

Please sign in to comment.
Something went wrong with that request. Please try again.