first commit

DekusDenial · Apr 2, 2012 · 4eb5a78 · 4eb5a78
1 parent feaf65a
commit 4eb5a78
Show file tree

Hide file tree

Showing 13 changed files with 291 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.sass-cache
+.DS_Store
diff --git a/config.rb b/config.rb
@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+output_style = :compact
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/images/bg_dark.png b/images/bg_dark.png
diff --git a/index.html b/index.html
@@ -1,85 +1,41 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset='utf-8'>
+  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
-
+  <title>Compact Markup Evaluator</title>
-  <title>DekusDenial/Compact-Markup-Evaluator @ GitHub</title>
+  <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
-
-  <style type="text/css">
-    body {
-      margin-top: 1.0em;
-      background-color: #ddc0df;
-      font-family: Helvetica, Arial, FreeSans, san-serif;
-      color: #000000;
-    }
-    #container {
-      margin: 0 auto;
-      width: 700px;
-    }
-    h1 { font-size: 3.8em; color: #223f20; margin-bottom: 3px; }
-    h1 .small { font-size: 0.4em; }
-    h1 a { text-decoration: none }
-    h2 { font-size: 1.5em; color: #223f20; }
-    h3 { text-align: center; color: #223f20; }
-    a { color: #223f20; }
-    .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
-    .download { float: right; }
-    pre { background: #000; color: #fff; padding: 15px;}
-    hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
-    .footer { text-align:center; padding-top:30px; font-style: italic; }
-  </style>
 </head>
-
+<body onload="prettyPrint()">
-<body>
+  <div class="input">
-  <a href="https://github.com/DekusDenial/Compact-Markup-Evaluator"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+    <form>
-
+      <fieldset id="div_html">
-  <div id="container">
+        <legend title="html">HTML</legend>
-
+        <textarea name="html" id="html" cols="30" rows="10" placeholder="Enter your HTML here..."></textarea>
-    <div class="download">
+      </fieldset>
-      <a href="https://github.com/DekusDenial/Compact-Markup-Evaluator/zipball/master">
+      <fieldset id="div_css">
-        <img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
+        <legend title="css">CSS</legend>
-      <a href="https://github.com/DekusDenial/Compact-Markup-Evaluator/tarball/master">
+        <textarea name="css" id="css" cols="30" rows="10" placeholder="Enter your CSS here..."></textarea>
-        <img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
+      </fieldset>
-    </div>
+      <fieldset id="div_js">
-
+        <legend title="js">JavaScript</legend>
-    <h1><a href="https://github.com/DekusDenial/Compact-Markup-Evaluator">Compact-Markup-Evaluator</a>
+        <textarea name="js" id="js" cols="30" rows="10" placeholder="Enter your JavaScript here..."></textarea>
-      <span class="small">by <a href="https://github.com/DekusDenial">DekusDenial</a></span></h1>
+      </fieldset>
-
+      <p>
-    <div class="description">
+        <label><input name="jslib" type="radio" value="jquery" checked="checked">jQuery</label>
-      Place to test your HTML, CSS, and Javascript Code
+        <label><input name="jslib" type="radio" value="mootool">MooTool</label>
-    </div>
+      </p>
-
+    </form>
-
+  </div>
-
+  <div class="output">
-
+    <fieldset>
-
+      <legend>Output View</legend>
-
+      <iframe id="output" frameborder="0"></iframe>
-
+    </fieldset>
-
-
-
-
-
-      <h2>Contact</h2>
-      <p>Dekus (dekusdenial@hotmail.com)<br/>      </p>
 
-
-    <h2>Download</h2>
-    <p>
-      You can download this project in either
-      <a href="https://github.com/DekusDenial/Compact-Markup-Evaluator/zipball/master">zip</a> or
-      <a href="https://github.com/DekusDenial/Compact-Markup-Evaluator/tarball/master">tar formats.
-    </p>
-    <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
-      by running:
-      <pre>$ git clone git://github.com/DekusDenial/Compact-Markup-Evaluator</pre>
-    </p>
-
-    <div class="footer">
-      get the source code on GitHub : <a href="https://github.com/DekusDenial/Compact-Markup-Evaluator">DekusDenial/Compact-Markup-Evaluator</a>
-    </div>
-
   </div>
-
+
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script type="text/javascript" src="js/prettify.js"></script>
+  <script type="text/javascript" src="js/application.js"></script>
 </body>
-</html>
+</html>
diff --git a/js/application.js b/js/application.js
@@ -0,0 +1,51 @@
+(function(){
+
+  function elementSupportsAttribute(element, attribute) {
+    return (attribute in document.createElement(element));
+  };
+
+  if (!elementSupportsAttribute('textarea', 'placeholder')) {
+    // Fallback for browsers that don't support HTML5 placeholder attribute
+    var $titles = $('legend'), $txt = $titles.siblings();
+    $.each($titles, function(_, title) {
+      $txt.filter('#' + $(title).attr('title'))
+          .data('text', 'Enter your ' + title.innerText + ' here...')
+          .css('color', '#999')
+          .on('focus', function() {
+            if (this.value == $(this).data('text')) {
+              this.value = '';
+            }
+          })
+          .on('blur', function() {
+            if (this.value == '') {
+              this.value = $(this).data('text');
+            }
+          });
+    });
+  }
+
+  var $output = $('iframe#output'), inner = $output.contents();
+  var body = inner.find('body').css('background', 'white');
+  var styles = inner.find('head').append('<style>').children('style');
+  // make jQuery and its alias available to the iframe
+  var $jslib = $('input:checked');
+  if ($jslib && $jslib.val() == 'jquery') {
+    $output[0].contentWindow.$ = $output[0].contentWindow.jQuery = window.top.$;
+    window.output_context = $output[0].contentWindow.output_context = $output[0].contentWindow.document;
+  }
+
+
+    $('textarea').on('keyup', function() {
+      var $area = $(this);
+     if ($area.attr('id') === 'html') {
+        body.html($area.val());
+      } else if (($area.attr('id') === 'css')) {
+        styles.text($area.val());
+      } else {
+        // $output[0].contentWindow.eval('(function (){ ' + $area.val() + ' })()');
+        // $('iframe')[0].contentWindow.$('p', $('iframe').contents().find('body'));
+        $output[0].contentWindow.eval($area.val());
+      }
+    });
+
+})();