outpost-cms 0.0.3

data/app/assets/javascripts/outpost/global_plugins.js.coffee

@@ -0,0 +1,87 @@
+# Bootstrap things
+
+# Scrollspy has to be initiated here, 
+# instead of via data- attributes, 
+# otherwise it's buggy. I don't know why.
+offset = 160
+nav    = "#form-nav"
+
+$ ->
+    # Prevent firefox from submitting a form when the "Enter" 
+    # key is pressed inside of a text field...
+    $("form input[type=text]").on
+        keydown: (event) ->
+            key = event.keyCode || event.which
+
+            if key == 13 # Enter
+                event.stopPropagation()
+                event.preventDefault()
+                false
+
+    # Select2
+    # Set a blank placeholder for all selects.
+    # Also allow clearing for any option.
+    # If you don't want the "clear" option on a certain select element,
+    # add the `include_blank: false` option to the rails
+    # helper.
+    #
+    # Note: This also gets called in field_manager.
+    # TODO: Make it so we don't have to call it twice.
+    $("select").not('[data-disable-select2="true"]').select2
+        placeholder: " "
+        allowClear: true
+    
+    # Tooltip
+    $('[rel="tooltip"]').tooltip()
+
+    # Affix
+    # Fix the width for all of these elements
+    $('[data-spy="affix"]').each ->
+        $(@).width $(@).width()
+
+    # For table headers, we want them to act cool so we have 
+    # to treat them special. First fix the widths of the "th"
+    # elements. Then make the top margin of the table the 
+    # same as the height of the header. Then move the header
+    # up its height in pixels to give the appearance of
+    # sitting on top.
+    $('table.index-list thead').each ->
+        $(@).width $(@).width()
+
+        $('th', @).each -> $(@).width $(@).width()
+        height = $(@).height()
+        $(@).closest("table").css("margin-top": height)
+
+        $(@).addClass("ready")
+        $(@).css("top": -height)
+
+    $('table.index-list thead').affix
+        offset: 65
+
+    # Scrollspy
+    $spy = $("body").scrollspy
+        target: nav
+        offset: offset
+
+    # Since we have some fixed elements at the
+    # top of the screen, we have to offset the
+    # anchors when they're clicked in the form
+    # nav.
+    $("#{nav} li a").on
+        click: (event) ->
+            event.preventDefault()
+            href = $(@).attr('href')
+            window.location.hash = href
+            $(href)[0].scrollIntoView()
+            window.scrollBy(0, -offset + 80)
+            false
+
+    # Make highlighted TH's clickable
+    # TODO Move this into a better place
+    $("th.header-highlighted, th.header-sortable").each ->
+        if href = $(".js-sort-link", @).attr("href")
+            $(@).addClass("clickable")
+            $(@).on click: (event) ->
+                window.location = href
+
+    true

data/app/assets/javascripts/outpost/index_manager.js.coffee

@@ -0,0 +1,88 @@
+##
+# IndexManager
+#
+# Load up special things in the index pages.
+#
+class outpost.IndexManager
+    DefaultOptions:
+        cellFinder:    "*[data-updatable='true']"
+        
+    constructor: (@baseUrl, options={}) ->
+        @options = _.defaults options, @DefaultOptions
+        
+        for cell in $(@options.cellFinder)
+            new outpost.QuickEditCell $(cell), @baseUrl
+
+##
+# QuickEditCell
+#
+# Adds the ability to quick-edit any attribute from the index page.
+# Looks for fields with 'data-updatable="true"'
+#
+class outpost.QuickEditCell
+    defaults:
+        formTemplate:   JST["outpost/templates/data_field"]
+        attribute:      "data-attribute"
+        id:             "data-id"
+        highlightColor: "#dff0d8"
+        highlightTime:  2000
+        
+    constructor: (@el, baseUrl, options={}) ->
+        @options = _.defaults options, @defaults
+        
+        # Check values
+        @value = null
+        @keyup = false
+        
+        # Attributes
+        @attribute = @el.attr(@options.attribute)
+        @id        = @el.attr(@options.id)
+        @url       = "#{baseUrl}/#{@id}"
+        
+        @ajaxOptions =
+            dataType: 'json'
+            url: @url
+            
+        @el.on
+            click: (event) => @buildForm()
+
+        @el.on
+            keyup: (event) =>
+                if event.keyCode == 13
+                    @keyup = true
+                    @updateData(event)
+            blur: (event) =>
+                if not @keyup
+                    @updateData(event)
+        , 'input'
+
+    #-------------
+    
+    buildForm: (event) ->
+        $.ajax _.extend @ajaxOptions,
+            type: "GET"
+            success: (data, status, xhr) =>
+                @value = data[@attribute]
+                @el.html(@options.formTemplate attribute: @attribute, id: @id, inputValue: @value)
+                @el.find("input").focus()
+
+    #-------------
+    
+    updateData: (event) ->
+        input = $(event.target)
+        value = input.val()
+        
+        if value is @value
+            @el.html(value)
+            @keyup = false
+            return
+            
+        $.ajax _.extend @ajaxOptions,
+            type: "PUT"
+            data: 
+                data_point:
+                    data_value: value
+            success: (data, status, xhr) =>
+                @el.html(value)
+                @el.effect "highlight", { color: @options.highlightColor }, @options.highlightTime
+                @keyup = false

