inserting media

nodeonly · May 25, 2015 · f47ed45 · f47ed45
1 parent eca4cad
commit f47ed45
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 4 deletions.
diff --git a/plugins/pencilblue/templates/admin/content/articles/article_form.html b/plugins/pencilblue/templates/admin/content/articles/article_form.html
@@ -61,6 +61,7 @@
 					</div>
 					<div class="form-group" ng-class="{'has-error': !isWysiwygValid('#article_wysiwyg')}">
 						<label>^loc_CONTENT^&nbsp;<span ng-bind="columnInches"></span></label>
+						<wysiwyg layout="layout" media="article.article_media"></wysiwyg>
 						^tmp_admin=elements=wysiwyg^
 						<div class="form_error" ng-if="!isWysiwygValid('#article_wysiwyg')" style="margin-top: -1em">^loc_REQUIRED_FIELD^</div>
 					</div>

diff --git a/plugins/pencilblue/templates/admin/elements/wysiwyg.html b/plugins/pencilblue/templates/admin/elements/wysiwyg.html
@@ -1,4 +1,3 @@
-<wysiwyg layout="layout"></wysiwyg>
 <script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
 <script type="text/javascript" src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-selectionsaverestore.js"></script>
 <script type="text/javascript" src="^to_markdown_src^"></script>

diff --git a/plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html b/plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html
@@ -91,4 +91,73 @@
       </div>
     </div>
   </div>
+
+  <div class="modal fade" insert-media-modal>
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <span>^loc_ADD_MEDIA^</span>
+        </div>
+        <div class="modal-body">
+          <div ng-if="!media.length">
+            <button type="button" class="btn btn-primary" ng-click="associateMedia()">^loc_ASSOCIATE_MEDIA^</button>
+          </div>
+          <div ng-if="media.length">
+            <div class="form-group">
+              <label>^loc_SELECT_MEDIA^</label>
+              <div ng-repeat="mediaItem in media">
+                <label style="font-weight: normal">
+                  <input type="radio" ng-model="wysiwyg.selectedMediaItem" ng-value="mediaItem">
+                  &nbsp;<span ng-bind="mediaItem.name"></span>
+                  &nbsp;<i class="fa fa-{{mediaItem.icon}}"></i>
+                </label>
+              </div>
+            </div>
+            <div class="form-group">
+              <label>^loc_MEDIA_FORMATTING^</label><br/>
+              <button type="button" class="btn btn-primary" ng-class="{'active': wysiwyg.mediaPosition === 'none'}" ng-click="wysiwyg.mediaPosition = 'none'">
+                <i class="fa fa-ban"></i>&nbsp;
+                ^loc_NONE^
+              </button>
+              <button type="button" class="btn btn-primary" ng-class="{'active': wysiwyg.mediaPosition === 'left'}" ng-click="wysiwyg.mediaPosition = 'left'">
+                <i class="fa fa-ban"></i>&nbsp;
+                ^loc_LEFT^
+              </button>
+              <button type="button" class="btn btn-primary" ng-class="{'active': wysiwyg.mediaPosition === 'center'}" ng-click="wysiwyg.mediaPosition = 'center'">
+                <i class="fa fa-ban"></i>&nbsp;
+                ^loc_CENTER^
+              </button>
+              <button type="button" class="btn btn-primary" ng-class="{'active': wysiwyg.mediaPosition === 'right'}" ng-click="wysiwyg.mediaPosition = 'right'">
+                <i class="fa fa-ban"></i>&nbsp;
+                ^loc_RIGHT^
+              </button>
+              <div class="spacer"></div>
+            </div>
+            <div class="form-group">
+              <label>^loc_MAXIMUM_HEIGHT^</label><br/>
+              <div class="input-group">
+                <input type="number" class="form-control" ng-model="wysiwyg.mediaMaxHeight"></input>
+                <div class="input-group-btn">
+                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    <span ng-bind="wysiwyg.mediaMaxHeightUnit"></span>&nbsp;<span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu pull-right">
+                    <li><a href="#" ng-click="wysiwyg.mediaMaxHeightUnit = 'px'">px</a></li>
+                    <li><a href="#" ng-click="wysiwyg.mediaMaxHeightUnit = 'em'">em</a></li>
+                    <li><a href="#" ng-click="wysiwyg.mediaMaxHeightUnit = '%'">%</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <button type="button" class="btn btn-default" data-dismiss="modal">
+              <i class="fa fa-ban"></i>&nbsp;^loc_CANCEL^
+            </button>
+            <button type="button" class="btn btn-primary" ng-click="insertMedia()" ng-disabled="!wysiwyg.selectedMediaItem">
+              <i class="fa fa-plus"></i>&nbsp;^loc_INSERT_MEDIA^
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/public/js/angular/directives/wysiwyg.js b/public/js/angular/directives/wysiwyg.js
@@ -6,13 +6,17 @@
       replace: true,
       templateUrl: '/admin/elements/wysiwyg',
       scope: {
-        layout: '='
+        layout: '=',
+        media: '='
       },
       link: function(scope, element, attrs) {
         scope.wysiwyg = {
           currentView: 'editable',
           layout: scope.layout ? scope.layout.toString() : '',
-          markdown: toMarkdown(scope.layout ? scope.layout.toString() : '')
+          markdown: toMarkdown(scope.layout ? scope.layout.toString() : ''),
+          selectedMediaItem: null,
+          mediaPosition: 'none',
+          mediaMaxHeightUnit: 'px'
         };
 
         scope.availableElements = [{
@@ -103,6 +107,34 @@
           scope.formatAction('inserthtml', '<hr class="read_more_break"></hr>');
         }
 
+        scope.showInsertMediaModal = function() {
+          scope.saveSelection();
+          angular.element(element).find('[insert-media-modal]').modal('show');
+        };
+
+        scope.associateMedia = function() {
+          angular.element(element).find('[insert-media-modal]').modal('hide');
+          angular.element('.nav-tabs a[href="#media"]').tab('show');
+        };
+
+        scope.insertMedia = function() {
+          angular.element(element).find('[insert-media-modal]').modal('hide');
+          scope.restoreSelection();
+
+          var mediaFormat = scope.getMediaFormat();
+          scope.formatAction('inserthtml', '<div>^media_display_' + scope.wysiwyg.selectedMediaItem._id + mediaFormat + '^</div>');
+        };
+
+        scope.getMediaFormat = function() {
+          var mediaFormat = '/position:' + scope.wysiwyg.mediaPosition;
+
+          if(scope.wysiwyg.mediaMaxHeight) {
+            mediaFormat = mediaFormat.concat(',maxheight:' + scope.wysiwyg.mediaMaxHeight + scope.wysiwyg.mediaMaxHeightUnit);
+          }
+
+          return mediaFormat;
+        }
+
         scope.saveSelection = function() {
           if(scope.editableSelection) {
             rangy.removeMarkers(scope.editableSelection);

diff --git a/public/localization/en-us.js b/public/localization/en-us.js
@@ -329,7 +329,7 @@ var loc =
         ADD_MEDIA: 'Add media',
         INSERT_MEDIA: 'Insert media',
         SELECT_MEDIA: 'Select media to insert',
-        ASSOCIATE_MEDIA: 'Associate media with the article',
+        ASSOCIATE_MEDIA: 'Associate media with the content',
         BOLD: 'Bold',
         ITALIC: 'Italic',
         UNDERLINE: 'Underline',