fixed the menu in perperation to the + button

TryGhost · Mar 2, 2017 · bad4754 · bad4754
1 parent 40c57ca
commit bad4754
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/app/styles/addons/gh-koenig/gh-koenig.css b/app/styles/addons/gh-koenig/gh-koenig.css
@@ -39,6 +39,7 @@
 
 .__mobiledoc-card {
     display: block;
+    border: 1px solid;
 }
 .__mobiledoc-card .koenig-card {
     position: relative;
@@ -64,7 +65,7 @@
 
 .__mobiledoc-card .card-handle button {
     background-color: var(--lightgrey);
-    border:1px solid var(--grey);
+    border:1px solid var(--lightgrey);
     font-size:10px;
     min-width: 80px;
 }
@@ -145,3 +146,4 @@ textarea.ed_code {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
 }
+
diff --git a/app/styles/addons/gh-koenig/koenig-menu.css b/app/styles/addons/gh-koenig/koenig-menu.css
@@ -7,6 +7,7 @@
     box-shadow: rbga(0,0,0,0.10) 0 2px 6px;
     min-width:300px;
     border-radius: 4px;
+    display: none;
 }
 .koenig-menu.is-visible {
     animation: koenig-menu-fadein 111ms;
@@ -34,6 +35,13 @@
 }
 
 
+#koenig-menu-button {
+    position: absolute;
+    display:none;
+    width:100px;
+    height: 100px;
+    background-color: deeppink;
+}
 
 @keyframes koenig-menu-fadein {
     from {

diff --git a/lib/gh-koenig/addon/components/koenig-menu.js b/lib/gh-koenig/addon/components/koenig-menu.js
@@ -4,13 +4,13 @@ import layout from '../templates/components/koenig-menu';
 
 export default Ember.Component.extend({
     layout,
-    classNames: ['koenig-menu'],
-    classNameBindings: ['isVisible'],
     range: null,
     menuSelectedItem: 0,
     toolsLength:0,
     selectedTool:null,
-    isVisible:false,
+    isActive: false,
+    isInputting: false,
+    isSetup: false,
     toolbar: Ember.computed(function () {
         let tools = [ ];
         let match = (this.query || "").trim().toLowerCase();
@@ -43,7 +43,7 @@ export default Ember.Component.extend({
 
         if(tools.length <  1) {
             this.isActive = false;
-            this.set('isVisible', false);
+            this.$('.koenig-menu').hide();
         }
         return tools;
     }),
@@ -63,17 +63,16 @@ export default Ember.Component.extend({
                 self.open(editor);
             }
         });
-
-
     },
     willDestroy() {
         this.editor.destroy();
     },
     cursorChange() {
-        if(this.isActive) {
-            if(!this.editor.range.isCollapsed || this.editor.range.head.section !== this._node || this.editor.range.head.offset < 1 || !this.editor.range.head.section) {
-               this.close();
-            }
+        if(!this.editor.range.isCollapsed || this.editor.range.head.section !== this._node || this.editor.range.head.offset < 1 || !this.editor.range.head.section) {
+            this.close();
+        }
+
+        if(this.isActive && this.isInputting) {
             this.query = this.editor.range.head.section.text.substring(this._offset, this.editor.range.head.offset);
             this.set('range', {
                 section: this._node,
@@ -85,21 +84,34 @@ export default Ember.Component.extend({
 
 
     },
-    open(editor) {
+    didRender( ) {
+        if(!this.isSetup) {
+            this.$('.koenig-menu-button').onClick = () => {alert("CLICK")};
+            this.isSetup = true;
+        }
+    },
+    /**
+     * 
+     * @param {*} editor 
+     * @param {*} notInputting is true if the user isn't typing to filter, this occurs
+     * if the menu is oppened via pressing + rather than typing in /
+     */
+    open(editor, notInputting) {
         let self = this;
-        let $this = this.$();
+        let $this = this.$('.koenig-menu');
         let $editor = Ember.$('.gh-editor-container');
 
         this._node = editor.range.head.section;
         this._offset = editor.range.head.offset;
         this.isActive = true;
+        this.isInputting = !notInputting;
         this.cursorChange();
         let range = window.getSelection().getRangeAt(0); // get the actual range within the DOM.
 
         let position =  range.getBoundingClientRect();
         let edOffset = $editor.offset();
 
-        this.set('isVisible', true);
+        $this.show();
 
         Ember.run.schedule('afterRender', this,
             () => {
@@ -164,8 +176,8 @@ export default Ember.Component.extend({
     },
     close() {
         this.isActive = false;
-
-        this.set('isVisible', false);
+        this.isInputting = false;
+        this.$('.koenig-menu').hide();
         // note: below is using a mobiledoc Private API.
         // there is no way to unregister a keycommand when it's registered so we have to remove it ourselves.
         for( let i = this.editor._keyCommands.length-1; i > -1; i--) {

diff --git a/lib/gh-koenig/addon/templates/components/koenig-menu.hbs b/lib/gh-koenig/addon/templates/components/koenig-menu.hbs
@@ -1,5 +1,9 @@
-<ul>
-{{#each toolbar as |tool index|}}
-    {{koenig-menu-item tool=tool iconURL=iconURL editor=editor range=range selected=tool.selected}}
-{{/each}}
-</ul>
+<div class='koenig-menu'>
+    <ul>
+    {{#each toolbar as |tool index|}}
+        {{koenig-menu-item tool=tool iconURL=iconURL editor=editor range=range selected=tool.selected}}
+    {{/each}}
+    </ul>
+</div>
+
+<div id="koenig-menu-button">+</div>