wywiwyg working with articles

nodeonly · May 30, 2015 · 73ffc66 · 73ffc66
1 parent cc4f493
commit 73ffc66
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 10 deletions.
diff --git a/plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html b/plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html
@@ -54,6 +54,7 @@
     <div class="layout_editable" ng-show="wysiwyg.currentView === 'editable'" ng-model="wysiwyg.layout" stylewithcss="false" contenteditable></div>
     <textarea class="layout_code" ng-show="wysiwyg.currentView === 'html'" ng-model="wysiwyg.layout"></textarea>
     <textarea class="layout_markdown" ng-show="wysiwyg.currentView === 'markdown'" ng-model="wysiwyg.markdown"></textarea>
+    <div class="temp_editable" style="display:none"></div>
   </div>
 
   <div class="modal fade" insert-link-modal>

diff --git a/plugins/pencilblue/templates/angular/admin/content/articles/article_form.html b/plugins/pencilblue/templates/angular/admin/content/articles/article_form.html
@@ -6,7 +6,6 @@
 	.controller('PencilBlueController', function($scope, $sce, $http, $filter, $timeout, $window, validationService) {
 		^angular_objects^
 		^tmp_angular=admin=elements=is_field_valid^
-		^tmp_angular=admin=elements=is_wysiwyg_valid^
 
 		$scope.urlAvailable = null;
 
@@ -110,7 +109,7 @@
 		};
 
 		$scope.getArticleData = function(draft, cb) {
-			var articleData = JSON.parse(JSON.stringify($scope.article));
+			var articleData = angular.copy($scope.article);
 			articleData.publish_date = (new Date($filter('parsableDate')($scope.article.publish_date))).getTime();
 			articleData.draft = draft ? 1 : 0;
 
@@ -129,15 +128,12 @@
 				topics.push($scope.article.article_topics[i]._id.toString());
 			}
 
-			var wysId = $('.wysiwyg').attr('id').substring('wysiwg_'.length + 1);
-			getWYSIWYGLayout(wysId, function(layout) {
-				articleData.article_media = media;
-				articleData.article_sections = sections;
-				articleData.article_topics = topics;
-				articleData.article_layout = layout;
+			articleData.article_media = media;
+			articleData.article_sections = sections;
+			articleData.article_topics = topics;
+			articleData.article_layout = $scope.layout;
 
-				cb(articleData);
-			});
+			cb(articleData);
 		};
 
 		$scope.previewArticle = function() {

diff --git a/public/js/angular/directives/wysiwyg.js b/public/js/angular/directives/wysiwyg.js
@@ -206,6 +206,81 @@
           }
         };
 
+        scope.setPublicLayout = function() {
+          if(!scope.wysiwyg.layout.length) {
+            return;
+          }
+
+          var self = this;
+
+          var tempEditable = angular.element(element).find('.temp_editable');
+          tempEditable.html(scope.wysiwyg.layout.toString());
+
+          this.convertReadMore = function() {
+            var s = 0;
+            var readMoreCount = tempEditable.find('.read_more_break').length;
+
+            if(readMoreCount === 0) {
+              scope.layout = tempEditable.html();
+              return;
+            }
+
+            tempEditable.find('.read_more_break').each(function() {
+              if(s === 0) {
+                angular.element(this).replaceWith('^read_more^');
+              }
+              else {
+                angular.element(this).replaceWith('');
+              }
+
+              s++;
+              if(s >= readMoreCount) {
+                scope.layout = tempEditable.html();
+              }
+            });
+          };
+
+          this.convertMedia = function() {
+            var i = 0;
+            var mediaCount = tempEditable.find('.media_preview').length;
+            if(mediaCount === 0) {
+              this.convertReadMore();
+              return;
+            }
+
+            tempEditable.find('.media_preview').each(function() {
+              var mediaTags = ['^' + angular.element(this).attr('media-tag') + '^'];
+              var subTags = angular.element(this).find('[media-tag]');
+              for(var j = 0; j < subTags.length; j++) {
+                mediaTags.push('^' + $(subTags[j]).attr('media-tag') + '^')
+              }
+
+              angular.element(this).replaceWith(mediaTags.concat(''));
+
+              i++;
+              if(i >= mediaCount){
+                self.convertReadMore();
+              }
+            });
+          }
+
+          var j = 0;
+          var selectionCount = tempEditable.find('.rangySelectionBoundary').length;
+          if(selectionCount === 0) {
+            this.convertMedia();
+            return;
+          }
+
+          tempEditable.find('.rangySelectionBoundary').each(function() {
+            angular.element(this).replaceWith('');
+
+            j++;
+            if(j >= selectionCount) {
+              self.convertMedia();
+            }
+          });
+        };
+
         scope.$watch('wysiwyg.layout', function(newVal, oldVal) {
           if(scope.wysiwyg.currentView !== 'editable') {
             return;
@@ -245,6 +320,7 @@
 
         rangy.init();
         $interval(scope.loadMediaPreviews, 500);
+        $interval(scope.setPublicLayout, 500);
       }
     };
   })