Cms refactor

.jshintrc

@@ -21,6 +21,10 @@
   "unused": "vars",
   "white": true,
   "globals": {
+    // deps that should be removed
+    "$": false,
+    "alert": false,
+
     // app deps
     "angular": false,
 

app/components/content-edit/content-edit-body.html

@@ -0,0 +1,13 @@
+<editor-item
+    article="article"
+    class="pull-right">
+</editor-item>
+<onion-editor
+    id="content-body"
+    ng-model="article.body"
+    role="multiline"
+    placeholder="<p>Write here</p>"
+    inline-objects="{{ inlineObjectsPath }}"
+    link-domain="{{ linkDomain }}"
+    link-search-handler="{{ searchHandler }}">
+</onion-editor>

app/components/content-edit/content-edit-body.js

@@ -0,0 +1,22 @@
+'use strict';
+
+angular.module('bulbs.cms.content.edit.body', [
+  'bulbs.cms.site.config'
+])
+  .directive('contentEditBody', [
+    'CmsConfig',
+    function (CmsConfig) {
+      return {
+        link: function (scope) {
+          scope.inlineObjectsPath = CmsConfig.getInlineObjecsPath();
+        },
+        restrict: 'E',
+        scope: {
+          article: '=',
+          linkDomain: '@',
+          searchHandler: '@'
+        },
+        templateUrl: CmsConfig.buildComponentPath('content-edit/content-edit-body.html')
+      };
+    }
+  ]);

app/components/content-edit/content-edit-main-image.html

@@ -0,0 +1,10 @@
+<section class="main-image row">
+  <div class="clearfix well">
+    <betty-editable
+        image="article.detail_image"
+        ratio="16x9"
+        placeholder-text="Optional Main Image"
+        add-styles="fa fa-picture-o add-feature-image">
+    </betty-editable>
+  </div>
+</section>

app/components/content-edit/content-edit-main-image.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('bulbs.cms.content.edit.mainImage', [
+  'BettyCropper',
+  'bulbs.cms.site.config'
+])
+  .directive('contentEditMainImage', [
+    'CmsConfig',
+    function (CmsConfig) {
+      return {
+        restrict: 'E',
+        scope: {
+          article: '='
+        },
+        templateUrl: CmsConfig.buildComponentPath('content-edit/content-edit-main-image.html')
+      };
+    }
+  ]);

app/components/content-edit/content-edit-title.html

@@ -0,0 +1,14 @@
+<onion-editor
+    id="content-title"
+    ng-model="article.title"
+    role="singleline"
+    formatting="italic"
+    placeholder="Headline">
+</onion-editor>
+<onion-editor
+    id="content-subhead"
+    ng-model="article.subhead"
+    role="singleline"
+    formatting=""
+    placeholder="Subhead (optional)">
+</onion-editor>

app/components/content-edit/content-edit-title.js

@@ -0,0 +1,17 @@
+'use strict';
+
+angular.module('bulbs.cms.content.edit.title', [
+  'bulbs.cms.site.config'
+])
+  .directive('contentEditTitle', [
+    'CmsConfig',
+    function (CmsConfig) {
+      return {
+        restrict: 'E',
+        scope: {
+          article: '='
+        },
+        templateUrl: CmsConfig.buildComponentPath('content-edit/content-edit-title.html')
+      };
+    }
+  ]);

app/components/content-edit/content-edit.js

@@ -0,0 +1,7 @@
+'use strict';
+
+angular.module('bulbs.cms.content', [
+  'bulbs.cms.content.edit.body',
+  'bulbs.cms.content.edit.mainImage',
+  'bulbs.cms.content.edit.title'
+]);

app/components/editorial/editor-item.html

@@ -0,0 +1,14 @@
+<div
+    ng-show="editorItems.data.length">
+  <div
+      class="note"
+      ng-repeat="item in editorItems.data">
+    <h5
+        class="note-author">
+      {{ item.sender.first_name }} {{ item.sender.last_name }}
+      <div>{{ parseCreated(item.created) }}</div>
+    </h5>
+    <h6 class="note-status">{{ parseStatus(item.notes) }}</h6>
+    <div class="note-text">{{ parseNote(item.notes) }}</div>
+  </div>
+</div>

app/components/editorial/editor-item.js

@@ -0,0 +1,54 @@
+'use strict';
+
+angular.module('bulbs.cms.editorial.editorItem', [
+  'bulbs.cms.site.config'
+])
+  .directive('editorItem', function ($http, EditorItems, moment, CmsConfig) {
+    return {
+      restrict: 'E',
+      templateUrl: CmsConfig.buildComponentPath('editorial/editor-item.html'),
+      scope: {
+        article: '='
+      },
+      link: function (scope, element, attrs) {
+
+        EditorItems.getItems((scope.article.id || ''));
+
+        scope.editorItems = EditorItems;
+
+        scope.parseCreated = function (date) {
+          return moment(date).format('h:mm A MMM D');
+        };
+
+        /*\
+            These two are really, really bad.
+
+            The EditorItem note is in the form of:
+
+            "Status: {{ status_text }}\n\n{{ note_text }}"
+
+            Parse accordingly.
+        \*/
+
+        scope.parseNote = function (note) {
+          var parsed = note.split(
+            'Status: '                  // Removing 'Status: '
+          )[1].split('\n\n');           // Split the note from the status text
+
+          parsed.shift();               // Removing the status_text
+
+          return parsed.join('\n\n');   // In case there are newlines in the note_text
+        };
+
+        scope.parseStatus = function (status) {
+          var parsed = status.split(
+            'Status: '                  // Removing 'Status: '
+          )[1].split(
+            '\n\n'                      // Split the note from the status text
+          ).shift();                    // Get the status_text
+
+          return parsed !== 'N/A' ? parsed : '';
+        };
+      }
+    };
+  });

app/components/editorial/editor-item.less

@@ -0,0 +1,41 @@
+editor-item {
+  > div {
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    margin-right: -200px;
+    max-height: 500px;
+    overflow-y: scroll;
+    position: absolute;
+    width: 200px;
+  }
+
+  .note {
+    border-bottom: 1px solid #e3e3e3;
+    padding: 0px 10px 10px 15px;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    .note-author{
+      margin-bottom: 5px;
+
+      div {
+        color: #a3a3a3;
+        font-size: 11px;
+        font-weight: 400;
+      }
+    }
+
+    .note-status {
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 13px;
+      margin-top: 0px;
+    }
+
+    .note-text {
+      font-size: 13px;
+    }
+  }
+}

app/components/editorial/editor-items.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('bulbs.cms.editorial.editorItems', [])
+  .service('EditorItems', function EditorItems($http) {
+    this.data = [];
+    var self = this;
+    this.getItems = function (article) {
+      $http.get(
+        '/cms/api/v1/content/' + article + '/send/'
+      ).success(function (data, status) {
+        self.data = data.editor_items;
+      }).error(function (data, status) {});
+    };
+  });

app/components/editorial/editorial.js

@@ -0,0 +1,4 @@
+angular.module('bulbs.cms.editorial', [
+  'bulbs.cms.editorial.sendToEditorButton',
+  'bulbs.cms.editorial.editorItems'
+]);

app/components/editorial/send-to-editor-button.js

@@ -0,0 +1,33 @@
+'use strict';
+
+angular.module('bulbs.cms.editorial.sendToEditorButton', [
+  'bulbs.cms.editorial.sendToEditorModal',
+  'bulbs.cms.site.config'
+])
+  .controller('SendToEditorButtonCtrl', [
+    '$scope', '$modal', 'moment', 'CmsConfig',
+    function ($scope, $modal, moment, CmsConfig) {
+      $scope.TIMEZONE_LABEL = moment.tz(CmsConfig.getTimezoneName()).format('z');
+
+      $scope.sendToEditorModal = function (article) {
+        return $modal.open({
+          templateUrl: CmsConfig.buildComponentPath('editorial/send-to-editor-modal.html'),
+          controller: 'SendtoeditormodalCtrl',
+          scope: $scope,
+          resolve: {
+            article: function(){ return article; }
+          }
+        });
+      };
+
+      $scope.getStatus = function (article) {
+        if(!article || !article.published){
+          return 'unpublished';
+        }else if(moment(article.published) > moment()){
+          return 'scheduled';
+        }else{
+          return 'published';
+        }
+      };
+    }
+  ]);

app/components/editorial/send-to-editor-modal.html

@@ -0,0 +1,20 @@
+<div class="modal-header">
+  <button type="button" class="close" ng-click="$dismiss();" aria-hidden="true">&times;</button>
+  <h4 class="modal-title">Send to Editor</h4>
+</div>
+<div class="modal-body">
+  <select
+    class="form-control article-statuses"
+    ng-init="articleStatus.s = articleStatuses[0]"
+    ng-model="articleStatus.s"
+    ng-options="status for status in articleStatuses">
+  </select>
+  <section class="form-group note-to-editor">
+      <h5>Note for Editor <small>(Optional)</small></h5>
+      <textarea type="text" style="height: 150px;" class="form-control note-to-editor" ng-model="$parent.noteToEditor"></textarea>
+  </section>
+</div>
+<div class="modal-footer">
+  <button class="btn btn-link" ng-click="$dismiss();">Cancel</button>
+  <save-button-old color-styling="btn-primary" get-promise="sendToEditor(article);" config="buttonConfig"></save-button-old>
+</div>

app/components/editorial/send-to-editor-modal.js

@@ -0,0 +1,59 @@
+'use strict';
+
+angular.module('bulbs.cms.editorial.sendToEditorModal', [])
+  .controller('SendtoeditormodalCtrl', [
+    '$scope', '$http', '$modalInstance', 'EditorItems', 'Login', 'article',
+    function ($scope, $http, $modalInstance, EditorItems, Login, article) {
+      // see http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal
+      $scope.articleStatus = {};
+
+      $scope.buttonConfig = {
+        idle: 'Send',
+        busy: 'Sending',
+        finished: 'Sent!',
+        error: 'Error!'
+      };
+
+      $scope.articleStatuses = [
+        '- Article Status -',
+        'Needs First Pass',
+        'Needs Final Edit',
+        'Needs Copy Edit',
+        'Ready to Publish'
+      ];
+
+      $scope.sendToEditor = function (article) {
+        var status, note, noteToEditor;
+
+        noteToEditor = $scope.noteToEditor || 'No note attached';
+
+        // Leaving most of the hacks here in the temporary code
+        // until we figure out a more permanent solution
+        if ($scope.articleStatus.s !== $scope.articleStatuses[0]) {
+          status = $scope.articleStatus.s;
+          note = 'Status: ' + $scope.articleStatus.s + '\n\n' + noteToEditor;
+        } else {
+          status = '';
+          note = 'Status: N/A' + '\n\n' + noteToEditor;
+        }
+
+        return $http({
+          url: '/cms/api/v1/content/' + article.id + '/send/',
+          method: 'POST',
+          data: {
+            notes: note,
+            status: status
+          }
+        }).success(function (data) {
+          EditorItems.getItems(article.id);
+          $scope.publishSuccessCbk({article: article, response: data});
+          $modalInstance.close();
+        }).error(function (error, status, data) {
+          if(status === 403) {
+            Login.showLoginModal();
+          }
+          $modalInstance.dismiss();
+        });
+      };
+    }
+  ]);

app/components/editorial/send-to-editor.less

@@ -0,0 +1,4 @@
+.modal-body .article-statuses {
+  width: 200px;
+  margin-bottom: 35px;
+}