Add a pop-up menu for splitting commands

components/active/init.js

@@ -215,14 +215,18 @@
         //////////////////////////////////////////////////////////////////
 
         focus: function(path) {
-            $('#active-files a')
-                .removeClass('active');
-            this.sessions[path].thumb.addClass('active');
+            this.highlightEntry(path);
             var session = this.sessions[path];
             codiad.editor.setSession(session);
             this.check(path);
         },
 
+        highlightEntry: function(path){
+            $('#active-files a')
+                .removeClass('active');
+            this.sessions[path].thumb.addClass('active');
+        },
+
         //////////////////////////////////////////////////////////////////
         // Mark changed
         //////////////////////////////////////////////////////////////////

components/editor/init.js

@@ -19,22 +19,8 @@
 
     var separatorWidth = 3;
 
-    $('#editor-region').on('h-resize-init', function(){
-        $('#editor-region > .editor-wrapper')
-            .width($(this).width())
-            .trigger('h-resize');
-
-    }).on('v-resize-init', function(){
-        $('#editor-region > .editor-wrapper')
-            .height($(this).height())
-            .trigger('v-resize');
-    });
-
-    $(window).resize(function(){
-        var er = $('#editor-region');
-        $('#editor-region')
-            .trigger('h-resize-init')
-            .trigger('v-resize-init');
+    $(function(){
+        codiad.editor.init();
     });
 
     function SplitContainer(root, children, splitType) {
@@ -259,6 +245,30 @@
 
         rootContainer: null,
 
+        init: function(){
+            this.createSplitMenu();
+
+            var er = $('#editor-region');
+
+            er.on('h-resize-init', function(){
+                $('#editor-region > .editor-wrapper')
+                    .width($(this).width())
+                    .trigger('h-resize');
+
+            }).on('v-resize-init', function(){
+                $('#editor-region > .editor-wrapper')
+                    .height($(this).height())
+                    .trigger('v-resize');
+            });
+
+
+            $(window).resize(function(){
+                $('#editor-region')
+                    .trigger('h-resize-init')
+                    .trigger('v-resize-init');
+            });
+        },
+
         //////////////////////////////////////////////////////////////////
         //
         // Retrieve editor settings from localStorage
@@ -359,17 +369,7 @@
             }
 
             i.el = el;
-            if (! this.isOpen(session)) {
-                i.setSession(session);
-            } else {
-
-                // Proxy session is required because scroll-position and
-                // cursor position etc. are shared among sessions.
-
-                var proxySession = new EditSession(session.getDocument());
-                proxySession.path = session.path;
-                i.setSession(proxySession);
-            }
+            this.setSession(session, i);
 
             // Check user-specified settings
             this.getSettings();
@@ -395,6 +395,43 @@
             return i;
         },
 
+        createSplitMenu: function(){
+            var _this = this;
+            $('#split-options-menu').appendTo($('body'));
+            var wh = $(window).height();
+
+            $('#split-horizontally a').click(function(e){
+                e.stopPropagation();
+                _this.addInstance(_this.activeInstance.getSession(), 'top');
+            });
+
+            $('#split-vertically a').click(function(e){
+                e.stopPropagation();
+                _this.addInstance(_this.activeInstance.getSession(), 'right');
+            });
+
+            $('#merge-all a').click(function(e){
+                e.stopPropagation();
+                var s = _this.activeInstance.getSession();
+                _this.exterminate();
+                _this.addInstance(s);
+            })
+
+            $('#split').click(function(e){
+                e.stopPropagation();
+                $('#split-options-menu').css({
+                    display: 'block',
+                    bottom: (wh - e.pageY + 10) + 'px',
+                    left: (e.pageX - 10) + 'px'
+                });
+                var fn = function(){
+                    $('#split-options-menu').hide();
+                    $(window).off('click', fn)
+                }
+                $(window).on('click', fn);
+            });
+        },
+
         //////////////////////////////////////////////////////////////////
         //
         // Remove all Editor instances and clean up the DOM
@@ -403,6 +440,7 @@
 
         exterminate: function() {
             $('.editor').remove();
+            $('.editor-wrapper').remove();
             $('#editor-region').append($('<div>').attr('id', 'editor'));
             $('#current-file').html('');
             this.instances = [];
@@ -494,7 +532,19 @@
             if (! i) {
                 i = this.addInstance(session);
             }
-            i.setSession(session);
+            if (! this.isOpen(session)) {
+                i.setSession(session);
+            } else {
+                // Proxy session is required because scroll-position and
+                // cursor position etc. are shared among sessions.
+
+                var proxySession = new EditSession(session.getDocument(),
+                                                   session.getMode());
+                proxySession.path = session.path;
+                proxySession.thumb = session.thumb;
+                i.setSession(proxySession);
+
+            }
             this.setActive(i);
         },
 
@@ -871,7 +921,7 @@
             this.setActive(i);
             if (! i) return;
             i.focus();
-            codiad.active.focus(i.getSession().path);
+            codiad.active.highlightEntry(i.getSession().path);
         },
 
         //////////////////////////////////////////////////////////////////

