RubyGems - sumatra-rails - Versions diffs - 0.0.3.1 → 0.0.4 - Mend

sumatra-rails 0.0.3.1 → 0.0.4

Files changed (31) hide show

data/vendor/assets/javascripts/sumatra/docs/index.html ADDED Viewed

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Sumatra</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+  <link rel="stylesheet" media="all" href="docco.css" />
+</head>
+<body>
+  <div id="container">
+    <div id="background"></div>
+    <ul class="sections">
+        <li id="section-1">
+            <div class="annotation">
+              <div class="pilwrap for-h1">
+                <a class="pilcrow" href="#section-1">&#182;</a>
+              </div>
+              <h1>Sumatra</h1>
+<p>Sumatra is a CoffeeScript framework for writing jQuery plugins harder,
+better, faster, stronger.</p>
+<p>You should use Sumatra if you...</p>
+<ul>
+<li>Encapsulate complex jQuery plugins in a service object and call an
+instance of that service object for each DOM element the plugin
+selector is passed</li>
+<li>Enjoy test-driven development, clear code, and convention over
+configuration</li>
+<li>Believe unicorns are real</li>
+</ul>
+<h2>Why?</h2>
+<p>A lot of jQuery plugins are written to encapsulate a simple bit of
+functionality used throughout the application. But jQuery&#39;s syntax was
+designed to improve the way people write JavaScript. CoffeeScript has a
+similar goal, but approaches it from a different angle, it compiles its
+syntax into JavaScript but does so in a safe, syntactically correct and
+(mostly) readable way. This framework unites the two, and finally allows
+jQuery developers to build plugins in CoffeeScript without making their
+code look, well, downright ugly!</p>
+<h2>The Goods</h2>
+<p>
+  You came here for docs, right?
+  <ul>
+    <li><a href="plugin.js.html">SumatraPlugin</a></li>
+    <li><a href="runtime.js.html">sumatra()</a></li>
+  </ul>
+</p>
+<h2>Installation</h2>
+<h3>Requirements</h3>
+<ul>
+<li>jQuery</li>
+<li>CoffeeScript if you want to develop it..</li>
+</ul>
+<p>We recommend Bower for installing Sumatra as a component:</p>
+<pre><code class="lang-bash">$ bower install sumatra</code></pre>
+<p>However, you can also install Sumatra manually by just including the
+<code>pkg/sumatra.js</code> file in your javascripts directory.</p>
+<h2>Usage</h2>
+<p>Sumatra values convention over configuration, and its usage revolves
+around an established pattern that hopefully others will find useful.</p>
+<h3>Defining a Basic Plugin</h3>
+<p>After loading Sumatra, you can build jQuery plugins that are both clear
+and superbly terse:</p>
+<pre><code class="lang-coffeescript">sumatra &#39;clickMe&#39;, -&gt;
+class ClickMe extends SumatraPlugin
+action: &#39;click&#39;
+perform: (event) =&gt;
+element_id = @element.attr(&#39;id&#39;) || &#39;&lt;div&gt;&#39;
+alert &quot;You just clicked #{element_id}!&quot;</code></pre>
+<p>All this plugin does is show an <code>alert()</code> when the element is clicked.
+You can define a single action with <code>action:</code> and then define the
+<code>perform()</code> event handler that binds to whatever action you&#39;ve set
+on the element.</p>
+<p>To bind an element to this event, just call it like any normal
+jQuery plugin:</p>
+<pre><code class="lang-coffeescript">$(&#39;#my_element&#39;).clickMe();</code></pre>
+<h3>Parameters</h3>
+<p>You can also make plugins that pass in options. All Sumatra plugins
+take an <code>options</code> hash as their only argument, regardless of whether
+the service object uses them or not.</p>
+<pre><code class="lang-coffeescript">sumatra &#39;ajaxSubmit&#39;, -&gt;
+class AjaxSubmit extends SumatraPlugin
+action: &#39;submit&#39;
+mergeOptions: -&gt;
+@defaults = @_getFormDefaults()
+_.extend(@options, @defaults)
+perform: (event) =&gt;
+event.preventDefault()
+event.stopPropagation()
+$.ajax @options
+_getFormDefaults: -&gt;
+{
+url: @element.attr(&#39;action&#39;)
+type: @element.attr(&#39;method&#39;)
+error: (message, status, xhr) -&gt;
+console.log status, message, xhr
+alert &quot;#{status}: #{message}&quot;
+}</code></pre>
+<p>This is an example of <a href="http://jquery.malsup.com/form">ajaxSubmit from the jQuery.form plugin</a>,
+implemented using Sumatra. It would especially be useful when rendering
+an inline response with JSON, using something such as Handlebars to
+compile the JSON data into a logic-less client-side template...</p>
+<pre><code class="lang-coffeescript">$(&#39;form&#39;).ajaxSubmit \
+dataType: &#39;json&#39;
+success: (context) =&gt;
+template = Handlebars.compile $(&#39;#response_template&#39;)
+response = template(context)
+@element.html response</code></pre>
+<h3>Basic Properties</h3>
+<p>As a by-product of the jQuery instantation process, each <code>SumatraPlugin</code>
+comes with the following three properties, for free:</p>
+<ul>
+<li><strong>element:</strong> References a single jQuery DOM Object, which can perform
+basic functionality on the page. It is obtained from the collection of
+objects which matched the plugin&#39;s selector upon instantiation.</li>
+<li><strong>index:</strong> The index of the jQuery DOM Object in the collection of
+objects which matched the plugin&#39;s selector upon instantiation.</li>
+<li><strong>options:</strong> A Hash-notated Object obtained as the only argument in
+the jQuery plugin when instantiated. This object is then merged with
+the <code>defaults</code> hash, which are default params in the plugin&#39;s
+definition, before initialization occurs.</li>
+</ul>
+<h3>Workflow</h3>
+<p>Each SumatraPlugin has a &quot;workflow&quot; that is expressed as a series of
+methods, all run in the <code>constructor</code> of the object. The constructor
+is responsible for setup of the object&#39;s basic properties. This method
+should never be overridden, instead, each step of the instantiation
+process can be controlled by overriding one of the following methods:</p>
+<ul>
+<li><strong>mergeOptions:</strong> Merge the options with the defaults hash. You can
+override this to use attributes from <code>@element</code> as defaults instead.</li>
+<li><strong>initialize:</strong> The main override of the constructor method, this is
+where one would actually &quot;construct&quot; the objects they are going to be
+using in this plugin instance, bind events, and call helper methods.</li>
+<li><strong>bindEvents:</strong> This is where the <code>action:</code> event should be bound in
+some way. In many cases, this is overridden to bind other events as
+well as the <code>action:</code>, or binding the event as a <code>$(document).on</code>.</li>
+<li><strong>perform:</strong> The event handler of the plugin, this is normally called
+when the <code>action:</code> event is fired, but it must be defined if it is
+called or it will throw an error.</li>
+</ul>
+<p>You can define more methods, but these are the only public methods that
+should be overridden. Any method beginning with <code>_</code> is considered
+&quot;private&quot; and should not be overridden. Please carry this convention
+to your own code as well.</p>
+<h2>Development</h2>
+<p>You can build this code into JavaScript by running the following
+command at the root dir:</p>
+<pre><code class="lang-bash">$ npm install &amp;&amp; cake build</code></pre>
+<h3>Contributions</h3>
+<p>Contributions will be accepted via Git/GitHub pull requests, as long as
+you write tests that prove your contributions work. We use Jasmine to
+write tests in CoffeeScript (you know, for the actual framework?) and
+RSpec to write tests for the Rails helpers.</p>
+<h3>Releases</h3>
+<p>All releases will be made in both CoffeeScript and JavaScript, and
+available simultaneously on the Bower and RubyGems package managers.
+We use Bower to manage the standalone JavaScript code which has no
+dependency on Sprockets, Rails, or anything Ruby.</p>
+<p>This code is released under the <a href="https://github.com/tubbo/sumatra/blob/master/LICENSE.md">MIT License</a>.</p>
+            </div>
+        </li>
+    </ul>
+  </div>
+</body>
+</html>

data/vendor/assets/javascripts/sumatra/docs/index.md ADDED Viewed

File without changes

data/vendor/assets/javascripts/sumatra/docs/plugin.js.html ADDED Viewed

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>plugin.js.coffee</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+  <link rel="stylesheet" media="all" href="docco.css" />
+</head>
+<body>
+  <div id="container">
+    <div id="background"></div>
+    <ul class="sections">
+          <li id="title">
+              <div class="annotation">
+                  <h1>plugin.js.coffee</h1>
+              </div>
+          </li>
+        <li id="section-1">
+            <div class="annotation">
+              <div class="pilwrap for-h2">
+                <a class="pilcrow" href="#section-1">&#182;</a>
+              </div>
+              <h2>SumatraPlugin</h2>
+            </div>
+        </li>
+        <li id="section-2">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-2">&#182;</a>
+              </div>
+              <p>A prototype object for common actions when defining jQuery plugins
+in the Sumatra framework. It is designed so that you never have to
+override the constructor. Instead, the constructor sets up a common
+method interface for both initialization (which would happen after
+construction) and the binding of events, a common task in jQuery
+plugins. This prototype even handles some of that for you, with
+the default <code>bindEvents()</code> being bound to call the <code>perform()</code>
+method (which must be defined by the object extending <code>SumatraPlugin</code>)
+whenever the element it was constructed with triggers the event
+defined by <code>action</code>.</p>
+<p>So essentially, you can define almost any jQuery plugin using this
+interface, even though the only thing binding it to the <code>sumatra</code>
+function is its constructor that takes 3 parameters.</p>
+<p><code>SumatraPlugin</code> also has facilities for dealing with an options hash
+and merging said options with defaults. You can define the default
+options for your plugin like so:</p>
+<pre><code>sumatra &#39;clickToGo&#39;, -&gt;
+  class ClickToGo extends SumatraPlugin
+    action: &#39;click&#39;
+    defaults: { to: &#39;http://google.com&#39; }
+    perform: (event) =&gt;
+      if confirm &quot;Are you sure you want to go to #{@options.goTo}?&quot;
+        window.location = @options.goTo</code></pre>
+<p>Then, when instantiating, just override them.</p>
+<pre><code>$(&#39;a&#39;).clickToGo(to: &#39;http://yahoo.com&#39;);</code></pre>
+<p>This removes the need for writing that boilerplate options hash extend
+code every time you write a jQuery plugin that takes options. All
+plugins defined with <code>sumatra()</code> take an optional options hash, which is
+<code>{}</code> by default, in case your plugin doesn&#39;t require options.</p>
+            </div>
+            <div class="content"><div class="highlight"><pre><span class="class"><span class="keyword">class</span> @<span class="title">SumatraPlugin</span></span></pre></div></div>
+        </li>
+        <li id="section-3">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-3">&#182;</a>
+              </div>
+              <p>The event to bind to if <code>perform()</code> is defined.</p>
+            </div>
+            <div class="content"><div class="highlight"><pre>action: <span class="string">'one'</span></pre></div></div>
+        </li>
+        <li id="section-4">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-4">&#182;</a>
+              </div>
+              <p>A hash of attributes that are extended with an options hash passed
+into the jQuery plugin upon instantiation. Useful for setting up
+data that is required.</p>
+            </div>
+            <div class="content"><div class="highlight"><pre>defaults: {}</pre></div></div>
+        </li>
+        <li id="section-5">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-5">&#182;</a>
+              </div>
+              <p>Instantiate a <code>SumatraPlugin</code> and bind it to the current element
+with options. This also initiates the workflow.</p>
+<p><strong>DO NOT OVERRIDE!!</strong></p>
+            </div>
+            <div class="content"><div class="highlight"><pre>constructor: (current_element, index_of_query, init_options) -&gt;
+    <span class="property">@element</span> = $(current_element)
+    <span class="property">@index</span> = index_of_query
+    <span class="property">@options</span> = <span class="property">@mergeDefaultsWith</span> init_options
+    <span class="property">@initialize</span>() <span class="keyword">and</span> <span class="property">@bindEvents</span>()</pre></div></div>
+        </li>
+        <li id="section-6">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-6">&#182;</a>
+              </div>
+              <p>Merge <code>options</code> hash with the <code>defaults</code> as set in the definition
+of this object.</p>
+            </div>
+            <div class="content"><div class="highlight"><pre>mergeDefaultsWith: (options) -&gt;
+    _.extend <span class="property">@defaults</span>, <span class="property">@options</span></pre></div></div>
+        </li>
+        <li id="section-7">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-7">&#182;</a>
+              </div>
+              <p>Run custom constructor code, but blocks instantiation if this method
+returns <code>false</code>. This method was pretty much designed to be overridden.</p>
+            </div>
+            <div class="content"><div class="highlight"><pre>initialize: -&gt;
+    <span class="literal">true</span></pre></div></div>
+        </li>
+        <li id="section-8">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-8">&#182;</a>
+              </div>
+              <p>Bind the <code>perform()</code> method to the <code>action</code> as set in the definition
+of this plugin. Overriding this method removes the guarantee that
+perform() will be called at all...</p>
+            </div>
+            <div class="content"><div class="highlight"><pre>bindEvents: -&gt;
+    <span class="keyword">if</span> <span class="property">@action</span>?
+      <span class="property">@element</span>.<span class="literal">on</span> <span class="property">@action</span>, <span class="property">@perform</span></pre></div></div>
+        </li>
+        <li id="section-9">
+            <div class="annotation">
+              <div class="pilwrap ">
+                <a class="pilcrow" href="#section-9">&#182;</a>
+              </div>
+              <p>The event binding that handles <code>action</code>. Override this with your own
+method. You must override this method or the <code>bindEvents</code> method to
+get this plugin to do anything. It takes a single argument, <code>event</code>,
+which represents the given DOMEvent represented by <code>action</code> as passed
+in by <code>jQuery.on</code>.</p>
+            </div>
+            <div class="content"><div class="highlight"><pre>perform: <span class="literal">null</span></pre></div></div>
+        </li>
+    </ul>
+  </div>
+</body>
+</html>

data/vendor/assets/javascripts/sumatra/docs/public/fonts/aller-bold.eot ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/aller-bold.ttf ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/aller-bold.woff ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/aller-light.eot ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/aller-light.ttf ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/aller-light.woff ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/fleurons.eot ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/fleurons.ttf ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/fleurons.woff ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/novecento-bold.eot ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/novecento-bold.ttf ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/fonts/novecento-bold.woff ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/images/gray.png ADDED Viewed

Binary file

data/vendor/assets/javascripts/sumatra/docs/public/stylesheets/normalize.css ADDED Viewed

@@ -0,0 +1,375 @@
+/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * Corrects `block` display not defined in IE 8/9.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+[hidden] {
+    display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Sets default font family to sans-serif.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+/*
+ * Removes default margin.
+ */
+body {
+    margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+a:focus {
+    outline: thin dotted;
+}
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+a:active,
+a:hover {
+    outline: 0;
+}
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
+ * Safari 5, and Chrome.
+ */
+h1 {
+    font-size: 2em;
+}
+/*
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+b,
+strong {
+    font-weight: bold;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+    font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 8/9.
+ */
+mark {
+    background: #ff0;
+    color: #000;
+}
+/*
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+/*
+ * Sets consistent quote types.
+ */
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+small {
+    font-size: 80%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.5em;
+}
+sub {
+    bottom: -0.25em;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * Removes border when inside `a` element in IE 8/9.
+ */
+img {
+    border: 0;
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+    overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+figure {
+    margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+    line-height: normal;
+}
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}