data/app/assets/javascripts/outpost/notification.js.coffee

@@ -0,0 +1,46 @@
+##
+# Notification
+# Raise notifications from anywhere in the JS code
+# Pass the $(el) to place the message into
+#
+class outpost.Notification
+    constructor: (@wrapper, @type, @message) ->
+        @el = $("<div />", class: "alert alert-#{type}").html("#{message}")
+
+    render: ->
+        @wrapper.append @el
+    
+    prepend: ->
+        @wrapper.prepend @el
+        
+    # Replaces the wrapper's content with the alert
+    replace: ->
+        @wrapper.html @el
+        
+    # Delegation for jQuery: @el.is(":visible")
+    isVisible: ->
+        @el.is(":visible")
+        
+    # Delegation for jQuery: @el.show()
+    show: ->
+        @el.show()
+        
+    # Delegation for jQuery: @el.hide()
+    hide: -> 
+        @el.hide()
+    
+    # Delegation for jQuery: @el.fadeIn()
+    fadeIn: (speed=400, callback=null) ->
+        @el.fadeIn(speed, callback?())
+    
+    # Delegation for jQuery: @el.fadeOut()
+    fadeOut: (speed=400, callback=null) ->
+        @el.fadeOut(speed, callback?())
+        
+    # Delegation for jQuery: @el.detach()
+    detach: ->
+        @el.detach()
+        
+    # Delegation for jQuery: @el.remove()
+    remove: ->
+        @el.remove()

data/app/assets/javascripts/outpost/preview.js.coffee

@@ -0,0 +1,60 @@
+##
+# Preview
+#
+# Preview functionality for the CMS
+#
+class outpost.Preview
+    constructor: (@options) ->
+        _t = @
+        
+        $("form #preview-submit a.js-preview-btn").on
+            click: (event) ->
+                event.preventDefault()
+                target = $(@)
+                form   = target.closest("form")
+                
+                # Update any hidden textareas that are using CKEditor
+                # Then serialize the form.
+                if CKEDITOR?
+                    for id,instance of CKEDITOR.instances
+                        instance.updateElement()
+
+                data = form.serialize()
+
+                $.ajax
+                    type: 'POST'
+                    dataType: "html"
+                    url: "#{_t.options.baseUrl}/preview"
+                    data:
+                        data
+                    
+                    beforeSend: (jqXHR, settings) ->
+                        _t.openWindow(target.data("windowOptions"))
+                        _t.writeToWindow(JST['outpost/templates/loading']())
+
+                    statusCode:
+                        200: (data, textStatus, jqXHR) ->
+                            _t.writeToWindow(data)
+                        404: (jqXHR, textStatus, errorThrown) ->
+                            _t.writeToWindow("Error: #{errorThrown}")
+                        500: (jqXHR, textStatus, errorThrown) ->
+                            _t.writeToWindow("Error: #{errorThrown}")
+                false
+
+    #--------------------
+    # Open the preview window.
+    # If it doesn't exist yet, create it.
+    # If it already exists, just focus on it.
+    openWindow: (options="")->
+        if !@window or (@window and @window.closed)
+            @window = window.open("", "preview", 
+                "scrollbars=yes,menubar=no,location=no,directories=no,toolbar=no,#{options}")
+        else
+            @window.focus()
+
+    #--------------------
+    # Write some data to the preview window.
+    # This shouldn't get called before @window is set.
+    writeToWindow: (data) ->
+        @window.document.write(data)
+        @window.document.close()

data/app/assets/javascripts/outpost/templates/date_field.jst.eco

@@ -0,0 +1,3 @@
+<div class="input-prepend inline">
+  <span class="add-on populate date"><i class="icon-calendar"></i></span><input type="text" class="datepicker timestamp-el" placeholder="<%=@date_format%>" id="<%= @date_id %>">
+</div>

data/app/assets/javascripts/outpost/templates/loading.jst.eco

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Loading...</title>
+    <script type="text/javascript" src="/assets/outpost/application.js"></script>
+  </head>
+  <body>
+    <div id='spinner' style="width:100%;height:200px;"></div>
+    <script>$('#spinner').spin()</script>
+  </body>
+</html>