css/screen.css

@@ -329,6 +329,28 @@ table .icon {
     width: 100%;
     box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .9);
 }
+.options-menu {
+    position: absolute;
+    z-index: 9999;
+    background-color: #2E2E2E;
+    border: 3px solid #666666;
+    border-radius: 5px;
+    display: none;
+}
+.options-menu li {
+    border-bottom: 1px solid black;
+    padding: 10px;
+}
+.options-menu li a {
+    color: #7F7F7F;
+    text-decoration: none;
+}
+.options-menu li:hover {
+    background-color: #7F7F7F;
+}
+.options-menu li:hover a {
+    color: white;
+}
 .splitter {
     background-color: black;
     z-index: 9999;
@@ -362,25 +384,30 @@ table .icon {
     box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .5);
 }
 
-#settings {
+.ico-wrapper {
     display: block;
     position: relative;
     float: left;
-    padding: 0 0 0 10px;
+    padding: 0 0 0 12px;
     font-size: 13px;
     line-height: 100%;
 }
 
-#settings:hover { color: #fff; }
+.ico-wrapper:hover { color: #fff; }
 
-#settings .icon {
+.ico-wrapper .icon {
     position: absolute;
     width: 12px;
     height: 12px;
     font-size: 22px;
-    margin: -5px 0 0 -14px;
     padding: 0;
 }
+#split .icon {
+    margin: -5px 0 0 -10px;
+}
+#settings .icon {
+    margin: -5px 0 0 -16px;
+}
 
 .settings td { border: none; border-bottom: 1px solid #666; padding: 10px 0; }
 .settings td:first-child { padding-right: 20px; font-weight: bold; }

index.php

@@ -140,11 +140,17 @@ $components = json_decode($components,true);
 
         <div id="editor-region">
             <div id="editor-bottom-bar">
-                <a id="settings"><span class="icon">l</span>Settings</a>
+                <a id="split" class="ico-wrapper"><span class="icon">n</span> &nbsp;</a>
+                <div id="divider"></div>
+                <a id="settings" class="ico-wrapper"><span class="icon">l</span>Settings</a>
                 <div id="divider"></div>
                 <div id="current-file"></div>
             </div>
-
+            <ul id="split-options-menu" class="options-menu">
+              <li id="split-horizontally"><a href="#"> Split Horizontally </a></li>
+              <li id="split-vertically"><a href="#"> Split Vertically </a></li>
+              <li id="merge-all"><a href="#"> Merge all </a></li>
+            </ul>
         </div>
 
 
@@ -206,4 +212,4 @@ $components = json_decode($components,true);
     ?>
 
 </body>
-</html>
+</html>