edit config value in fullscreen

apollo-portal/src/main/resources/static/config.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="vendor/angular/angular-toastr-1.4.1.min.css">
     <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
+    <link rel="stylesheet" type="text/css" href="vendor/jquery-plugin/textareafullscreen.css">
     <link rel="stylesheet" type="text/css" media='all' href="vendor/angular/loading-bar.min.css">
     <link rel="stylesheet" type="text/css" href="styles/common-style.css">
 </head>
@@ -364,6 +365,7 @@
 <script src="vendor/jquery.min.js" type="text/javascript"></script>
 
 <script src="vendor/select2/select2.min.js" type="text/javascript"></script>
+<script src="vendor/jquery-plugin/jquery.textareafullscreen.js" type="text/javascript"></script>
 
 <!--lodash.js-->
 <script src="vendor/lodash.min.js" type="text/javascript"></script>

apollo-portal/src/main/resources/static/scripts/directive/item-modal-directive.js

@@ -30,6 +30,8 @@ function itemModalDirective(toastr, $sce, AppUtil, EventManager, ConfigService)
                 scope.valueWithHiddenChars = $sce.trustAsHtml('');
             });
 
+            $("#valueEditor").textareafullscreen();
+            
             function doItem() {
 
                 if (!scope.item.value) {

apollo-portal/src/main/resources/static/vendor/jquery-plugin/jquery.textareafullscreen.js

+/*
+
+ jQuery Textarea Fullscreen Editor v1.0
+ Fullscreen text editor plugin for jQuery.
+
+ :For more details visit http://github.com/CreoArt/jquery.textareafullscreen
+
+ - CreoArt <support@creoart.org>
+ - http://github.com/CreoArt
+
+ Licensed under Apache - https://raw.githubusercontent.com/CreoArt/jquery.textareafullscreen/master/LICENSE
+
+*/
+(function($) {
+    "use strict";
+
+    var isFullscreen = false,
+        $el,
+        $wrapper,
+        $editor,
+        $icon,
+        $overlay,
+        transitionDuration = 300,
+        sourceWidth,
+        sourceHeight,
+        settings = {
+            overlay: true,
+            maxWidth: '',
+            maxHeight: ''
+        };
+    var methods = {
+
+        init: function(opts) {
+
+            settings = settings || {};
+            $.extend(true, settings, settings);
+            $.extend(true, settings, opts);
+
+            $el = $(this);
+            if (!$el.is('textarea')) {
+                $.error(
+                    'Error initializing Textarea Fullscreen Editor Plugin. It can only work on <textarea> element.'
+                );
+                return;
+            }
+            var content =
+                '<div class="tx-editor-wrapper"><div class="tx-editor"><a href="#" class="tx-icon"></a></div></div>';
+            var $wrapper = $(content).insertAfter(this);
+            $editor = $wrapper.find('.tx-editor');
+            $icon = $editor.find('.tx-icon');
+            $editor.append($el);
+
+            $el.css({
+                'width': '100%',
+                'height': '100%',
+				'resize': 'none'
+            });
+
+            // ESC = closes the fullscreen mode
+            $(window).on("keyup.txeditor", function(e) {
+                if (e.keyCode == 27) {
+                    isFullscreen ? methods.minimize() : '';
+                }
+            });
+
+            // fullscreen icon click event
+            $icon.on('click.txeditor.icon', function(e) {
+                e.preventDefault();
+                methods[isFullscreen ? "minimize" : "expand"]();
+            });
+            return this;
+        },
+
+        showOverlay: function() {
+            $('<div class="tx-editor-overlay" />').appendTo('body')
+                .fadeTo(0, 1)
+                .click(function() {
+                    methods.minimize();
+                });
+            return this;
+        },
+
+        removeOverlay: function() {
+            var $overlay = $('.tx-editor-overlay');
+            if ($overlay.length) {
+                $overlay.fadeTo(0, 0, function() {
+                    $(this).remove();
+                });
+            }
+            return this;
+        },
+
+        expand: function() {
+            settings.maxWidth ? $editor.css('max-width', settings.maxWidth) :
+                '';
+            settings.maxHeight ? $editor.css('max-height', settings.maxHeight) :
+                '';
+            if (settings.overlay) {
+                methods.showOverlay();
+            }
+
+            $(window).on('resize.txeditor', function() {
+                maxRelocate($editor);
+            });
+
+            $editor.addClass('expanded');
+            transitions();
+
+            return this;
+        },
+
+        minimize: function() {
+
+            $(window).off('resize.txeditor', relocate($editor))
+            $editor.removeClass('expanded')
+                .css({
+                    'max-width': 'none',
+                    'max-height': 'none'
+                });
+            if (settings.overlay) {
+                methods.removeOverlay();
+            }
+            transitions();
+
+            return this;
+        },
+
+        destroy: function() {
+
+            methods.removeOverlay();
+            $wrapper.insertBefore($el);
+            $wrapper.remove();
+
+            $(window).off('keyup.txeditor')
+                .off('resize.txeditor');
+
+            return this;
+        },
+    };
+
+    var transitions = function () {
+
+            if (isFullscreen) {
+				$el.focus();
+				isFullscreen = false;
+				relocate($editor);
+            } else {
+				$el.focus();
+				$editor.css('opacity', 1);
+				isFullscreen = true;
+				maxRelocate($editor);
+            }
+
+            return;
+    };
+
+    var inited = false;
+    function maxRelocate(el) {
+        if (!inited) {
+            sourceWidth = el.width();
+            sourceHeight = el.height() / 2;
+            inited = true;
+        }
+        var yPos = 0 | ((($(window).height() - el.height()) / 2));
+        var xPos = 0 | (($(window).width() - el.width()) / 2);
+        el.css({
+            'top': -10,
+            'left': 120 - xPos,
+            'width': $(window).width() - 50,
+            'height': $(window).height() - 40
+        });
+    }
+
+    function relocate(el) {
+
+            var yPos = 0 | ((($(window).height() - el.height()) / 2));
+            var xPos = 0 | (($(window).width() - el.width()) / 2);
+            el.css({
+                'top': yPos,
+                'left': xPos,
+                'width': sourceWidth,
+                'height': sourceHeight
+            });
+        }
+
+    $.fn.textareafullscreen = function(method) {
+        $.extend(methods, transitions);
+        if (methods[method]) {
+            return methods[method].apply(this, Array.prototype.slice.call(
+                arguments, 1));
+        } else if (typeof method === 'object' || !method) {
+            return methods.init.apply(this, arguments);
+        } else {
+            $.error('Method ' + method +
+                ' does not exist on jQuery.textareafullscreen');
+        }
+    };
+
+})(jQuery);

apollo-portal/src/main/resources/static/vendor/jquery-plugin/textareafullscreen.css

+.tx-editor-wrapper {
+  position: relative;
+}
+.tx-editor-wrapper .tx-editor.expanded {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 80%;
+  height: 80%;
+  z-index: 500;
+}
+.tx-editor-wrapper .tx-editor {
+    height: 140px;
+}
+.tx-editor-wrapper .tx-editor .tx-icon {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  width: 18px;
+  height: 16px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA4LzE2LzEzspl6ugAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAB7SURBVDiN7ZOxCsAgDESvxXyhi5P/Fif/0i6NGJH2KIUufVOUJB45s6lqw0DOGQylFHfeqSqCYEGMESJCF6aUAAC1Vt9IRPolixtDG1DVxjLnhtVL8yAvlZy8Nuy/0T1L19g1cY3Mavupd9bPWL5T9ERJV2SBrcfn238A3whjoYEPESwAAAAASUVORK5CYII=');
+  cursor: pointer;
+  z-index: 3;
+}
+.tx-editor-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  opacity: 0;
+}

apollo-portal/src/main/resources/static/views/component/item-modal.html

@@ -31,7 +31,7 @@
                         Value
                     </label>
                     <div class="col-sm-10" valdr-form-group>
-                        <textarea name="value" class="form-control" rows="6" tabindex="2"
+                        <textarea id="valueEditor" name="value" class="form-control" rows="6" tabindex="2"
                                   ng-required="true"
                                   ng-model="item.value">
                             </textarea>