Refactors most controllers and directives into classes for more organized and maintainable code

app/assets/templates/editor.pug

@@ -1,72 +1,253 @@
 #editor-column.section.editor.sn-component(aria-label='Note')
   .sn-component
-    .sk-app-bar.no-edges(ng-if='ctrl.note.locked', ng-init="ctrl.lockText = 'Note Locked'", ng-mouseleave="ctrl.lockText = 'Note Locked'", ng-mouseover="ctrl.lockText = 'Unlock'")
+    .sk-app-bar.no-edges(
+      ng-if='self.state.note.locked', 
+      ng-init="self.lockText = 'Note Locked'", 
+      ng-mouseleave="self.lockText = 'Note Locked'", 
+      ng-mouseover="self.lockText = 'Unlock'"
+      )
       .left
-        .sk-app-bar-item(ng-click='ctrl.toggleLockNote()')
+        .sk-app-bar-item(ng-click='self.toggleLockNote()')
           .sk-label.warning
             i.icon.ion-locked
-            |             {{ctrl.lockText}}
-  #editor-title-bar.section-title-bar(ng-class="{'locked' : ctrl.note.locked}", ng-show='ctrl.note && !ctrl.note.errorDecrypting')
+            |             {{self.lockText}}
+  #editor-title-bar.section-title-bar(
+    ng-class="{'locked' : self.state.note.locked}", 
+    ng-show='self.state.note && !self.state.note.errorDecrypting'
+    )
     .title
-      input#note-title-editor.input(ng-blur='ctrl.onNameBlur()', ng-change='ctrl.onTitleChange()', ng-disabled='ctrl.note.locked', ng-focus='ctrl.onNameFocus()', ng-keyup='$event.keyCode == 13 && ctrl.onTitleEnter($event)', ng-model='ctrl.note.title', select-on-click='true', spellcheck='false')
+      input#note-title-editor.input(
+        ng-blur='self.onNameBlur()', 
+        ng-change='self.onTitleChange()', 
+        ng-disabled='self.state.note.locked', 
+        ng-focus='self.onNameFocus()', 
+        ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)', 
+        ng-model='self.state.note.title', 
+        select-on-click='true', 
+        spellcheck='false')
     #save-status
-      .message(ng-class="{'warning sk-bold': ctrl.syncTakingTooLong, 'danger sk-bold': ctrl.saveError}") {{ctrl.noteStatus.message}}
-      .desc(ng-show='ctrl.noteStatus.desc') {{ctrl.noteStatus.desc}}
+      .message(
+        ng-class="{'warning sk-bold': self.state.syncTakingTooLong, 'danger sk-bold': self.state.saveError}"
+        ) {{self.state.noteStatus.message}}
+      .desc(ng-show='self.state.noteStatus.desc') {{self.state.noteStatus.desc}}
     .editor-tags
-      #note-tags-component-container(ng-if='ctrl.tagsComponent')
-        component-view.component-view(component='ctrl.tagsComponent', ng-class="{'locked' : ctrl.note.locked}", ng-style="ctrl.note.locked && {'pointer-events' : 'none'}")
-      input.tags-input(ng-blur='ctrl.updateTagsFromTagsString($event, ctrl.tagsString)', ng-disabled='ctrl.note.locked', ng-if='!(ctrl.tagsComponent && ctrl.tagsComponent.active)', ng-keyup='$event.keyCode == 13 && $event.target.blur();', ng-model='ctrl.tagsString', placeholder='#tags', spellcheck='false', type='text')
-  .sn-component(ng-if='ctrl.note')
+      #note-tags-component-container(ng-if='self.state.tagsComponent')
+        component-view.component-view(
+          component='self.state.tagsComponent', 
+          ng-class="{'locked' : self.state.note.locked}", 
+          ng-style="self.state.note.locked && {'pointer-events' : 'none'}"
+          )
+      input.tags-input(
+        ng-blur='self.updateTagsFromTagsString($event, self.state.tagsString)', 
+        ng-disabled='self.state.note.locked', 
+        ng-if='!(self.state.tagsComponent && self.state.tagsComponent.active)', 
+        ng-keyup='$event.keyCode == 13 && $event.target.blur();', 
+        ng-model='self.state.tagsString', 
+        placeholder='#tags', 
+        spellcheck='false', 
+        type='text'
+        )
+  .sn-component(ng-if='self.state.note')
     #editor-menu-bar.sk-app-bar.no-edges
       .left
