revelry_content 0.0.0 → 0.0.1

data/app/assets/javascripts/revelry_content/components/versions.js.coffee

@@ -0,0 +1,170 @@
+# @cjsx
+
+RevelryContent.Utilities.lazyComponentDefinition ->
+  RevelryContent.VersionCard = React.createClass
+    getEventString: ->
+      if @props.version.get('event').indexOf('rollback') > -1
+        'Rollback'
+      else if @props.version.get('event').indexOf('import') > -1
+        'Import'
+      else
+        s = @props.version.get('event')
+        s.charAt(0).toUpperCase() + s.slice(1)
+
+    getInitialState: ->
+      state =
+        expanded: false
+
+    truncatedContent: ->
+      s = @props.version.get('reify').content
+      if s? && s.length > 200
+        <span>
+          { s[0...200] }&nbsp;
+          <a href="#" onClick={ => @setState expanded: true } className="Version-preview--containerExpand">[more…]</a>
+        </span>
+      else
+        <span>{ s }</span>
+
+
+
+    render: ->
+      <div className="EditablePage">
+        <form action="#{ RevelryContent.base_path }versions/#{ @props.version.id }/revert_all_to" method="POST">
+          <input type="hidden" name="authenticity_token" value={ RevelryContent.Utilities.getAuthenticityToken() } />
+          <input type="hidden" name="_method" value="delete" />
+          <button className="Button Rollback">Change to this version</button>
+        </form>
+        <ul className="EditablePage-contents">
+          <div className="Version-rolledBack">
+            <p>
+              <strong>
+                {
+                  @getEventString()
+                }
+                &nbsp;on:
+              </strong>
+              &nbsp;<RevelryContent.Timestamp datetime={ @props.version.get('created_at') } withTimeAgo />
+            </p>
+            {
+              if @props.version.get('whodunnit')
+                <p>
+                  <strong>By:</strong> { @props.version.get('whodunnit') }
+                </p>
+            }
+          </div>
+
+          <div className="Version-preview">
+            {
+              if @props.version.get('reify')?.src?
+                <div className="Version-previewContainer">
+                  <img src={ @props.version.get('reify').src } />
+                </div>
+              else if @props.version.get('reify')?.content?
+                <div className="Version-previewContainer--text">
+                  <span>
+                    {
+                      if @state.expanded
+                        <span>{ @props.version.get('reify').content }</span>
+                      else
+                        <span>{ @truncatedContent() }</span>
+                    }
+                  </span>
+                </div>
+            }
+          </div>
+        </ul>
+      </div>
+
+  RevelryContent.RollbackGroup = React.createClass
+    getInitialState: ->
+      state =
+        open: false
+
+    classes: ->
+      React.addons.classSet 'Versions-rollbackGroup': true, 'Versions-rollbackGroup--open': @state.open
+
+    render: ->
+      <div className={ @classes() }>
+        <h5>
+          Rollback on { moment(@props.rollbackGroup[0].get('created_at')).format('ddd M/D/YYYY') }
+          {
+            unless @state.open
+              <button className="Button Rollback" onClick={ => @setState open: true }>Details</button>
+          }
+        </h5>
+        <div className="Versions-rollbackGroup-details">
+          {
+            _(@props.rollbackGroup).map (version)=>
+              <RevelryContent.VersionCard version={ version } />
+          }
+        </div>
+      </div>
+
+  RevelryContent.VersionHistory = React.createClass
+    getInitialState: ->
+      state =
+        versions: new RevelryContent.Models.Version.Collection()
+        done: false
+
+    getVersionGroups: ->
+      groups = []
+      currentDate = null
+      currentGroup = null
+      currentRollback = null
+      @state.versions.each (version)=>
+        unless moment(version.get('created_at')).isSame(currentDate, 'day')
+          if currentRollback
+            currentGroup.push currentRollback
+          groups.push([currentDate, currentGroup]) if currentGroup
+          currentDate = moment(version.get('created_at'))
+          currentGroup = []
+        if version.get('event').indexOf('rollback') > -1
+          currentRollback = [] unless currentRollback
+          currentRollback.push version
+        else
+          if currentRollback
+            currentGroup.push currentRollback
+            currentRollback = null
+          currentGroup.push version
+
+      if currentRollback
+        currentGroup.push currentRollback
+        currentRollback = null
+
+      if currentGroup && currentGroup.length > 0
+        groups.push([currentDate, currentGroup])
+      groups
+
+    render: ->
+      <div className="Versions EditablePages">
+        <h1>History</h1>
+        {
+          if @state.done
+            @getVersionGroups().map (group)=>
+              @renderDayGroup(group)
+          else
+            <RevelryContent.Loader />
+        }
+      </div>
+
+    renderDayGroup: (dayGroup)->
+      <div className="Versions-dayGroup">
+        <h5>
+          { dayGroup[0].format('ddd M/D/YYYY') }
+        </h5>
+        <div className="Versions-dayGroup-details">
+          {
+            _(dayGroup[1]).map (rollbackGroupOrVersion)=>
+              if rollbackGroupOrVersion instanceof Array
+                <RevelryContent.RollbackGroup rollbackGroup={ rollbackGroupOrVersion } />
+              else
+                <RevelryContent.VersionCard version={ rollbackGroupOrVersion } />
+          }
+        </div>
+      </div>
+
+    componentDidMount: ->
+      @state.versions.once 'sync', =>
+        @setState done: true
+        @forceUpdate()
+      @state.versions.fetch()

