improve template

plantain-00 · Feb 24, 2017 · f9aee67 · f9aee67
1 parent 81e96fd
commit f9aee67
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -4,11 +4,12 @@
   "description": "A reactjs, angular2 and vuejs tree component.",
   "main": "index.js",
   "scripts": {
-    "build": "tsc -p src && tsc -p demo && sass src/tree.scss > dist/tree.css && cleancss -o dist/tree.min.css dist/tree.css && webpack && npm run rev",
+    "build": "tsc -p src && tsc -p demo && sass src/tree.scss > dist/tree.css && cleancss -o dist/tree.min.css dist/tree.css && npm run minifier-template && webpack && npm run rev",
     "lint": "tslint \"src/*.ts\" && stylelint \"src/*.scss\" --syntax scss",
     "rev": "npm run clean-rev && rev-static",
     "clean-rev": "rm -f demo/react.bundle-*.js demo/vue.bundle-*.js demo/angular.bundle-*.js",
-    "image": "image2base64-cli images/*.png images/*.gif --scss src/variables.scss"
+    "image": "image2base64-cli images/*.png images/*.gif --scss src/variables.scss",
+    "minifier-template": "html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/vue-node.template.html -o dist/vue-node.html && html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/vue-tree.template.html -o dist/vue-tree.html && html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/angular-node.template.html -o dist/angular-node.html && html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/angular-tree.template.html -o dist/angular-tree.html"
   },
   "repository": {
     "type": "git",
@@ -27,11 +28,13 @@
     "@angular/forms": "2.4.6",
     "@angular/platform-browser": "2.4.6",
     "@angular/platform-browser-dynamic": "2.4.6",
+    "@types/node": "7.0.5",
     "@types/react": "15.0.6",
     "@types/react-dom": "0.14.22",
     "clean-css-cli": "4.0.7",
     "core-js": "2.4.1",
     "image2base64-cli": "1.0.3",
+    "raw-loader": "0.5.1",
     "react": "15.4.2",
     "react-dom": "15.4.2",
     "rev-static": "1.3.1",

diff --git a/src/angular-node.template.html b/src/angular-node.template.html
@@ -0,0 +1,26 @@
+<li role="treeitem" [class]="nodeClassName">
+    <i class="tree-icon tree-ocl" role="presentation" (click)="ontoggle()"></i>
+    <a [class]="anchorClassName" href="javascript:void(0)"
+        [draggable]="draggable"
+        (click)="onchange()"
+        (dblclick)="ontoggle()"
+        (mouseenter)="hover(true)"
+        (mouseleave)="hover(false)"
+        [attr.data-path]="pathString">
+        <i *ngIf="checkbox" [class]="checkboxClassName" role="presentation"></i>
+        <i *ngIf="data.icon !== false" [class]="iconClassName" role="presentation"></i>
+        {{data.text}}
+        <div *ngIf="hasMarker" [class]="markerClassName">&#160;</div>
+    </a>
+    <ul *ngIf="data.children" role="group" class="tree-children">
+        <node *ngFor="let child of data.children; let i = index"
+            [data]="child"
+            [last]="i === data.children.length - 1"
+            [checkbox]="checkbox"
+            [path]="geChildPath(i)"
+            [draggable]="draggable"
+            (toggle)="ontoggle($event)"
+            (change)="onchange($event)">
+        </node>
+    </ul>
+</li>
diff --git a/src/angular-tree.template.html b/src/angular-tree.template.html
@@ -0,0 +1,20 @@
+<div [class]="rootClassName" role="tree">
+    <ul class="tree-container-ul tree-children" role="group"
+        (drag)="ondrag($event)"
+        (dragstart)="ondragstart($event)"
+        (dragend)="ondragend($event)"
+        (dragover)="ondragover($event)"
+        (dragenter)="ondragenter($event)"
+        (dragleave)="ondragleave($event)"
+        (drop)="ondrop($event)">
+        <node *ngFor="let child of data; let i = index"
+            [data]="child"
+            [last]="i === data.length - 1"
+            [checkbox]="checkbox"
+            [path]="[i]"
+            [draggable]="draggable"
+            (toggle)="ontoggle($event)"
+            (change)="onchange($event)">
+        </node>
+    </ul>
+</div>
diff --git a/src/angular.ts b/src/angular.ts
@@ -3,22 +3,7 @@ import * as common from "./common";
 
 @Component({
     selector: "node",
-    template: `
-    <li role="treeitem" [class]="nodeClassName">
-        <i class="tree-icon tree-ocl" role="presentation" (click)="ontoggle()"></i><a [class]="anchorClassName" href="javascript:void(0)" [draggable]="draggable" (click)="onchange()" (dblclick)="ontoggle()" (mouseenter)="hover(true)" (mouseleave)="hover(false)" [attr.data-path]="pathString"><i *ngIf="checkbox" [class]="checkboxClassName" role="presentation"></i><i *ngIf="data.icon !== false" [class]="iconClassName" role="presentation"></i>{{data.text}}<div *ngIf="hasMarker" [class]="markerClassName">&#160;</div></a>
-        <ul *ngIf="data.children" role="group" class="tree-children">
-            <node *ngFor="let child of data.children; let i = index"
-                [data]="child"
-                [last]="i === data.children.length - 1"
-                [checkbox]="checkbox"
-                [path]="geChildPath(i)"
-                [draggable]="draggable"
-                (toggle)="ontoggle($event)"
-                (change)="onchange($event)">
-            </node>
-        </ul>
-    </li>
-    `,
+    template: require("raw-loader!./angular-node.html"),
 })
 export class NodeComponent {
     @Input()
@@ -101,20 +86,7 @@ export class NodeComponent {
 
 @Component({
     selector: "tree",
-    template: `
-    <div [class]="rootClassName" role="tree">
-        <ul class="tree-container-ul tree-children" role="group" (drag)="ondrag($event)" (dragstart)="ondragstart($event)" (dragend)="ondragend($event)" (dragover)="ondragover($event)" (dragenter)="ondragenter($event)" (dragleave)="ondragleave($event)" (drop)="ondrop($event)">
-            <node *ngFor="let child of data; let i = index"
-                [data]="child"
-                [last]="i === data.length - 1"
-                [checkbox]="checkbox"
-                [path]="[i]"
-                [draggable]="draggable"
-                (toggle)="ontoggle($event)"
-                (change)="onchange($event)"></node>
-        </ul>
-    </div>
-    `,
+    template: require("raw-loader!./angular-tree.html"),
 })
 export class TreeComponent {
     @Input()

diff --git a/src/common.ts b/src/common.ts
@@ -24,7 +24,7 @@ import "tslib";
 
 export class DoubleClick {
     clicked = false;
-    timer: null | number = null;
+    timer: null | NodeJS.Timer = null;
 
     constructor(private timeout = 300) { }
 

diff --git a/src/react.tsx b/src/react.tsx
@@ -39,7 +39,20 @@ class Node extends React.PureComponent<{
         const markerElement = this.hasMarker ? <div className={this.markerClassName}>&#160;</div> : null;
         return (
             <li role="treeitem" className={this.nodeClassName}>
-                <i className="tree-icon tree-ocl" role="presentation" onClick={() => this.ontoggle()}></i><a className={this.anchorClassName} href="javascript:void(0)" draggable={this.props.draggable} onClick={() => this.onchange()} onDoubleClick={() => this.ontoggle()} onMouseEnter={() => this.hover(true)} onMouseLeave={() => this.hover(false)} data-path={this.pathString}>{checkboxElement}{iconElement}{this.props.data.text}{markerElement}</a>
+                <i className="tree-icon tree-ocl" role="presentation" onClick={() => this.ontoggle()}></i>
+                <a className={this.anchorClassName}
+                    href="javascript:void(0)"
+                    draggable={this.props.draggable}
+                    onClick={() => this.onchange()}
+                    onDoubleClick={() => this.ontoggle()}
+                    onMouseEnter={() => this.hover(true)}
+                    onMouseLeave={() => this.hover(false)}
+                    data-path={this.pathString}>
+                    {checkboxElement}
+                    {iconElement}
+                    {this.props.data.text}
+                    {markerElement}
+                </a>
                 {childrenElement}
             </li>
         );
@@ -128,7 +141,15 @@ export class Tree extends React.PureComponent<{
         ));
         return (
             <div className={this.rootClassName} role="tree">
-                <ul className="tree-container-ul tree-children" role="group" onDrag={eventData => this.ondrag(eventData)} onDragStart={eventData => this.ondragstart(eventData)} onDragEnd={eventData => this.ondragend(eventData)} onDragOver={eventData => this.ondragover(eventData)} onDragEnter={(eventData) => this.ondragenter(eventData)} onDragLeave={eventData => this.ondragleave(eventData)} onDrop={eventData => this.ondrop(eventData)}>
+                <ul className="tree-container-ul tree-children"
+                    role="group"
+                    onDrag={eventData => this.ondrag(eventData)}
+                    onDragStart={eventData => this.ondragstart(eventData)}
+                    onDragEnd={eventData => this.ondragend(eventData)}
+                    onDragOver={eventData => this.ondragover(eventData)}
+                    onDragEnter={(eventData) => this.ondragenter(eventData)}
+                    onDragLeave={eventData => this.ondragleave(eventData)}
+                    onDrop={eventData => this.ondrop(eventData)}>
                     {childrenElement}
                 </ul>
             </div >

diff --git a/src/vue-node.template.html b/src/vue-node.template.html
@@ -0,0 +1,26 @@
+<li role="treeitem" :class="nodeClassName">
+    <i class="tree-icon tree-ocl" role="presentation" @click="ontoggle()"></i>
+    <a :class="anchorClassName" href="javascript:void(0)"
+        :draggable="draggable"
+        @click="onchange()"
+        @dblclick="ontoggle()"
+        @mouseenter="hover(true)"
+        @mouseleave="hover(false)"
+        :data-path="pathString">
+        <i v-if="checkbox" :class="checkboxClassName" role="presentation"></i>
+        <i v-if="data.icon !== false" :class="iconClassName" role="presentation"></i>
+        {{data.text}}
+        <div v-if="hasMarker" :class="markerClassName">&#160;</div>
+    </a>
+    <ul v-if="data.children" role="group" class="tree-children">
+        <node v-for="(child, i) in data.children"
+            :data="child"
+            :last="i === data.children.length - 1"
+            :checkbox="checkbox"
+            :path="geChildPath(i)"
+            :draggable="draggable"
+            @toggle="ontoggle(arguments[0])"
+            @change="onchange(arguments[0])">
+        </node>
+    </ul>
+</li>
diff --git a/src/vue-tree.template.html b/src/vue-tree.template.html
@@ -0,0 +1,20 @@
+<div :class="rootClassName" role="tree">
+    <ul class="tree-container-ul tree-children" role="group"
+        @drag="ondrag($event)"
+        @dragstart="ondragstart($event)"
+        @dragend="ondragend($event)"
+        @dragover="ondragover($event)"
+        @dragenter="ondragenter($event)"
+        @dragleave="ondragleave($event)"
+        @drop="ondrop($event)">
+        <node v-for="(child, i) in data"
+            :data="child"
+            :last="i === data.length - 1"
+            :checkbox="checkbox"
+            :path="[i]"
+            :draggable="draggable"
+            @toggle="ontoggle(arguments[0])"
+            @change="onchange(arguments[0])">
+        </node>
+    </ul>
+</div>
diff --git a/src/vue.ts b/src/vue.ts
@@ -3,22 +3,7 @@ import Component from "vue-class-component";
 import * as common from "./common";
 
 @Component({
-    template: `
-    <li role="treeitem" :class="nodeClassName">
-        <i class="tree-icon tree-ocl" role="presentation" @click="ontoggle()"></i><a :class="anchorClassName" href="javascript:void(0)" :draggable="draggable" @click="onchange()" @dblclick="ontoggle()" @mouseenter="hover(true)" @mouseleave="hover(false)" :data-path="pathString"><i v-if="checkbox" :class="checkboxClassName" role="presentation"></i><i v-if="data.icon !== false" :class="iconClassName" role="presentation"></i>{{data.text}}<div v-if="hasMarker" :class="markerClassName">&#160;</div></a>
-        <ul v-if="data.children" role="group" class="tree-children">
-            <node v-for="(child, i) in data.children"
-                :data="child"
-                :last="i === data.children.length - 1"
-                :checkbox="checkbox"
-                :path="geChildPath(i)"
-                :draggable="draggable"
-                @toggle="ontoggle(arguments[0])"
-                @change="onchange(arguments[0])">
-            </node>
-        </ul>
-    </li>
-    `,
+    template: require("raw-loader!./vue-node.html"),
     props: ["data", "last", "checkbox", "path", "draggable"],
 })
 class Node extends Vue {
@@ -93,20 +78,7 @@ class Node extends Vue {
 Vue.component("node", Node);
 
 @Component({
-    template: `
-    <div :class="rootClassName" role="tree">
-        <ul class="tree-container-ul tree-children" role="group" @drag="ondrag($event)" @dragstart="ondragstart($event)" @dragend="ondragend($event)" @dragover="ondragover($event)" @dragenter="ondragenter($event)" @dragleave="ondragleave($event)" @drop="ondrop($event)">
-            <node v-for="(child, i) in data"
-                :data="child"
-                :last="i === data.length - 1"
-                :checkbox="checkbox"
-                :path="[i]"
-                :draggable="draggable"
-                @toggle="ontoggle(arguments[0])"
-                @change="onchange(arguments[0])"></node>
-        </ul>
-    </div>
-    `,
+    template: require("raw-loader!./vue-tree.html"),
     props: ["data", "checkbox", "draggable"],
 })
 export class Tree extends Vue {