Commits

Scott Nixon  committed cc4fb70

Started to Add help to the form.

  • Participants
  • Parent commits aec29e7

Comments (0)

Files changed (5)

File inbounding/dispatch/static/js/bootstrap-1.4.0/bootstrap-modal.js

+/* =========================================================
+ * bootstrap-modal.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#modal
+ * =========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+
+!function( $ ){
+
+  "use strict"
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+  * ======================================================= */
+
+  var transitionEnd
+
+  $(document).ready(function () {
+
+    $.support.transition = (function () {
+      var thisBody = document.body || document.documentElement
+        , thisStyle = thisBody.style
+        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+      return support
+    })()
+
+    // set CSS transition event type
+    if ( $.support.transition ) {
+      transitionEnd = "TransitionEnd"
+      if ( $.browser.webkit ) {
+      	transitionEnd = "webkitTransitionEnd"
+      } else if ( $.browser.mozilla ) {
+      	transitionEnd = "transitionend"
+      } else if ( $.browser.opera ) {
+      	transitionEnd = "oTransitionEnd"
+      }
+    }
+
+  })
+
+
+ /* MODAL PUBLIC CLASS DEFINITION
+  * ============================= */
+
+  var Modal = function ( content, options ) {
+    this.settings = $.extend({}, $.fn.modal.defaults, options)
+    this.$element = $(content)
+      .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+
+    if ( this.settings.show ) {
+      this.show()
+    }
+
+    return this
+  }
+
+  Modal.prototype = {
+
+      toggle: function () {
+        return this[!this.isShown ? 'show' : 'hide']()
+      }
+
+    , show: function () {
+        var that = this
+        this.isShown = true
+        this.$element.trigger('show')
+
+        escape.call(this)
+        backdrop.call(this, function () {
+          var transition = $.support.transition && that.$element.hasClass('fade')
+
+          that.$element
+            .appendTo(document.body)
+            .show()
+
+          if (transition) {
+            that.$element[0].offsetWidth // force reflow
+          }
+
+          that.$element.addClass('in')
+
+          transition ?
+            that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
+            that.$element.trigger('shown')
+
+        })
+
+        return this
+      }
+
+    , hide: function (e) {
+        e && e.preventDefault()
+
+        if ( !this.isShown ) {
+          return this
+        }
+
+        var that = this
+        this.isShown = false
+
+        escape.call(this)
+
+        this.$element
+          .trigger('hide')
+          .removeClass('in')
+
+        $.support.transition && this.$element.hasClass('fade') ?
+          hideWithTransition.call(this) :
+          hideModal.call(this)
+
+        return this
+      }
+
+  }
+
+
+ /* MODAL PRIVATE METHODS
+  * ===================== */
+
+  function hideWithTransition() {
+    // firefox drops transitionEnd events :{o
+    var that = this
+      , timeout = setTimeout(function () {
+          that.$element.unbind(transitionEnd)
+          hideModal.call(that)
+        }, 500)
+
+    this.$element.one(transitionEnd, function () {
+      clearTimeout(timeout)
+      hideModal.call(that)
+    })
+  }
+
+  function hideModal (that) {
+    this.$element
+      .hide()
+      .trigger('hidden')
+
+    backdrop.call(this)
+  }
+
+  function backdrop ( callback ) {
+    var that = this
+      , animate = this.$element.hasClass('fade') ? 'fade' : ''
+    if ( this.isShown && this.settings.backdrop ) {
+      var doAnimate = $.support.transition && animate
+
+      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+        .appendTo(document.body)
+
+      if ( this.settings.backdrop != 'static' ) {
+        this.$backdrop.click($.proxy(this.hide, this))
+      }
+
+      if ( doAnimate ) {
+        this.$backdrop[0].offsetWidth // force reflow
+      }
+
+      this.$backdrop.addClass('in')
+
+      doAnimate ?
+        this.$backdrop.one(transitionEnd, callback) :
+        callback()
+
+    } else if ( !this.isShown && this.$backdrop ) {
+      this.$backdrop.removeClass('in')
+
+      $.support.transition && this.$element.hasClass('fade')?
+        this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :
+        removeBackdrop.call(this)
+
+    } else if ( callback ) {
+       callback()
+    }
+  }
+
+  function removeBackdrop() {
+    this.$backdrop.remove()
+    this.$backdrop = null
+  }
+
+  function escape() {
+    var that = this
+    if ( this.isShown && this.settings.keyboard ) {
+      $(document).bind('keyup.modal', function ( e ) {
+        if ( e.which == 27 ) {
+          that.hide()
+        }
+      })
+    } else if ( !this.isShown ) {
+      $(document).unbind('keyup.modal')
+    }
+  }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.modal = function ( options ) {
+    var modal = this.data('modal')
+
+    if (!modal) {
+
+      if (typeof options == 'string') {
+        options = {
+          show: /show|toggle/.test(options)
+        }
+      }
+
+      return this.each(function () {
+        $(this).data('modal', new Modal(this, options))
+      })
+    }
+
+    if ( options === true ) {
+      return modal
+    }
+
+    if ( typeof options == 'string' ) {
+      modal[options]()
+    } else if ( modal ) {
+      modal.toggle()
+    }
+
+    return this
+  }
+
+  $.fn.modal.Modal = Modal
+
+  $.fn.modal.defaults = {
+    backdrop: false
+  , keyboard: false
+  , show: false
+  }
+
+
+ /* MODAL DATA- IMPLEMENTATION
+  * ========================== */
+
+  $(document).ready(function () {
+    $('body').delegate('[data-controls-modal]', 'click', function (e) {
+      e.preventDefault()
+      var $this = $(this).data('show', true)
+      $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
+    })
+  })
+
+}( window.jQuery || window.ender );

