Adding content for jQuery plugin example blog

jimschubert · Oct 14, 2012 · db2a512 · db2a512
1 parent 17ff130
commit db2a512
Show file tree

Hide file tree

Showing 8 changed files with 357 additions and 0 deletions.
diff --git a/2012-10-13/example-plugin.js b/2012-10-13/example-plugin.js
@@ -0,0 +1,106 @@
+;
+/* The MIT License
+ 
+    Copyright (c) 2011 Jim Schubert
+
+    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.
+*/
+(function($) {
+    var defaults = {
+        boxCss: "example-box",
+        labelCss: "example-label",
+        keywords: { 
+            "function":"blue", 
+            "this":"blue", 
+            "jQuery":"red",        
+            "var": "blue",
+            "return": "blue",
+            "join": "red",
+            "Object": "green",
+            "RegExp": "green" },
+        onError: function() { },
+        exampleAttr: ""
+    };
+
+    var example = function(opts) {
+        var options = $.extend({}, defaults, opts);
+
+        var wrapperHtml = [
+            '<div class="',
+            options.boxCss,
+            '"></div>'
+        ].join('');
+
+        var labelArr = [
+            '<span class="',
+            options.labelCss,
+            '">',
+            "Example",
+            '</span>'
+        ];
+
+        return this.each(function() {
+            // Find node for replacing text.
+            var replacementNode = $(this).children('code').andSelf().filter('code');
+
+            if(replacementNode.length == 0) {
+                if(typeof options.onError === "function"){
+                    options.onError("No code nodes found");
+                }
+
+                return;
+            }
+
+            var labelText = "Example";
+            if(options.exampleAttr) {
+                labelText = $(this).attr(options.exampleAttr);
+            }
+
+            var labelHtml = [
+                '<span class="',
+                options.labelCss,
+                '">',
+                labelText,
+                '</span>'
+            ].join('');
+
+            $(this).wrap(wrapperHtml);
+            $(this).before(labelHtml);
+
+            var originalText = replacementNode.text();
+
+            Object.keys(options.keywords).forEach(function(key,idx){
+                var replacement = [
+                    '<span class="',
+                    options.keywords[key],
+                    '">',
+                    key,
+                    '</span>'
+                ].join('');
+
+                var re = new RegExp(key,"g");
+                originalText = originalText.replace(re, replacement);
+            });
+
+            replacementNode.html(originalText);
+        });
+    };
+
+    $.fn.example = example;
+})(jQuery);
diff --git a/2012-10-13/goal.html b/2012-10-13/goal.html
@@ -0,0 +1,51 @@
+<html>
+<head>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <link rel="stylesheet" href="prettify.css" type="text/css" />
+</head>
+<style>
+
+body {
+width: 960px;
+margin-left:auto;
+margin-right:auto;
+}
+
+pre { margin: 0; padding: 0; }
+code {
+padding:5px;
+display:block;
+}
+
+div.example-box {
+border:1px dotted #FF0000;
+border-radius: 0px 5px 5px 5px;
+}
+
+span.example-label {
+padding:0px 15px 2px 10px;
+height:20px;
+border:1px dotted #FF0000;
+border-bottom-right-radius: 5px;
+font-size: 0.8em;
+font-style: italic;
+}
+
+</style>
+<body>
+
+<div class="example-box">
+<span class="example-label">Example</span>
+<pre><code class="prettyprint">;(function($) {
+    $.fn.example = function(arg) {
+        console.log(this);
+    };
+})(jQuery);
+</code></pre>
+</div>
+</body>
+<script src="prettify.js" type="text/javascript"></script>
+<script>
+document.addEventListener('load', function (event) { prettyPrint() }, true);
+</script>
+</html>
diff --git a/2012-10-13/index.html b/2012-10-13/index.html
@@ -0,0 +1,113 @@
+<html>
+<head>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <script src="example-plugin.js"></script>
+    <script>
+    $(function() {
+       $('.exemplify-defaults').example(); 
+       $('.exemplify-custom').example({
+            boxCss: "plugin-example",
+            labelCss: "plugin-example-label",
+            exampleAttr: "data-label"
+       });
+
+       $('#noCode').example({
+          onError: function(msg) {
+              $('#errorOutput').text(msg);
+          } 
+       });
+    });
+    </script>
+    <style>
+
+body {
+width: 960px;
+margin-left:auto;
+margin-right:auto;
+}
+
+pre { margin: 0; padding: 0; }
+code {
+padding:5px;
+display:block;
+}
+
+.example-box {
+border:1px dotted #FF0000;
+border-radius: 0px 5px 5px 5px;
+}
+
+.example-label {
+padding:0px 15px 2px 10px;
+height:20px;
+border:1px dotted #FF0000;
+border-bottom-right-radius: 5px;
+font-size: 0.8em;
+font-style: italic;
+}
+
+.plugin-example {
+border: 1px solid rgba(0, 0, 0, 0.2);
+padding: 0 10px 10px 0  ;
+box-shadow: 1px 2px 5px;
+border-radius: 0px 5px 5px 5px;
+margin-top:15px;
+}
+
+.plugin-example-label {
+font-family:console;
+position: relative;
+top: -7px;
+left: -15px;
+border: 1px solid rgba(0, 0, 0, 0.5);
+border-radius: 8px;
+background-color: white;
+padding: 4px;
+text-shadow: 1px 1px 1px grey;
+}
+
+.blue {
+color: blue;
+}
+
+.red {
+color: red;
+}
+    </style>
+</head>
+
+<body>
+<h1>Using defaults</h1>
+
+Inspecting the following code, you should find <code>&lt;div class="example-box"&gt;</div></code>
+and <code>&lt;span class="example-label"&gt;</span></code>
+
+<pre class="exemplify-defaults"><code>;(function($) {
+    $.fn.example = function(arg) {
+        console.log(this);
+    };
+})(jQuery);
+</code></pre>
+
+<h1>Using custom</h1>
+
+Inspecting the following code, you should find <code>&lt;div class="plugin-example-box"&gt;</div></code>
+and <code>&lt;span class="plugin-example-label"&gt;</span></code>
+You should also see that, instead of the 'label' displaying 'Example', it matches whatever text is found in the
+'data-label' attribute on the node.
+
+<pre class="exemplify-custom" data-label="example-plugin.js"><code>;(function($) {
+    $.fn.example = function(arg) {
+        console.log(this);
+    };
+})(jQuery);
+</code></pre>
+
+<h1>This shouldn't be modified</h1>
+<pre id="noCode">
+Here's some example text
+</pre>
+And an output message from the 'onError' function should display here:
+<div id="errorOutput"></div>
+</body>
+</html>
diff --git a/2012-10-13/index1.html b/2012-10-13/index1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <script>
+        ;(function($) {
+            $.fn.example = function(arg) {
+                console.log(this);
+            };
+        })(jQuery);
+    </script>
+</head>
+
+<body>
+    <div class="test-elements">First</div>
+    <div class="test-elements">Second</div>
+</body>
+</html>
diff --git a/2012-10-13/prettify.css b/2012-10-13/prettify.css