data/app/assets/javascripts/outpost/templates/slug_generate_button.jst.eco

@@ -0,0 +1 @@
+<a class="btn" href="#" style="display: inline-block; margin-left: 5px;">Generate</button>

data/app/assets/javascripts/outpost/templates/time_field.jst.eco

@@ -0,0 +1,3 @@
+<div class="input-prepend inline">
+  <span class="add-on populate time"><i class="icon-time"></i></span><input type="text" class="timestamp-el" placeholder="<%=@time_format%>" id="<%= @time_id %>">
+</div>

data/app/assets/javascripts/outpost/templates.js

@@ -0,0 +1 @@
+//= require_tree ./templates

data/app/assets/javascripts/outpost.js

@@ -0,0 +1,32 @@
+//= require jquery
+//= require underscore
+//= require backbone
+//= require moment
+//= require jquery_ujs
+//= require spin
+
+//= require jquery-ui-1.10.0.custom.min
+//= require date.min
+//= require select2
+
+//= require bootstrap-transition
+//= require bootstrap-dropdown
+//= require bootstrap-modal
+//= require bootstrap-tab
+//= require bootstrap-scrollspy
+//= require bootstrap-alert
+//= require bootstrap-affix
+//= require bootstrap-tooltip
+//= require bootstrap-datepicker
+
+//= require outpost/base
+//= require outpost/templates
+
+//= require outpost/notification
+//= require outpost/field_manager
+//= require outpost/date_time_input
+//= require outpost/auto_slug_field
+//= require outpost/field_counter
+//= require outpost/preview
+//= require outpost/index_manager
+//= require outpost/global_plugins

data/app/assets/stylesheets/outpost/_base.css.scss

@@ -0,0 +1,127 @@
+// Core ext.
+body {
+    // Allow space for the submit-row
+    padding-bottom: 120px;
+    padding-top: 100px;
+}
+
+body, p {
+  line-height: 14px;
+}
+
+small { 
+  font-size: 11px;
+}
+
+.breadcrumb {
+  &.unstyled {
+    padding: 0;
+  }
+  
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0;
+}
+
+// Override a bug in bootstrap
+.dropup .btn-large .caret {
+    border-bottom-color: $white;
+}
+
+.alert .close {
+  line-height: 12px;
+}
+
+.icon-red {
+  background-image: image-url($iconRedSpritePath);
+}
+
+/////////////////////////////////
+
+.cms-nav {
+  max-width: 820px;
+  
+  .grouper {
+    display: inline-block;
+    width: 400px;
+    vertical-align: top;
+  }
+  
+  li {
+    clear: both;
+    border-bottom: 1px solid $grayLighter;
+    
+    &:hover {
+      background: $linkColor;
+      &> a { 
+        color: $white;
+        text-decoration: none;
+      }
+    }
+    
+    &> a {
+      clear: none;
+      width: 285px;
+      display: inline-block;
+
+      // Everything below is copied from Bootstrap .dropdown-menu > li > a
+      // It has to be this way because of the .grouper div
+      // This should be fixed.
+      padding: 3px 20px;
+      font-weight: normal;
+      line-height: 20px;
+      color: #333333;
+      white-space: nowrap;
+    }
+    
+    .btn-links {
+      display: inline-block;
+      clear: both;
+      vertical-align: bottom;
+      margin-bottom: 3px;
+      width: 60px;
+      
+      &> a {
+        margin: 0px 2px;
+        &.add { float: right; }
+      }
+    }
+  }
+}
+
+.fixed-breadcrumbs {
+  z-index: 5;
+  top: $navOffset;
+  @include box-shadow(0 2px 6px rgba(0,0,0,.2));
+}
+
+.help-block {
+  color: $grayLight;
+  font-style: italic;
+  font-size: 12px;
+  margin-top: 10px;
+}
+
+.list-status {
+    text-align: center;
+}
+
+.add-on.populate {
+    cursor: pointer;
+}
+
+// Style the dropdown buttons so they look like links
+ul.dropdown-menu li button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    &:hover {
+        background: $grayLighter;
+    }
+}
+
+#fixed-sidebar.affix {
+  top: $navOffset + $breadcrumbOffset + 4px;
+}

data/app/assets/stylesheets/outpost/_edit.css.scss

@@ -0,0 +1,13 @@
+// Styles for Editing/New pages
+
+.submit-row:last-of-type {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    margin: 0px;
+    background: $grayDark;
+    padding: 10px 0;
+    z-index: 10;
+    @include box-shadow(0 -2px 10px rgba(0,0,0,.2));
+}

