Refactor ItemView to be more independent

ryandeba · Feb 1, 2018 · c8c3781 · c8c3781
1 parent 1f7918f
commit c8c3781
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 152 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js
@@ -17,36 +17,36 @@ module.exports = require('backbone').View.extend({
     const ppfx = this.ppfx;
     const hidable = this.config.hidable;
     const count = this.countChildren(model);
-    const addClass = !count ? `${pfx}no-chld` : '';
+    const addClass = !count ? this.clsNoChild : '';
+    const clsTitle = `${this.clsTitle} ${addClass}`;
+    const clsTitleC = `${this.clsTitleC} ${ppfx}one-bg`;
+    const clsCaret = `${this.clsCaret} fa fa-chevron-right`;
+    const clsInput = `${this.inputNameCls} ${ppfx}no-app`;
     const level = this.level + 1;
+    const gut = `${30 + level * 10}px`;
     return `
       ${
         hidable
-          ? `<i id="${pfx}btn-eye" class="${pfx}btn fa fa-eye ${
+          ? `<i class="${pfx}layer-vis fa fa-eye ${
               this.isVisible() ? '' : 'fa-eye-slash'
             }" data-toggle-visible></i>`
           : ''
       }
 
-      <div class="${pfx}title-c ${ppfx}one-bg">
-        <div class="${pfx}title ${addClass}" style="padding-left: ${30 +
-      level * 10}px" data-toggle-select>
-          <div class="${pfx}title-inn">
-            <i id="${pfx}caret" class="fa fa-chevron-right ${
-      this.caretCls
-    }" data-toggle-open></i>
+      <div class="${clsTitleC}">
+        <div class="${clsTitle}" style="padding-left: ${gut}" data-toggle-select>
+          <div class="${pfx}layer-title-inn">
+            <i class="${clsCaret}" data-toggle-open></i>
             ${model.getIcon()}
-            <input class="${ppfx}no-app ${
-      this.inputNameCls
-    }" value="${model.getName()}" readonly>
+            <input class="${clsInput}" value="${model.getName()}" readonly>
           </div>
         </div>
       </div>
-      <div id="${pfx}counter">${count ? count : ''}</div>
-      <div id="${pfx}move" data-toggle-move>
+      <div class="${this.clsCount}">${count || ''}</div>
+      <div class="${this.clsMove}" data-toggle-move>
         <i class="fa fa-arrows"></i>
       </div>
-      <div class="${pfx}children"></div>
+      <div class="${this.clsChildren}"></div>
     `;
   },
 
@@ -68,18 +68,22 @@ module.exports = require('backbone').View.extend({
     this.listenTo(model, 'change:status', this.updateStatus);
     this.listenTo(model, 'change:open', this.updateOpening);
     this.listenTo(model, 'change:style:display', this.updateVisibility);
-    this.className = `${pfx}item no-select`;
-    this.editBtnCls = `${pfx}nav-item-edit`;
-    this.inputNameCls = `${ppfx}nav-comp-name`;
-    this.caretCls = `${ppfx}nav-item-caret`;
-    this.titleCls = `${pfx}title`;
+    this.className = `${pfx}layer no-select ${ppfx}two-color`;
+    this.inputNameCls = `${ppfx}layer-name`;
+    this.clsTitleC = `${pfx}layer-title-c`;
+    this.clsTitle = `${pfx}layer-title`;
+    this.clsCaret = `${pfx}layer-caret`;
+    this.clsCount = `${pfx}layer-count`;
+    this.clsMove = `${pfx}layer-move`;
+    this.clsChildren = `${pfx}layer-children`;
+    this.clsNoChild = `${pfx}layer-no-chld`;
     this.$el.data('model', model);
     this.$el.data('collection', components);
   },
 
   getVisibilityEl() {
     if (!this.eyeEl) {
-      this.eyeEl = this.$el.children(`#${this.pfx}btn-eye`);
+      this.eyeEl = this.$el.children(`.${this.pfx}layer-vis`);
     }
 
     return this.eyeEl;
@@ -88,7 +92,7 @@ module.exports = require('backbone').View.extend({
   updateVisibility() {
     const pfx = this.pfx;
     const model = this.model;
-    const hClass = `${pfx}hide`;
+    const hClass = `${pfx}layer-hidden`;
     const hideIcon = 'fa-eye-slash';
     const hidden = model.getStyle().display == 'none';
     const method = hidden ? 'addClass' : 'removeClass';
@@ -143,7 +147,7 @@ module.exports = require('backbone').View.extend({
    */
   getInputName() {
     if (!this.inputName) {
-      this.inputName = this.el.querySelector('.' + this.inputNameCls);
+      this.inputName = this.el.querySelector(`.${this.inputNameCls}`);
     }
     return this.inputName;
   },
@@ -252,19 +256,21 @@ module.exports = require('backbone').View.extend({
     const model = this.model;
     const c = this.countChildren(model);
     const pfx = this.pfx;
-    const noChildCls = `${pfx}no-chld`;
-    const title = this.$el.children(`.${pfx}title-c`).children(`.${pfx}title`);
-    //tC = `> .${pfx}title-c > .${pfx}title`;
-    if (!this.$counter) {
-      this.$counter = this.$el.children(`#${pfx}counter`);
+    const noChildCls = this.clsNoChild;
+    const title = this.$el
+      .children(`.${this.clsTitleC}`)
+      .children(`.${this.clsTitle}`);
+
+    if (!this.cnt) {
+      this.cnt = this.$el.children(`.${this.clsCount}`);
     }
 
     if (c) {
       title.removeClass(noChildCls);
-      this.$counter.html(c);
+      this.cnt.html(c);
     } else {
       title.addClass(noChildCls);
-      this.$counter.empty();
+      this.cnt.empty();
       model.set('open', 0);
     }
   },
@@ -289,7 +295,9 @@ module.exports = require('backbone').View.extend({
   getCaret() {
     if (!this.caret) {
       const pfx = this.pfx;
-      this.caret = this.$el.children(`.${pfx}title-c`).find(`#${pfx}caret`);
+      this.caret = this.$el
+        .children(`.${this.clsTitleC}`)
+        .find(`.${this.clsCaret}`);
     }
 
     return this.caret;
@@ -315,10 +323,10 @@ module.exports = require('backbone').View.extend({
       parent: model,
       level
     }).render().$el;
-    el.find(`.${pfx}children`).append(children);
+    el.find(`.${this.clsChildren}`).append(children);
 
     if (!model.get('draggable') || !this.config.sortable) {
-      el.children(`#${pfx}move`).remove();
+      el.children(`.${this.clsMove}`).remove();
     }
 
     !vis && (this.className += ` ${pfx}hide`);