-        .sk-app-bar-item(click-outside='ctrl.showMenu = false;', is-open='ctrl.showMenu', ng-class="{'selected' : ctrl.showMenu}", ng-click="ctrl.toggleMenu('showMenu')")
+        .sk-app-bar-item(
+          click-outside=`self.setMenuState('showOptionsMenu', false)`, 
+          is-open='self.state.showOptionsMenu', 
+          ng-class="{'selected' : self.state.showOptionsMenu}", 
+          ng-click="self.toggleMenu('showOptionsMenu')"
+          )
           .sk-label Options
-          .sk-menu-panel.dropdown-menu(ng-if='ctrl.showMenu')
+          .sk-menu-panel.dropdown-menu(ng-if='self.state.showOptionsMenu')
             .sk-menu-panel-section
               .sk-menu-panel-header
                 .sk-menu-panel-header-title Note Options
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.togglePin()', desc="'Pin or unpin a note from the top of your list'", label="ctrl.note.pinned ? 'Unpin' : 'Pin'")
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.toggleArchiveNote()', desc="'Archive or unarchive a note from your Archived system tag'", label="ctrl.note.archived ? 'Unarchive' : 'Archive'")
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.toggleLockNote()', desc="'Locking notes prevents unintentional editing'", label="ctrl.note.locked ? 'Unlock' : 'Lock'")
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.toggleProtectNote()', desc="'Protecting a note will require credentials to view it (Manage Privileges via Account menu)'", label="ctrl.note.content.protected ? 'Unprotect' : 'Protect'")
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.toggleNotePreview()', circle="ctrl.note.content.hidePreview ? 'danger' : 'success'", circle-align="'right'", desc="'Hide or unhide the note preview from the list of notes'", label="'Preview'")
-              menu-row(action='ctrl.selectedMenuItem(); ctrl.deleteNote()', desc="'Send this note to the trash'", label="'Move to Trash'", ng-show='!ctrl.altKeyDown && !ctrl.note.content.trashed && !ctrl.note.errorDecrypting', stylekit-class="'warning'")
-              menu-row(action='ctrl.selectedMenuItem(); ctrl.deleteNotePermanantely()', desc="'Delete this note permanently from all your devices'", label="'Delete Permanently'", ng-show='!ctrl.note.content.trashed && ctrl.note.errorDecrypting', stylekit-class="'danger'")
-            div(ng-if='ctrl.note.content.trashed || ctrl.altKeyDown')
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.restoreTrashedNote()', desc="'Undelete this note and restore it back into your notes'", label="'Restore'", ng-show='ctrl.note.content.trashed', stylekit-class="'info'")
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.deleteNotePermanantely()', desc="'Delete this note permanently from all your devices'", label="'Delete Permanently'", stylekit-class="'danger'")
-              menu-row(action='ctrl.selectedMenuItem(true); ctrl.emptyTrash()', desc="'Permanently delete all notes in the trash'", label="'Empty Trash'", ng-show='ctrl.note.content.trashed || !ctrl.altKeyDown', stylekit-class="'danger'", subtitle="ctrl.getTrashCount() + ' notes in trash'")
+              menu-row(
+                action='self.selectedMenuItem(true); self.togglePin()', 
+                desc="'Pin or unpin a note from the top of your list'", 
+                label="self.state.note.pinned ? 'Unpin' : 'Pin'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(true); self.toggleArchiveNote()', 
+                desc="'Archive or unarchive a note from your Archived system tag'", 
+                label="self.state.note.archived ? 'Unarchive' : 'Archive'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(true); self.toggleLockNote()', 
+                desc="'Locking notes prevents unintentional editing'", 
+                label="self.state.note.locked ? 'Unlock' : 'Lock'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(true); self.toggleProtectNote()', 
+                desc=`'Protecting a note will require credentials to view 
+                      it (Manage Privileges via Account menu)'`, 
+                label="self.state.note.content.protected ? 'Unprotect' : 'Protect'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(true); self.toggleNotePreview()', 
+                circle="self.state.note.content.hidePreview ? 'danger' : 'success'", 
+                circle-align="'right'", 
+                desc="'Hide or unhide the note preview from the list of notes'", 
+                label="'Preview'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(); self.deleteNote()', 
+                desc="'Send this note to the trash'", 
+                label="'Move to Trash'", 
+                ng-show='!self.state.altKeyDown && !self.state.note.content.trashed && !self.state.note.errorDecrypting', 
+                stylekit-class="'warning'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(); self.deleteNotePermanantely()', 
+                desc="'Delete this note permanently from all your devices'", 
+                label="'Delete Permanently'", 
+                ng-show='!self.state.note.content.trashed && self.state.note.errorDecrypting', 
+                stylekit-class="'danger'"
+                )
+            div(ng-if='self.state.note.content.trashed || self.state.altKeyDown')
+              menu-row(
+                action='self.selectedMenuItem(true); self.restoreTrashedNote()', 
+                desc="'Undelete this note and restore it back into your notes'", 
+                label="'Restore'", 
+                ng-show='self.state.note.content.trashed', 
+                stylekit-class="'info'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(true); self.deleteNotePermanantely()', 
+                desc="'Delete this note permanently from all your devices'", 
+                label="'Delete Permanently'", 
+                stylekit-class="'danger'"
+                )
+              menu-row(
+                action='self.selectedMenuItem(true); self.emptyTrash()',
+                desc="'Permanently delete all notes in the trash'", 
+                label="'Empty Trash'", 
+                ng-show='self.state.note.content.trashed || !self.state.altKeyDown', 
+                stylekit-class="'danger'", 
+                subtitle="self.getTrashCount() + ' notes in trash'"
+                )
             .sk-menu-panel-section
               .sk-menu-panel-header
                 .sk-menu-panel-header-title Global Display