File inbounding/dispatch/static/js/bootstrap-1.4.0/bootstrap-twipsy.js

+/* ==========================================================
+ * bootstrap-twipsy.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#twipsy
+ * Adapted from the original jQuery.tipsy by Jason Frame
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ) {
+
+  "use strict"
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+  * ======================================================= */
+
+  var transitionEnd
+
+  $(document).ready(function () {
+
+    $.support.transition = (function () {
+      var thisBody = document.body || document.documentElement
+        , thisStyle = thisBody.style
+        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+      return support
+    })()
+
+    // set CSS transition event type
+    if ( $.support.transition ) {
+      transitionEnd = "TransitionEnd"
+      if ( $.browser.webkit ) {
+      	transitionEnd = "webkitTransitionEnd"
+      } else if ( $.browser.mozilla ) {
+      	transitionEnd = "transitionend"
+      } else if ( $.browser.opera ) {
+      	transitionEnd = "oTransitionEnd"
+      }
+    }
+
+  })
+
+
+ /* TWIPSY PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Twipsy = function ( element, options ) {
+    this.$element = $(element)
+    this.options = options
+    this.enabled = true
+    this.fixTitle()
+  }
+
+  Twipsy.prototype = {
+
+    show: function() {
+      var pos
+        , actualWidth
+        , actualHeight
+        , placement
+        , $tip
+        , tp
+
+      if (this.hasContent() && this.enabled) {
+        $tip = this.tip()
+        this.setContent()
+
+        if (this.options.animate) {
+          $tip.addClass('fade')
+        }
+
+        $tip
+          .remove()
+          .css({ top: 0, left: 0, display: 'block' })
+          .prependTo(document.body)
+
+        pos = $.extend({}, this.$element.offset(), {
+          width: this.$element[0].offsetWidth
+        , height: this.$element[0].offsetHeight
+        })
+
+        actualWidth = $tip[0].offsetWidth
+        actualHeight = $tip[0].offsetHeight
+
+        placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
+
+        switch (placement) {
+          case 'below':
+            tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'above':
+            tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
+            break
+          case 'left':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
+            break
+          case 'right':
+            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
+            break
+        }
+
+        $tip
+          .css(tp)
+          .addClass(placement)
+          .addClass('in')
+      }
+    }
+
+  , setContent: function () {
+      var $tip = this.tip()
+      $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
+      $tip[0].className = 'twipsy'
+    }
+
+  , hide: function() {
+      var that = this
+        , $tip = this.tip()
+
+      $tip.removeClass('in')
+
+      function removeElement () {
+        $tip.remove()
+      }
+
+      $.support.transition && this.$tip.hasClass('fade') ?
+        $tip.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  , fixTitle: function() {
+      var $e = this.$element
+      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+      }
+    }
+
+  , hasContent: function () {
+      return this.getTitle()
+    }
+
+  , getTitle: function() {
+      var title
+        , $e = this.$element
+        , o = this.options
+
+        this.fixTitle()
+
+        if (typeof o.title == 'string') {
+          title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
+        } else if (typeof o.title == 'function') {
+          title = o.title.call($e[0])
+        }
+
+        title = ('' + title).replace(/(^\s*|\s*$)/, "")
+
+        return title || o.fallback
+    }
+
+  , tip: function() {
+      return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template)
+    }
+
+  , validate: function() {
+      if (!this.$element[0].parentNode) {
+        this.hide()
+        this.$element = null
+        this.options = null
+      }
+    }
+
+  , enable: function() {
+      this.enabled = true
+    }
+
+  , disable: function() {
+      this.enabled = false
+    }
+
+  , toggleEnabled: function() {
+      this.enabled = !this.enabled
+    }
+
+  , toggle: function () {
+      this[this.tip().hasClass('in') ? 'hide' : 'show']()
+    }
+
+  }
+
+
+ /* TWIPSY PRIVATE METHODS
+  * ====================== */
+
+   function maybeCall ( thing, ctx, args ) {
+     return typeof thing == 'function' ? thing.apply(ctx, args) : thing
+   }
+
+ /* TWIPSY PLUGIN DEFINITION
+  * ======================== */
+
+  $.fn.twipsy = function (options) {
+    $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy')
+    return this
+  }
+
+  $.fn.twipsy.initWith = function (options, Constructor, name) {
+    var twipsy
+      , binder
+      , eventIn
+      , eventOut
+
+    if (options === true) {
+      return this.data(name)
+    } else if (typeof options == 'string') {
+      twipsy = this.data(name)
+      if (twipsy) {
+        twipsy[options]()
+      }
+      return this
+    }
+
+    options = $.extend({}, $.fn[name].defaults, options)
+
+    function get(ele) {
+      var twipsy = $.data(ele, name)
+
+      if (!twipsy) {
+        twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
+        $.data(ele, name, twipsy)
+      }
+
+      return twipsy
+    }
+
+    function enter() {
+      var twipsy = get(this)
+      twipsy.hoverState = 'in'
+
+      if (options.delayIn == 0) {
+        twipsy.show()
+      } else {
+        twipsy.fixTitle()
+        setTimeout(function() {
+          if (twipsy.hoverState == 'in') {
+            twipsy.show()
+          }
+        }, options.delayIn)
+      }
+    }
+
+    function leave() {
+      var twipsy = get(this)
+      twipsy.hoverState = 'out'
+      if (options.delayOut == 0) {
+        twipsy.hide()
+      } else {
+        setTimeout(function() {
+          if (twipsy.hoverState == 'out') {
+            twipsy.hide()
+          }
+        }, options.delayOut)
+      }
+    }
+
+    if (!options.live) {
+      this.each(function() {
+        get(this)
+      })
+    }
+
+    if (options.trigger != 'manual') {
+      binder   = options.live ? 'live' : 'bind'
+      eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus'
+      eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
+      this[binder](eventIn, enter)[binder](eventOut, leave)
+    }
+
+    return this
+  }
+
+  $.fn.twipsy.Twipsy = Twipsy
+
+  $.fn.twipsy.defaults = {
+    animate: true
+  , delayIn: 0
+  , delayOut: 0
+  , fallback: ''
+  , placement: 'above'
+  , html: false
+  , live: false
+  , offset: 0
+  , title: 'title'
+  , trigger: 'hover'
+  , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
+  }
+
+  $.fn.twipsy.rejectAttrOptions = [ 'title' ]
+
+  $.fn.twipsy.elementOptions = function(ele, options) {
+    var data = $(ele).data()
+      , rejects = $.fn.twipsy.rejectAttrOptions
+      , i = rejects.length
+
+    while (i--) {
+      delete data[rejects[i]]
+    }
+
+    return $.extend({}, options, data)
+  }
+
+}( window.jQuery || window.ender );