data/app/assets/javascripts/revelry_content/config.js.coffee.erb

@@ -0,0 +1,2 @@
+RevelryContent.base_path = '<%= Rails.application.routes.url_helpers.revelry_content_path %>';
+RevelryContent.inEditMode = false;

data/app/assets/javascripts/revelry_content/mixins/EditModeListener.coffee

@@ -0,0 +1,9 @@
+RevelryContent.EditModeListener =
+  componentDidMount: ->
+    RevelryContent.dispatcher.on 'didChangeEditMode', @changedEditMode
+
+  componentWillUnmount: ->
+    RevelryContent.dispatcher.off 'didChangeEditMode', @changeEditMode
+
+  changedEditMode: ->
+    @forceUpdate()

data/app/assets/javascripts/revelry_content/models/Content.js.coffee

@@ -0,0 +1,16 @@
+class RevelryContent.Models.Content extends Backbone.Model
+  url: ->
+    RevelryContent.base_path + '/contents'
+
+class RevelryContent.Models.FileContent extends RevelryContent.Models.Content
+  sync: (method, model, options)->
+    formData = new FormData()
+    formData.append 'content[src]', model.get('src')
+    formData.append 'authenticity_token', RevelryContent.Utilities.getAuthenticityToken()
+    _(_(model.attributes).omit('src')).each (value, attr)=>
+      formData.append "content[#{ attr }]", value
+    options.data = formData
+    options.contentType = false
+    options.processData = false
+    options.cache = false
+    Backbone.sync(method, model, options)

data/app/assets/javascripts/revelry_content/models/Version.js.coffee

@@ -0,0 +1,8 @@
+class RevelryContent.Models.Version extends Backbone.Model
+  url: ->
+    RevelryContent.base_path + "/versions/#{ id }"
+
+class RevelryContent.Models.Version.Collection extends Backbone.Collection
+  model: RevelryContent.Models.Version
+  url: ->
+    RevelryContent.base_path + "/versions/"

data/app/assets/javascripts/revelry_content/server_side.js.coffee

@@ -0,0 +1,10 @@
+#= require ./utilities
+#= require ./config
+#= require underscore
+#= require backbone
+#= require_tree ./mixins
+#= require_tree ./models
+#= require_tree ./components
+
+RevelryContent.dispatcher = new Backbone.Model()
+RevelryContent.Utilities.exportLazyComponents()

data/app/assets/javascripts/revelry_content/utilities.js

