toggle fullscreen

plugins/pencilblue/templates/admin/elements/wysiwyg_directive.html

@@ -45,7 +45,7 @@
       </div>
 
       <div class="btn-group btn-group-sm btn-group-format">
-        <button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.fullscreen}" ng-click="toggleLayoutFullscreen()" title="^loc_TOGGLE_FULLSCREEN^"><i class="fa fa-arrows-alt"></i></button>
+        <button type="button" class="btn btn-default" ng-class="{'active': wysiwyg.fullscreen}" ng-click="toggleFullscreen()" title="^loc_TOGGLE_FULLSCREEN^"><i class="fa fa-arrows-alt"></i></button>
       </div>
     </div>
   </div>

public/js/angular/directives/wysiwyg.js

@@ -16,7 +16,8 @@
           markdown: toMarkdown(scope.layout ? scope.layout.toString() : ''),
           selectedMediaItem: null,
           mediaPosition: 'none',
-          mediaMaxHeightUnit: 'px'
+          mediaMaxHeightUnit: 'px',
+          fullscreen: false
         };
 
         scope.availableElements = [{
@@ -149,6 +150,32 @@
           }
         };
 
+        scope.toggleFullscreen = function() {
+          scope.wysiwyg.fullscreen = !scope.wysiwyg.fullscreen;
+
+          if(scope.wysiwyg.fullscreen) {
+            angular.element(element).css({
+              'background-color': '#FFFFFF',
+              'position': 'fixed',
+              'top': '0',
+              'left': '0',
+              'width': '100%',
+              'height': '100%',
+              'overflow': 'auto',
+              'z-index': '10000'
+            }).focus();
+
+            angular.element(element).find('.content_layout').css({
+              'height': (angular.element(element).height() - angular.element(element).find('.content_layout').position().top - 5) + 'px',
+              'margin': '0'
+            });
+          }
+          else {
+            angular.element(element).attr('style', '');
+            angular.element(element).find('.content_layout').attr('style', '');
+          }
+        };
+
         scope.$watch('wysiwyg.layout', function(newVal, oldVal) {
           if(scope.wysiwyg.currentView !== 'editable') {
             return;