-              menu-row(action="ctrl.selectedMenuItem(true); ctrl.toggleKey('monospaceFont')", circle="ctrl.monospaceFont ? 'success' : 'neutral'", desc="'Toggles the font style for the default editor'", disabled='ctrl.selectedEditor', label="'Monospace Font'", subtitle="ctrl.selectedEditor ? 'Not available with editor extensions' : null")
-              menu-row(action="ctrl.selectedMenuItem(true); ctrl.toggleKey('spellcheck')", circle="ctrl.spellcheck ? 'success' : 'neutral'", desc="'Toggles spellcheck for the default editor'", disabled='ctrl.selectedEditor', label="'Spellcheck'", subtitle="ctrl.selectedEditor ? 'Not available with editor extensions' : (ctrl.isDesktop ? 'May degrade editor performance' : null)")
-              menu-row(action="ctrl.selectedMenuItem(true); ctrl.toggleKey('marginResizersEnabled')", circle="ctrl.marginResizersEnabled ? 'success' : 'neutral'", desc="'Allows for editor left and right margins to be resized'", faded='!ctrl.marginResizersEnabled', label="'Margin Resizers'")
-        .sk-app-bar-item(click-outside='ctrl.showEditorMenu = false;', is-open='ctrl.showEditorMenu', ng-class="{'selected' : ctrl.showEditorMenu}", ng-click="ctrl.toggleMenu('showEditorMenu')")
+              menu-row(
+                action="self.selectedMenuItem(true); self.toggleKey(self.prefKeyMonospace)", 
+                circle="self.state.monospaceEnabled ? 'success' : 'neutral'", 
+                desc="'Toggles the font style for the default editor'", 
+                disabled='self.state.selectedEditor', 
+                label="'Monospace Font'", 
+                subtitle="self.state.selectedEditor ? 'Not available with editor extensions' : null"
+                )
+              menu-row(
+                action="self.selectedMenuItem(true); self.toggleKey(self.prefKeySpellcheck)", 
+                circle="self.state.spellcheck ? 'success' : 'neutral'", 
+                desc="'Toggles spellcheck for the default editor'", 
+                disabled='self.state.selectedEditor', 
+                label="'Spellcheck'", 
+                subtitle=`
+                  self.state.selectedEditor 
+                    ? 'Not available with editor extensions' 
+                    : (self.state.isDesktop ? 'May degrade editor performance' : null)
+                  `)
+              menu-row(
+                action="self.selectedMenuItem(true); self.toggleKey(self.prefKeyMarginResizers)", 
+                circle="self.state.marginResizersEnabled ? 'success' : 'neutral'", 
+                desc="'Allows for editor left and right margins to be resized'", 
+                faded='!self.state.marginResizersEnabled', 
+                label="'Margin Resizers'"
+                )
+        .sk-app-bar-item(
+          click-outside=`self.setMenuState('showEditorMenu', false)`
+          is-open='self.state.showEditorMenu', 
+          ng-class="{'selected' : self.state.showEditorMenu}", 
+          ng-click="self.toggleMenu('showEditorMenu')"
+          )
           .sk-label Editor