data/app/assets/stylesheets/outpost/_forms.css.scss

@@ -0,0 +1,116 @@
+// We want content input to always be pretty big
+.simple_form {
+  input:not([type=submit]) {
+      @extend .span4;
+  }
+}
+
+form.simple_form {
+  table.field-rows {
+    td, th {
+      text-align: left; 
+      padding: 5px 10px; 
+    }
+
+    tbody tr { padding: 5px 0; }
+
+    .controls { margin: 0; }
+    .control-group { margin: 0; }
+  }
+
+  input.wide, textarea {
+      @extend .span7;
+  }
+  
+  input, textarea {
+    &.span1 { @extend .span1; }
+    &.span2 { @extend .span2; }
+    &.span3 { @extend .span3; }
+    &.span4 { @extend .span4; }
+    &.span5 { @extend .span5; }
+    &.span6 { @extend .span6; }
+    &.span7 { @extend .span7; }
+    &.span8 { @extend .span8; }
+    &.span9 { @extend .span9; }
+    &.span10 { @extend .span10; }
+    &.span11 { @extend .span11; }
+    &.span12 { @extend .span12; }
+  }
+  
+  input.thin, textarea.thin {
+      @extend .span2;
+  }
+  
+  input.tiny {
+      @extend .span1;
+  }
+  
+  // For code inputs
+  textarea.fixed-font, input.fixed-font {
+    @include font-monospace($size: 11px);
+    background: #000;
+    color: #FFFF00;
+  }
+  
+  textarea {
+      &.tiny { height: 100px; }
+      &.short { height: 200px; }
+      &.tall { height: 600px; }
+  }
+  
+  fieldset legend {
+      cursor: pointer;
+      &:hover {
+          background: #ffffcc;
+      }
+  }
+  
+  .counter-notify {
+      @extend .span7;
+  }
+  
+  .inline { // Extend bootstrap .inline
+      display: inline-block;
+      margin-right: 5px;
+      input[type=text] { @extend .span2; }
+      input[type=checkbox] { width: 20px; }
+      
+      .controls {
+          margin-left: 10px;
+      }
+  }
+  
+  .control-group.vertical {
+      label { 
+          float: none;
+          text-align: left;
+      }
+      .controls { margin-left: 2px; }
+  }
+}
+
+// Select 2 overrides
+.select[class*="span"] {
+  margin-left: 0;
+  float: none;
+}
+
+
+// Work around incompatibility with CKEditor and Select2
+.select2-offscreen {
+  position: static;
+  display: none !important;
+}
+
+.select2-container {
+  min-width: 200px;
+}
+
+// Select2 has z-index:9999 by default... no thanks
+.select2-drop-mask {
+  z-index: 4;
+}
+
+.select2-drop {
+  z-index: 4;
+}

data/app/assets/stylesheets/outpost/_index.css.scss

@@ -0,0 +1,68 @@
+// Styles for index lists
+// To manage column widths, go to columns.css
+
+.filters {
+    .select2-container {
+        min-width: 130px;
+    }
+    
+    .filter.label {
+    display: inline-block; 
+    margin-right: 10px;
+    }
+
+    form {
+    display: inline-block;
+    }
+}
+
+.header-highlighted {
+    background-color: $successBackground;
+}
+
+th.clickable {
+    cursor: pointer;
+    &:hover {
+        background-color: $infoBackground;
+    }
+}
+
+.index-list {
+    position: relative;
+
+    th, td {
+        overflow: hidden;
+        .cancel-link { float: right; }
+    }
+
+    tbody.list {
+        tr {
+            // Style quick-edit cells
+            td[data-updatable=true] {
+                background: $warningBackground;
+
+                &:hover {
+                    background: $infoBackground;
+                    cursor: text;
+                }
+            }
+        }
+    }
+
+    thead {
+        background: $white;
+
+        &.ready {
+            position: absolute;
+
+            &.affix {
+                z-index: 5;
+                border: 1px solid $grayLight;
+                position: fixed; // Have to use redefine it here to override .ready
+                top: $navOffset + $breadcrumbOffset + 10px !important;
+                background: $warningBackground;
+                @include box-shadow(0 2px 6px rgba(0,0,0,.2));
+            }
+        }
+    }
+}

data/app/assets/stylesheets/outpost/_utility.css.scss

@@ -0,0 +1,16 @@
+.transparent { 
+    @include opacity(0.2);
+    @include transition(.1s linear all);
+}
+
+.hidden {
+    display: none;
+}
+
+a.fake {
+    cursor: pointer;
+}
+
+a.toggled {
+    color: $black;
+}

data/app/assets/stylesheets/outpost/application.css.scss

@@ -0,0 +1 @@
+@import 'outpost';