chr 0.2.1 → 0.2.4

data/app/assets/javascripts/chr/vendor/redactor.fixedtoolbar.js

@@ -0,0 +1,110 @@
+/*
+ * webhook-redactor
+ *
+ *
+ * Copyright (c) 2014 Webhook
+ * Licensed under the MIT license.
+ */
+
+(function ($) {
+  "use strict";
+
+  // namespacing
+  var Fixedtoolbar = function (redactor) {
+    this.redactor = redactor;
+    this.$window = $('.view > form'); //$(window);
+    this.viewHeaderHeight = 40;
+
+    this.$window.on('scroll', $.proxy(this.checkOffset, this));
+    redactor.$box.on('scroll', $.proxy(this.checkOffset, this));
+
+    this.redactor.$editor.on('focus', $.proxy(function () {
+      this.isFocused = true;
+    }, this));
+
+    this.redactor.$editor.on('blur', $.proxy(function () {
+      this.isFocused = false;
+    }, this));
+  };
+  Fixedtoolbar.prototype = {
+    isFixed: false,
+    isFocused: false,
+
+    checkOffset: function () {
+      if ( !this.redactor.fullscreen.isOpen )
+      {
+        var boxOffset = this.redactor.$box.offset();
+
+        var isBelowBoxTop = boxOffset.top - this.viewHeaderHeight <= 0;
+        //var isAboveBoxBottom = boxOffset.top + this.redactor.$box.outerHeight() - this.redactor.$toolbar.outerHeight() - this.$window.scrollTop() >= 0;
+        var isAboveBoxBottom = this.redactor.$box.outerHeight() + boxOffset.top - this.viewHeaderHeight - this.redactor.$toolbar.outerHeight() >= 0;
+
+        if (isBelowBoxTop && isAboveBoxBottom) {
+          this.fix();
+        } else {
+          this.unfix();
+        }
+      }
+    },
+
+    fix: function () {
+
+      if (this.isFixed) {
+
+        // webkit does not recalc top: 0 when focused on contenteditable
+        if (this.redactor.utils.isMobile() && this.isFocused) {
+          this.redactor.$toolbar.css({
+            position: 'absolute',
+            top     : this.$window.scrollTop() - this.redactor.$box.offset().top,
+            left    : this.redactor.$box.offset().left
+          });
+        }
+
+        return;
+      }
+
+      var border_left = parseInt(this.redactor.$box.css('border-left-width').replace('px', ''), 10);
+
+      this.redactor.$toolbar.css({
+        position: 'fixed',
+        top     : this.viewHeaderHeight,
+        left    : this.redactor.$box.offset().left + border_left,
+        width   : this.redactor.$box.width(),
+        zIndex  : 300
+      });
+
+      this.redactor.$editor.css('padding-top', this.redactor.$toolbar.height() + 10);
+
+      this.isFixed = true;
+
+    },
+
+    unfix: function () {
+      if (!this.isFixed) {
+        return;
+      }
+
+      this.redactor.$toolbar.css({
+        position: 'relative',
+        left    : '',
+        width   : '',
+        top     : ''
+      });
+
+      this.redactor.$editor.css('padding-top', 10);
+
+      this.isFixed = false;
+    }
+  };
+
+  // Hook up plugin to Redactor.
+  window.RedactorPlugins = window.RedactorPlugins || {};
+  window.RedactorPlugins.fixedtoolbar = function() {
+    return {
+      init: function () {
+        this.fixedtoolbar = new Fixedtoolbar(this);
+      }
+    };
+  };
+
+}(jQuery));

data/app/assets/javascripts/input-html.coffee