@@ -0,0 +1,69 @@
+if(typeof RevelryContent === 'undefined') {
+  var RevelryContent = {};
+}
+
+RevelryContent.Utilities = {};
+RevelryContent.Models = {};
+RevelryContent.lazyComponents = [];
+
+RevelryContent.Utilities.lazyComponentDefinition = function(def) {
+  RevelryContent.lazyComponents.push(def);
+}
+
+RevelryContent.Utilities.exportLazyComponents = function() {
+  for(var i = 0; i < RevelryContent.lazyComponents.length; i++) {
+    RevelryContent.lazyComponents[i]();
+  }
+}
+
+RevelryContent.Utilities.ready = function (fn) {
+  if (document.readyState != 'loading'){
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+};
+
+RevelryContent.Utilities.rev_script_loader = function(moduleIsLoaded, url, then) {
+  if(moduleIsLoaded) {
+    then();
+    return;
+  }
+  $.ajax({ url: url, dataType: 'script', success: then });
+};
+
+RevelryContent.Utilities.getAuthenticityToken = function() {
+  return $('meta[name="csrf-token"]').attr('content');
+};
+
+RevelryContent.Utilities.toObject = function (v) {
+  if (v === null || v === undefined) throw TypeError();
+  return Object(v);
+}
+
+RevelryContent.Utilities.ownPropertyKeys = function (o) {
+  return Object.getOwnPropertyNames(o);
+}
+
+if(typeof Object.assign === 'undefined') {
+  Object.assign = function(target, sources) {
+    var to = RevelryContent.Utilities.toObject(target);
+    if (arguments.length < 2) return to;
+
+    for (var sourcesIndex = 1; sourcesIndex < arguments.length; ++sourcesIndex) {
+      var nextSource = arguments[sourcesIndex];
+      if (nextSource === undefined || nextSource === null) continue;
+      var from = RevelryContent.Utilities.toObject(nextSource);
+      var keysArray = RevelryContent.Utilities.ownPropertyKeys(from);
+      for (var keysIndex = 0; keysIndex < keysArray.length; ++keysIndex) {
+        var nextKey = keysArray[keysIndex];
+        var desc = Object.getOwnPropertyDescriptor(from, nextKey);
+        if (desc !== undefined && desc.enumerable) {
+          var propValue = from[nextKey];
+          to[nextKey] = propValue;
+        }
+      }
+    }
+    return to;
+  }
+}

data/app/assets/javascripts/vendor/react_ujs.js

@@ -0,0 +1,64 @@
+var RevelryContent = RevelryContent || {};
+
+RevelryContent.load_react_ujs = function() {
+  // Unobtrusive scripting adapter for React
+  (function(document, window, React) {
+    var CLASS_NAME_ATTR = 'data-react-class';
+    var PROPS_ATTR = 'data-react-props';
+
+    // jQuery is optional. Use it to support legacy browsers.
+    var $ = (typeof jQuery !== 'undefined') && jQuery;
+
+    var findReactDOMNodes = function() {
+      var SELECTOR = '[' + CLASS_NAME_ATTR + ']';
+      return document.querySelectorAll(SELECTOR);
+    };
+
+    var mountReactComponents = function() {
+      var nodes = findReactDOMNodes();
+      for (var i = 0; i < nodes.length; ++i) {
+        var node = nodes[i];
+        var className = node.getAttribute(CLASS_NAME_ATTR);
+        // Assume className is simple and can be found at top-level (window).
+        // Fallback to eval to handle cases like 'My.React.ComponentName'.
+        var constructor = window[className] || eval.call(window, className);
+        var propsJson = node.getAttribute(PROPS_ATTR);
+        var props = propsJson && JSON.parse(propsJson);
+        React.render(React.createElement(constructor, props), node);
+      }
+    };
+
+    var unmountReactComponents = function() {
+      var nodes = findReactDOMNodes();
+      for (var i = 0; i < nodes.length; ++i) {
+        React.unmountComponentAtNode(nodes[i]);
+      }
+    };
+
+    var handleTurbolinksEvents = function() {
+      var handleEvent;
+      if ($) {
+        handleEvent = function(eventName, callback) {
+          $(document).on(eventName, callback);
+        }
+      } else {
+        handleEvent = function(eventName, callback) {
+          document.addEventListener(eventName, callback);
+        }
+      }
+      handleEvent('page:change', mountReactComponents);
+      handleEvent('page:receive', unmountReactComponents);
+    };
+
+    var handleNativeEvents = function() {
+      window.addEventListener('unload', unmountReactComponents);
+      mountReactComponents()
+    };
+
+    if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) {
+      handleTurbolinksEvents();
+    } else {
+      handleNativeEvents();
+    }
+  })(document, window, React);
+}

data/app/assets/stylesheets/revelry_content/application.scss