-          editor-menu(callback='ctrl.editorMenuOnSelect', current-item='ctrl.note', ng-if='ctrl.showEditorMenu', selected-editor='ctrl.selectedEditor')
-        .sk-app-bar-item(click-outside='ctrl.showExtensions = false;', is-open='ctrl.showExtensions', ng-class="{'selected' : ctrl.showExtensions}", ng-click="ctrl.toggleMenu('showExtensions')")
+          editor-menu(
+            callback='self.editorMenuOnSelect', 
+            current-item='self.state.note', 
+            ng-if='self.state.showEditorMenu', 
+            selected-editor='self.state.selectedEditor'
+            )
+        .sk-app-bar-item(
+          click-outside=`self.setMenuState('showExtensions', false)`, 
+          is-open='self.state.showExtensions', 
+          ng-class="{'selected' : self.state.showExtensions}", 
+          ng-click="self.toggleMenu('showExtensions')"
+          )
           .sk-label Actions
-          actions-menu(item='ctrl.note', ng-if='ctrl.showExtensions')
-        .sk-app-bar-item(click-outside='ctrl.showSessionHistory = false;', is-open='ctrl.showSessionHistory', ng-click="ctrl.toggleMenu('showSessionHistory')")
+          actions-menu(
+            item='self.state.note', 
+            ng-if='self.state.showExtensions'
+            )
+        .sk-app-bar-item(
+          click-outside=`self.setMenuState('showSessionHistory', false)`, 
+          is-open='self.state.showSessionHistory', 
+          ng-click="self.toggleMenu('showSessionHistory')"
+          )
           .sk-label Session History