@@ -0,0 +1,78 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT HTML
+# -----------------------------------------------------------------------------
+#
+# Config options:
+#   label      - Input label
+#   aceOptions - Custom options for overriding default ones
+#
+# Input config example:
+#   body_html: { type: 'html', label: 'Article' }
+#
+# Dependencies:
+#= require chr/vendor/ace
+#= require chr/vendor/mode-html
+#
+# -----------------------------------------------------------------------------
+
+class @InputHtml extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$input =$ "<input type='hidden' name='#{ @name }' value='#{ @_safe_value() }' />"
+    @$el.append @$input
+
+    @$editor =$ "<div></div>"
+    @$el.append @$editor
+
+
+  _update_inputs: ->
+    @value = @editor.getSession().getValue()
+    @$input.val(@value)
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @editor  = ace.edit(@$editor.get(0))
+    @session = @editor.getSession()
+
+    @session.setValue(@$input.val())
+    @session.setUseWrapMode(true)
+    @session.setMode("ace/mode/html")
+
+    # ace options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+    @editor.$blockScrolling = Infinity # disable warning
+    @editor.setOptions
+      autoScrollEditorIntoView: true
+      minLines:                 5
+      maxLines:                 Infinity
+      showLineNumbers:          false
+      showGutter:               false
+      highlightActiveLine:      false
+      showPrintMargin:          false
+
+    @session.on 'change', (e) => @_update_inputs()
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @editor.getSession().setValue(@value)
+    @$input.val(@value)
+
+
+chr.formInputs['html'] = InputHtml
+
+
+
+

data/app/assets/javascripts/input-markdown.coffee

@@ -0,0 +1,88 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT MARKDOWN
+# -----------------------------------------------------------------------------
+# Markdown input supports syntax highlighting and optional compilation to html.
+#
+# Config options:
+#   label         - Input label
+#   aceOptions    - Custom options for overriding default ones
+#   htmlFieldName - Input name for generated HTML content
+#
+# Input config example:
+#   body_md: { type: 'markdown', label: 'Article', htmlFieldName: 'body_html' }
+#
+# Dependencies:
+#= require chr/vendor/marked
+#= require chr/vendor/ace
+#= require chr/vendor/mode-markdown
+#
+# -----------------------------------------------------------------------------
+
+class @InputMarkdown extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    if @config.htmlFieldName
+      @$inputHtml =$ "<input type='hidden' name='[#{ @config.htmlFieldName }]' />"
+      @$el.append @$inputHtml
+
+    @$input =$ "<input type='hidden' name='#{ @name }' value='#{ @_safe_value() }' />"
+    @$el.append @$input
+
+    @$editor =$ "<div></div>"
+    @$el.append @$editor
+
+
+  _update_inputs: ->
+    md_source = @session.getValue()
+    @$input.val(md_source)
+
+    if @$inputHtml
+      html = marked(md_source)
+      @$inputHtml.val(html)
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @editor = ace.edit(@$editor.get(0))
+    @session = @editor.getSession()
+
+    @session.setValue(@$input.val())
+    @session.setMode("ace/mode/markdown")
+
+    # options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
+    @editor.$blockScrolling = Infinity # disable warning
+    @editor.setOptions
+      autoScrollEditorIntoView: true
+      minLines:                 5
+      maxLines:                 Infinity
+      showLineNumbers:          false
+      showGutter:               false
+      highlightActiveLine:      false
+      showPrintMargin:          false
+
+    @session.on 'change', (e) => @_update_inputs()
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @session.setValue(@value)
+    @_update_inputs()
+
+
+chr.formInputs['markdown'] = InputMarkdown
+
+
+
+

data/app/assets/javascripts/input-redactor.coffee

@@ -0,0 +1,66 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT REDACTOR
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require redactor
+#= require chr/vendor/redactor.fixedtoolbar
+#
+# -----------------------------------------------------------------------------
+
+class @InputRedactor extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$el.css('opacity', 0)
+    @$input =$ "<textarea class='redactor' name='#{ @name }' rows=1>#{ @_safe_value() }</textarea>"
+    @$el.append @$input
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    redactor_options =
+      focus:            false
+      imageFloatMargin: '20px'
+      buttonSource:     true
+      pastePlainText:   true
+      plugins:          [ 'fixedtoolbar', 'loft' ]
+      buttons:          [ 'html',
+                          'formatting',
+                          'bold',
+                          'italic',
+                          'deleted',
+                          'alignment',
+                          'unorderedlist',
+                          'orderedlist',
+                          'link' ]
+
+    @config.redactorOptions ?= {}
+    $.extend(redactor_options, @config.redactorOptions)
+
+    @$input.redactor(redactor_options)
+
+    @$el.css('opacity', 1)
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @$input.redactor('insert.set', @_safe_value())
+
+
+chr.formInputs['redactor'] = InputRedactor
+
+
+
+