File inbounding/dispatch/templates/dashboard.html

 <br>
 <div>
   <h3 class=""><a href="{% url dispatch.views.action_page %}">+ Add an Action</a></h3>
-  <h3 class=""><a href="{% url dispatch.views.mailchimp-url %}">MailChimp</a></h3>
+  <h3 class=""><a href="{% url mailchimp-url %}">MailChimp</a></h3>
   <ul class="ul">
   {% for action in object_list %}
       <li><a href="{% url dispatch.views.action_page action.id %}">{{ action.label }}</a></li>
   <h1>Getting Started</h1>
 
   <p>
+<pre class="prettyprint">
 &lt;script&gt;
 (function() {
     function async_load(){
         window.addEventListener(&#39;load&#39;, async_load, false);
 })();
 &lt;/script&gt;
+</pre>
   </p>
 
 </section>

File inbounding/dispatch/templates/mailchimp.html

   <div class="row">
 
     <div class="span12">
-      <div class="">
+      <div class="span12">
 	<ul class="tabs" data-tabs="tabs">
 	  <li class="active"><a href="#mc-config">MailChimp Configuration</a></li>
 	  <li><a href="#refer-list">Referrer List</a></li>
 	  <li><a href="#preview">Preview</a></li>
 	</ul>
       </div>
+
       <div class="tab-content">
-      <div class="active" id="mc-config">
-      <form class="form-stacked" name="mc-config-form">
-	<legend>MailChimp Configuration</legend>
-	<fieldset>
+	<div class="active" id="mc-config">
+	  <form class="form-stacked" name="mc-config-form">
+	    <fieldset>
 
-	  <div class="alert-message block-message error">
-            <a class="close" href="#">×</a>
-            <p><strong>Oh snap! You got an error!</strong> Change this and that and <a href="#">try again</a>.</p>
-            <ul>
-              <li>Duis mollis est non commodo luctus</li>
-              <li>Nisi erat porttitor ligula</li>
-              <li>Eget lacinia odio sem nec elit</li>
-            </ul>
-            <div class="alert-actions">
-              <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-            </div>
+	      <div class="alert-message block-message error hide" data-alert>
+		<a class="close" href="#">×</a>
+		<p><strong>Oh snap! You got an error!</strong> Change this and that and <a href="#">try again</a>.</p>
+		<ul>
+		  <li>Duis mollis est non commodo luctus</li>
+		  <li>Nisi erat porttitor ligula</li>
+		  <li>Eget lacinia odio sem nec elit</li>
+		</ul>
+		<div class="alert-actions">
+		  <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+		</div>
+	      </div>
+
+	  <div class="clearfix row">
+	    <div class="span6">
+	      <label for='label'>Label</label>
+	      <div class="input">
+		<input name='label' class="span6" type='text' placeholder="Your Action Label" autofocus="autofocus" required>
+	      </div>
+	    </div>
+	    
+	    <div class="span5">
+
+	    </div>
+
+	  </div><!-- END ROW -->
+
+
+	  <div class="clearfix row">
+	    <div class="span6">
+	      <label for='mailchimp-key'>MailChimp API Key</label>
+	      <div class="input">
+		<input name='mailchimp-key' class="span6" type='text' placeholder="Your MailChimp API Key">
+	      </div>
+	    </div>
+	    <div class="span5">
+	      <a class="" data-controls-modal="mc-apikey-modal" data-backdrop="static">Get your API Key.</a>
+
+	      <div id="mc-apikey-modal" class="modal hide">
+
+		<div class="modal-header" data-show="false">
+		  <a href="#" class="close">×</a>
+		  <h3>MailChimp API Instructions</h3>
+		</div>
+		<div class="modal-body">
+		  <p>
+		    <ol>
+		      <li>Go to MailChimp.com.</li>
+		      <li>Select the Account menu.</li>
+		      <li>Then Click on "API Keys & Authorized Apps."</li>
+		      <li>Copy your API Key. If necessary 'add a key'.</li>
+		    </ol>
+		  </p>
+		</div>
+		<div class="modal-footer">
+		  <a href="#" class="btn large secondary">Cancel</a>
+		  <a href="https://us2.admin.mailchimp.com/account/api/" target="_new_window" class="btn large primary">Go to MailChimp</a>
+		</div>
+
+	      </div>
+
+	    </div>
 	  </div>
 
-	  <label for='label'>Label</label>
-	  <input name='label' type='text' placeholder="Your Action Label" autofocus="autofocus" required>
-	  <div class='clearfix'></div>
-	  <label for='mailchimp-key'>MailChimp API Key</label>
-	  <input name='mailchimp-key' type='text' placeholder="Your MailChimp API Key">
-	  <div class='clearfix'></div>
-	  <label for='mailchimp-listid'>MailChimp Unique List ID</label>
-	  <input name='mailchimp-listid' type='text' placeholder="Your MailChimp Unique List ID">
-	  <div class='clearfix'></div>
-	  <label for='url'>Target URL</label>
-	  <input name='url' type='text' placeholder="What is the URL for this Action Box?">
-	  <div class='clearfix'></div>
-	  <select>
-	    <option value="">Floated Action Box</option>
-	    <option value="">Embedded Action Box</option>
-	  </select>
+
+	  <div class='clearfix'>
+	    <label for='mailchimp-listid'>MailChimp Unique List ID</label>
+	      <div class="input">
+		<input name='mailchimp-listid' class="span6" type='text' placeholder="Your MailChimp Unique List ID">
+	      </div>
+	  </div>
+
+	  <div class='clearfix'>
+	    <label for='url'>Target URL</label>
+	    <div class="input">
+	      <input name='url' type='text' class="span6" placeholder="What is the URL for this Action Box?">
+	      </div>
+	  </div>
+
+	  <div class='clearfix'>
+	    <label for='action-box'>What type of Action Box?</label>
+	    <div class="input">
+	      <select name="action-box" class="span6">
+		<option value="">Floated Action Box</option>
+		<option value="">Embedded Action Box</option>
+	      </select>
+	    </div>
+	  </div>
+
 	</fieldset>
 	<div class="actions">
 	  <input name='submit' value="Save" type="Submit" class="btn large primary">
       </div>
       <div id="refer-list">
       <form class="form-stacked" name="refer-list-form">
-	<legend>Refer List</legend>
 	<fieldset>
-	  <label for='label'>Refer URI</label>
-	  <input name='label' type='text' placeholder="google.com" autofocus="autofocus" required>
-	  <div class='clearfix'></div>
+	  <div class="row">
+	    <div class="span6">
+	      <label for='label'>Refer URI</label>
+	      <div class="input">
+		<input name='label' type='text' placeholder="google.com" autofocus="autofocus" required>
+	      </div>
+	    </div>
+	    <div span="span5">
+		<a href="#" rel="popover" data-content="Refer's are domain names. Such as google.com or stumbleupon.com without any trailing information. Do not use google.com/path/." data-original-title="What sites are sending you Visitors?" data-placement="right">What is the Refer?</a>
+		<script>
+		  $(function () {
+		  $("a[rel=popover]")
+                  .popover({
+                  offset: 10,
+		  delayOut: 500
+                  })
+                  .click(function(e) {
+                  e.preventDefault()
+                  })
+		  })
+		</script>
+	    </div>
+	  </div><!-- end row -->
 	</fieldset>
 	<div class="actions">
 	  <input name='submit' value="Save" type="Submit" class="btn large primary">

File inbounding/dispatch/templates/site-template.html

   
   <script src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>
   <script src="{{ STATIC_URL }}js/modernizr-1.1.min.js"></script>
+  <script src="{{ STATIC_URL }}js/bootstrap-1.4.0/bootstrap-twipsy.js"></script>
   <script src="{{ STATIC_URL }}js/bootstrap-1.4.0/bootstrap-alerts.js"></script>
   <script src="{{ STATIC_URL }}js/bootstrap-1.4.0/bootstrap-popover.js"></script>
+  <script src="{{ STATIC_URL }}js/bootstrap-1.4.0/bootstrap-modal.js"></script>
   <script src="{{ STATIC_URL }}js/bootstrap-1.4.0/bootstrap-tabs.js"></script>
   <script type="text/javascript" src="http://use.typekit.com/onq3hhx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-  <script>
-    $(".alert-message").alert('close');
-
-  </script>
 
   {% block extrahead %}
   {% endblock %}