Added abstract category class to trait_manager

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "Launch Edge against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/src/trait_managerindex.ts",
+      "sourceMapPathOverrides": {
+        "meteor://💻app/*": "${workspaceFolder}/*",
+        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
+        "webpack://?:*/*": "${workspaceFolder}/*"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "grammarly.selectors": [
+    {
+      "language": "markdown",
+      "scheme": "file",
+      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
+    },
+    {
+      "language": "markdown",
+      "scheme": "file",
+      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
+    },
+    {
+      "language": "markdown",
+      "scheme": "file",
+      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
+    },
+    {
+      "language": "markdown",
+      "scheme": "file",
+      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
+    }
+  ]
+}

src/block_manager/model/Categories.ts → src/abstract/ModuleCategories.ts

@@ -1,11 +1,11 @@
 import { isArray, isString } from 'underscore';
-import { AddOptions, Collection } from '../../common';
-import { normalizeKey } from '../../utils/mixins';
-import Category, { BlockCategoryProperties } from './Category';
+import { AddOptions, Collection } from '../common';
+import { normalizeKey } from '../utils/mixins';
+import Category, { CategoryProperties } from './ModuleCategory';
 
 export default class Categories extends Collection<Category> {
   /** @ts-ignore */
-  add(model: (BlockCategoryProperties | Category)[] | BlockCategoryProperties | Category, opts?: AddOptions) {
+  add(model: (CategoryProperties | Category)[] | CategoryProperties | Category, opts?: AddOptions) {
     const models = isArray(model) ? model : [model];
     models.forEach(md => md && (md.id = normalizeKey(`${md.id}`)));
     return super.add(model, opts);

src/block_manager/model/Category.ts → src/abstract/ModuleCategory.ts

@@ -1,7 +1,7 @@
-import { Model } from '../../common';
-import CategoryView from '../view/CategoryView';
+import { Model } from '../common';
+import CategoryView from './ModuleCategoryView';
 
-export interface BlockCategoryProperties {
+export interface CategoryProperties {
   /**
    * Category id.
    */
@@ -26,14 +26,14 @@ export interface BlockCategoryProperties {
   attributes?: Record<string, any>;
 }
 
-export default class Category extends Model<BlockCategoryProperties> {
+export default class Category extends Model<CategoryProperties> {
   view?: CategoryView;
 
   defaults() {
     return {
       id: '',
       label: '',
-      open: true,
+      open: false,
       attributes: {},
     };
   }

src/block_manager/view/CategoryView.ts → src/abstract/ModuleCategoryView.ts

@@ -1,11 +1,12 @@
-import { View } from '../../common';
-import EditorModel from '../../editor/model/Editor';
-import html from '../../utils/html';
-import Category from '../model/Category';
+import { View } from '../common';
+import EditorModel from '../editor/model/Editor';
+import html from '../utils/html';
+import Category from './ModuleCategory';
 
 export interface CategoryViewConfig {
   em: EditorModel;
   pStylePrefix?: string;
+  stylePrefix?: string;
 }
 
 export default class CategoryView extends View<Category> {
@@ -17,21 +18,22 @@ export default class CategoryView extends View<Category> {
   iconClass: string;
   activeClass: string;
   iconEl?: HTMLElement;
-  blocksEl?: HTMLElement;
+  typeEl?: HTMLElement;
+  catName: string;
 
   events() {
     return {
       'click [data-title]': 'toggle',
     };
   }
 
-  template({ pfx, label }: { pfx: string; label: string }) {
+  template({ pfx, label, catName }: { pfx: string; label: string; catName: string }) {
     return html`
       <div class="${pfx}title" data-title>
         <i class="${pfx}caret-icon"></i>
         ${label}
       </div>
-      <div class="${pfx}blocks-c"></div>
+      <div class="${pfx}${catName}s-c"></div>
     `;
   }
 
@@ -40,17 +42,18 @@ export default class CategoryView extends View<Category> {
     return this.model.get('attributes') || {};
   }
 
-  constructor(o: any, config: CategoryViewConfig) {
+  constructor(o: any, config: CategoryViewConfig, catName: string) {
     super(o);
     this.config = config;
     const pfx = config.pStylePrefix || '';
     this.em = config.em;
+    this.catName = catName;
     this.pfx = pfx;
     this.caretR = 'fa fa-caret-right';
     this.caretD = 'fa fa-caret-down';
     this.iconClass = `${pfx}caret-icon`;
     this.activeClass = `${pfx}open`;
-    this.className = `${pfx}block-category`;
+    this.className = `${pfx}${catName}-category`;
     this.listenTo(this.model, 'change:open', this.updateVisibility);
     this.model.view = this;
   }
@@ -63,13 +66,13 @@ export default class CategoryView extends View<Category> {
   open() {
     this.$el.addClass(this.activeClass);
     this.getIconEl()!.className = `${this.iconClass} ${this.caretD}`;
-    this.getBlocksEl()!.style.display = '';
+    this.getTypeEl()!.style.display = '';
   }
 
   close() {
     this.$el.removeClass(this.activeClass);
     this.getIconEl()!.className = `${this.iconClass} ${this.caretR}`;
-    this.getBlocksEl()!.style.display = 'none';
+    this.getTypeEl()!.style.display = 'none';
   }
 
   toggle() {
@@ -85,22 +88,22 @@ export default class CategoryView extends View<Category> {
     return this.iconEl;
   }
 
-  getBlocksEl() {
-    if (!this.blocksEl) {
-      this.blocksEl = this.el.querySelector(`.${this.pfx}blocks-c`)!;
+  getTypeEl() {
+    if (!this.typeEl) {
+      this.typeEl = this.el.querySelector(`.${this.pfx}${this.catName}s-c`)!;
     }
 
-    return this.blocksEl;
+    return this.typeEl;
   }
 
   append(el: HTMLElement) {
-    this.getBlocksEl().appendChild(el);
+    this.getTypeEl().appendChild(el);
   }
 
   render() {
-    const { em, el, $el, model, pfx } = this;
-    const label = em.t(`blockManager.categories.${model.id}`) || model.get('label');
-    el.innerHTML = this.template({ pfx, label });
+    const { em, el, $el, model, pfx, catName } = this;
+    const label = em.t(`${catName}Manager.categories.${model.id}`) || model.get('label');
+    el.innerHTML = this.template({ pfx, label, catName });
     $el.addClass(this.className!);
     $el.css({ order: model.get('order')! });
     this.updateVisibility();

src/block_manager/index.ts

@@ -34,8 +34,8 @@ import EditorModel from '../editor/model/Editor';
 import defaults, { BlockManagerConfig } from './config/config';
 import Block, { BlockProperties } from './model/Block';
 import Blocks from './model/Blocks';
-import Categories from './model/Categories';
-import Category from './model/Category';
+import Categories from '../abstract/ModuleCategories';
+import Category from '../abstract/ModuleCategory';
 import { BlocksEvents } from './types';
 import BlocksView from './view/BlocksView';
 

src/block_manager/model/Block.ts

@@ -1,7 +1,7 @@
 import { Model } from '../../common';
 import { isFunction } from 'underscore';
 import Editor from '../../editor';
-import { BlockCategoryProperties } from './Category';
+import { CategoryProperties } from '../../abstract/ModuleCategory';
 import { ComponentDefinition } from '../../dom_components/model/types';
 
 /** @private */
@@ -23,7 +23,7 @@ export interface BlockProperties {
    * Block category, eg. `Basic blocks`
    * @default ''
    */
-  category?: string | BlockCategoryProperties;
+  category?: string | CategoryProperties;
   /**
    * If true, triggers the `active` event on the dropped component.
    * @default false

src/block_manager/view/BlocksView.ts

@@ -4,9 +4,9 @@ import { View } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
 import Block from '../model/Block';
-import Categories from '../model/Categories';
+import Categories from '../../abstract/ModuleCategories';
 import BlockView from './BlockView';
-import CategoryView from './CategoryView';
+import CategoryView from '../../abstract/ModuleCategoryView';
 
 export interface BlocksViewConfig {
   em: EditorModel;
@@ -152,7 +152,7 @@ export default class BlocksView extends View {
       model.set('category', catModel, { silent: true });
 
       if (!catView && categories) {
-        catView = new CategoryView({ model: catModel }, config).render();
+        catView = new CategoryView({ model: catModel }, config, 'block').render();
         renderedCategories.set(catId, catView);
         categories.appendChild(catView.el);
       }

src/index.ts

@@ -97,8 +97,8 @@ export type { default as Asset } from './asset_manager/model/Asset';
 export type { default as Assets } from './asset_manager/model/Assets';
 export type { default as Block } from './block_manager/model/Block';
 export type { default as Blocks } from './block_manager/model/Blocks';
-export type { default as Categories } from './block_manager/model/Categories';
-export type { default as Category } from './block_manager/model/Category';
+export type { default as Categories } from './abstract/ModuleCategories';
+export type { default as Category } from './abstract/ModuleCategory';
 export type { default as Canvas } from './canvas/model/Canvas';
 export type { default as CanvasSpot } from './canvas/model/CanvasSpot';
 export type { default as CanvasSpots } from './canvas/model/CanvasSpots';

src/styles/scss/_gjs_traits.scss

@@ -1,3 +1,31 @@
+.#{$app-prefix}traits-c {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.#{$app-prefix}trait-categories {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$app-prefix}trait-category {
+  width: 100%;
+
+  &.#{$app-prefix}open {
+    @extend .#{$app-prefix}category-open;
+  }
+
+  .#{$app-prefix}title {
+    @extend .#{$app-prefix}category-title;
+  }
+
+  .#{$app-prefix}caret-icon {
+    margin-right: 5px;
+  }
+}
+
+
 .#{$app-prefix} {
   &traits-label {
     border-bottom: 1px solid var(--gjs-main-dark-color);
@@ -45,4 +73,4 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-}
+}

src/trait_manager/index.ts

@@ -12,6 +12,9 @@ import TraitButtonView from './view/TraitButtonView';
 import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
 import Trait from './model/Trait';
+import Traits from './model/Traits';
+import Category from '../abstract/ModuleCategory';
+import Categories from '../abstract/ModuleCategories';
 
 export const evAll = 'trait';
 export const evPfx = `${evAll}:`;
@@ -43,7 +46,13 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
   types: { [id: string]: { new (o: any): TraitView } };
   model: Model;
   __ctn?: any;
+  traits: Traits;
+  traitsVisible: Traits;
+  categories: Categories;
+
   TraitsView = TraitsView;
+  Category = Category;
+  Categories = Categories;
 
   events = {
     all: evAll,
@@ -66,6 +75,13 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
     const model = new Model();
     this.model = model;
     this.types = typesDef;
+    const ppfx = this.config.pStylePrefix;
+    ppfx && (this.config.stylePrefix = `${ppfx}${this.config.stylePrefix}`);
+
+    // Global traits collection
+    this.traits = new Traits([], { em });
+    this.traitsVisible = new Traits(this.traits.models, { em });
+    this.categories = new Categories();
 
     const upAll = debounce(() => this.__upSel(), 0);
     model.listenTo(em, 'component:toggled', upAll);
@@ -149,6 +165,7 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
 
   render() {
     let { view, em } = this;
+    const { categories } = this;
     const config = this.getConfig();
     const el = view && view.el;
     view = new TraitsView(
@@ -157,6 +174,7 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
         collection: [],
         editor: em,
         config,
+        categories,
       },
       this.getTypes()
     );