@@ -0,0 +1,22 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ */
+@import "revelry_content/reset";
+@import "revelry_content/modules/base";
+@import "revelry_content/layout";
+@import "revelry_content/partials/iconStyle";
+@import "revelry_content/components/buttons";
+@import "revelry_content/components/editors";
+@import "revelry_content/components/EditableList";
+@import "revelry_content/components/loader";
+@import "revelry_content/components/topBar";
+@import "revelry_content/components/version";

data/app/assets/stylesheets/revelry_content/components/EditableList.scss

@@ -0,0 +1,42 @@
+.EditablePages {
+  margin: 0 auto;
+  max-width: 70rem;
+  & ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+.EditablePage {
+  background: $alto;
+  border-radius: $global-radius;
+  color: $mine-shaft;
+  display: block;
+  margin: 0 0 $global-padding-small 0;
+  padding: $global-padding;
+  position: relative;
+  &:hover {
+    background: lighten($alto, 2%);
+  }
+}
+ul.EditablePage-contents {
+  padding-left: $global-padding-large;
+  li {
+    margin: 0 0 $global-padding-small 0;
+    overflow: hidden;
+  }
+}
+.EditablePage-element {
+  @extend .EditablePage;
+  margin: 0;
+}
+.Version-previewContainer {
+  img {
+    max-height: 8rem;
+  }
+}
+
+.Version-previewContainer--text {
+  background: white;
+  padding: 1rem $base-line-height * 0.5;
+}

data/app/assets/stylesheets/revelry_content/components/buttons.scss

@@ -0,0 +1,137 @@
+a.RevelryContentLink {
+  color: $primary;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.IconLink {
+  font-size: $rev-content-base-size * 1.2;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.Button {
+  background: $button-background;
+  border: none;
+  border-radius: $global-radius;
+  color: $button-color;
+  display: inline-block;
+  font-size: $rev-content-base-size * 1.4;
+  font-weight: bold;
+  line-height: 1.25em;
+  outline: 0;
+  padding: $global-padding;
+  box-shadow: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  &:hover {
+    background: lighten($button-background, 10%);
+    cursor: pointer;
+  }
+  &:active,
+  &:focus {
+    background: darken($button-background, 10%);
+    cursor: pointer;
+  }
+  &.isDisabled {
+    background: $alto;
+    color: $silver;
+    &:hover {
+      cursor: default;
+    }
+  }
+}
+.Button-action {
+  background: $button-action-background;
+  color: $button-action-color;
+  &:hover {
+    background: lighten($button-action-background, 10%);
+    cursor: pointer;
+  }
+  &:active,
+  &:focus {
+    background: darken($button-action-background, 10%);
+    cursor: pointer;
+  }
+}
+.Button-cancel {
+  background: $black;
+  color: $alto;
+}
+button.Button {
+  padding-bottom:.8rem;
+}
+.Button-small {
+  @extend .Button;
+  padding: $global-padding-small;
+}
+button.Button-small {
+  padding-bottom: .3rem;
+}
+.Button-large {
+  @extend .Button;
+  padding: $global-padding-large;
+}
+button.Button-large {
+  padding-bottom: 1.8rem;
+}
+
+.Rollback {
+  float: right;
+  background: transparent;
+  border: none;
+  border-radius: none;
+  color: $black;
+  font-size: $rev-content-base-size * 1.2;
+  font-weight: bold;
+  margin-bottom: $global-padding;
+  outline: 0;
+  position: relative;
+  box-shadow: none;
+  text-transform: uppercase;
+  &:hover,
+  &:active,
+  &:focus,
+  &.selected {
+    background: transparent;
+    color: $primary;
+    cursor: pointer;
+  }
+}
+
+.ButtonBar {
+  margin-bottom: 1rem;
+}
+
+.EditModeButton {
+  @extend .Button;
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+}
+
+.EditorButton {
+  @extend .Button;
+  &:hover {
+    background: darken($button-background, 10%);
+    cursor: pointer;
+  }
+  margin-right: 4px;
+}
+
+.EditorButton--bold {
+  font-weight: bold;
+}
+
+.EditorButton--italic {
+  font-style: italic;
+}
+
+.EditorButton--underline {
+  text-decoration: underline;
+}
+
+.EditorButton--link {
+  text-decoration: underline;
+  color: $link;
+}