-          session-history-menu(item='ctrl.note', ng-if='ctrl.showSessionHistory')
-  #editor-content.editor-content(ng-if='ctrl.noteReady && !ctrl.note.errorDecrypting')
-    panel-resizer.left(control='ctrl.leftResizeControl', hoverable='true', min-width='300', ng-if='ctrl.marginResizersEnabled', on-resize-finish='ctrl.onPanelResizeFinish', panel-id="'editor-content'", property="'left'")
-    component-view.component-view(component='ctrl.selectedEditor', ng-if='ctrl.selectedEditor', on-load='ctrl.onEditorLoad')
-    textarea#note-text-editor.editable(dir='auto', ng-attr-spellcheck='{{ctrl.spellcheck}}', ng-change='ctrl.contentChanged()', ng-click='ctrl.clickedTextArea()', ng-focus='ctrl.onContentFocus()', ng-if='!ctrl.selectedEditor', ng-model='ctrl.note.text', ng-model-options='{ debounce: ctrl.EditorNgDebounce}', ng-readonly='ctrl.note.locked', ng-trim='false')
-      | {{ctrl.onSystemEditorLoad()}}
-    panel-resizer(control='ctrl.rightResizeControl', hoverable='true', min-width='300', ng-if='ctrl.marginResizersEnabled', on-resize-finish='ctrl.onPanelResizeFinish', panel-id="'editor-content'", property="'right'")
-  .section(ng-show='ctrl.note.errorDecrypting')
+          session-history-menu(
+            item='self.state.note', 
+            ng-if='self.state.showSessionHistory'
+            )
+  #editor-content.editor-content(
+    ng-if='self.state.noteReady && !self.state.note.errorDecrypting'
+    )
+    panel-resizer.left(
+      control='self.leftResizeControl', 
+      hoverable='true', 
+      min-width='300', 
+      ng-if='self.state.marginResizersEnabled', 
+      on-resize-finish='self.onPanelResizeFinish', 
+      panel-id="'editor-content'", 
+      property="'left'"
+      )
+    component-view.component-view(
+      component='self.state.selectedEditor', 
+      ng-if='self.state.selectedEditor', 
+      on-load='self.onEditorLoad'
+      )
+    textarea#note-text-editor.editable(
+      dir='auto', 
+      ng-attr-spellcheck='{{self.state.spellcheck}}', 
+      ng-change='self.contentChanged()', 
+      ng-click='self.clickedTextArea()', 
+      ng-focus='self.onContentFocus()',
+      ng-if='!self.state.selectedEditor', 
+      ng-model='self.state.note.text', 
+      ng-model-options='{ debounce: self.state.editorDebounce}', 
+      ng-readonly='self.state.note.locked', 
+      ng-trim='false'
+      )
+      | {{self.onSystemEditorLoad()}}
+    panel-resizer(
+      control='self.rightResizeControl', 
+      hoverable='true', min-width='300', 
+      ng-if='self.state.marginResizersEnabled', 
+      on-resize-finish='self.onPanelResizeFinish', 
+      panel-id="'editor-content'", 
+      property="'right'"
+      )
+  .section(ng-show='self.state.note.errorDecrypting')
     p.medium-padding(style='padding-top: 0 !important;')
-      | There was an error decrypting this item. Ensure you are running the latest version of this app, then sign out and sign back in to try again.
-  #editor-pane-component-stack(ng-show='ctrl.note')
-    #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='ctrl.componentStack.length')
+      | There was an error decrypting this item. Ensure you are running the 
+      | latest version of this app, then sign out and sign back in to try again.
+  #editor-pane-component-stack(ng-show='self.state.note')
+    #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.componentStack.length')
       .left
-        .sk-app-bar-item(ng-click='ctrl.toggleStackComponentForCurrentItem(component)', ng-repeat='component in ctrl.componentStack')
+        .sk-app-bar-item(
+          ng-click='self.toggleStackComponentForCurrentItem(component)', 
+          ng-repeat='component in self.componentStack'
+          )
           .sk-app-bar-item-column
-            .sk-circle.small(ng-class="{'info' : !component.hidden && component.active, 'neutral' : component.hidden  || !component.active}")
+            .sk-circle.small(
+              ng-class="{'info' : !component.hidden && component.active, 'neutral' : component.hidden  || !component.active}"
+              )
           .sk-app-bar-item-column
             .sk-label {{component.name}}
     .sn-component
-      component-view.component-view.component-stack-item(component='component', manual-dealloc='true', ng-if='component.active', ng-repeat='component in ctrl.componentStack', ng-show='!component.hidden')
+      component-view.component-view.component-stack-item(
+        component='component', 
+        manual-dealloc='true', 
+        ng-if='component.active', 
+        ng-repeat='component in self.componentStack', 
+        ng-show='!component.hidden'
+        )