data/app/assets/stylesheets/_chr.scss

@@ -8,9 +8,9 @@
 @import "core/responsive";
 
 @import "form/form";
-@import "form/input_checkbox";
-@import "form/input_color";
-@import "form/input_file";
-@import "form/input_list";
-@import "form/input_string";
-@import "form/nested_form";
+@import "form/input-checkbox";
+@import "form/input-color";
+@import "form/input-file";
+@import "form/input-form";
+@import "form/input-list";
+@import "form/input-string";

data/app/assets/stylesheets/_input-redactor.scss

@@ -0,0 +1,34 @@
+@import "redactor";
+
+
+// input
+.input-inverter,
+.input-redactor {
+  .redactor-box     { margin-bottom: 0; }
+  .redactor-toolbar { box-shadow: none; border-bottom: 2px solid $contrastColor; }
+  .redactor-editor  { border: 1px solid $contrastColor; border-top: 0; }
+}
+
+
+// fullscreen
+.redactor-box-fullscreen {
+  .redactor-toolbar           { box-shadow: none; border-bottom: 2px solid $contrastColor; }
+  .redactor-placeholder:after { content: ''; }
+  .redactor-editor            { padding-bottom: 5em; border: none; }
+}
+
+
+// placeholder
+.redactor-placeholder:after { color: $lightColor!important; }
+
+
+// scrollbars
+.redactor-editor, textarea.redactor { @include customScrollbar(); }
+
+
+// line-height issue fix
+.redactor-editor { line-height: inherit !important; }
+
+
+
+

data/app/assets/stylesheets/core/_mixins.scss

@@ -50,6 +50,81 @@
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
+@mixin switchControl() {
+  $switch-width: 52px;
+  $switch-padding: 2px;
+  $switch-height: 32px;
+  $switch-radius: $switch-height;
+  $knob-size: $switch-height - ($switch-padding * 2);
+  $knob-radius: $switch-height - ($switch-padding * 2);
+  $knob-width: $knob-size;
+  $switch-background: $white;
+  $switch-border-background: $contrastColor;
+  $switch-shadow: 0 0px 2px transparentize(black, 0.6);
+
+  border-radius: $switch-radius;
+  cursor: pointer;
+  display: inline-block;
+  height: $switch-height;
+  position: relative;
+  width: $switch-width;
+
+  input[type="checkbox"] {
+    display: none;
+
+    + .checkbox {
+      @include transition(all 0.3s ease);
+      background: $switch-border-background;
+      border-radius: $switch-radius;
+      border: none;
+      cursor: pointer;
+      height: $switch-height;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      width: $switch-width;
+      z-index: 0;
+
+      &:before {
+        @include position(absolute, 2px 0 0 2px);
+        @include transform(scale(1));
+        @include transition(all 0.3s ease);
+        background: $switch-background;
+        border-radius: $switch-radius;
+        content: "";
+        height: $knob-radius;
+        width: $switch-width - ($switch-padding * 2);
+        z-index: 1;
+      }
+
+      &:after {
+        @include position(absolute, 2px 0 0 2px);
+        @include transition(all 0.3s ease);
+        @include size($knob-size);
+        background: $switch-background;
+        border-radius: $knob-radius;
+        box-shadow: $switch-shadow;
+        content: "";
+        z-index: 2;
+      }
+    }
+
+    &:checked {
+      + .checkbox {
+        background: $positiveColor;
+
+        &:before {
+          @include transform(scale(0));
+        }
+
+        &:after {
+          left: $switch-width - $knob-width - ($switch-padding);
+        }
+      }
+    }
+  }
+}
+