refactor: improve aside & sidebar

Author: mrholek

.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

build/change-version.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+
+'use strict'
+
+/*!
+ * Script to update version number references in the project.
+ * Copyright 2017 The Bootstrap Authors
+ * Copyright 2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/* global Set */
+
+const fs = require('fs')
+const path = require('path')
+const sh = require('shelljs')
+sh.config.fatal = true
+const sed = sh.sed
+
+// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
+RegExp.quote = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
+RegExp.quoteReplacement = (string) => string.replace(/[$]/g, '$$')
+
+const DRY_RUN = false
+
+function walkAsync(directory, excludedDirectories, fileCallback, errback) {
+  if (excludedDirectories.has(path.parse(directory).base)) {
+    return
+  }
+  fs.readdir(directory, (err, names) => {
+    if (err) {
+      errback(err)
+      return
+    }
+    names.forEach((name) => {
+      const filepath = path.join(directory, name)
+      fs.lstat(filepath, (err, stats) => {
+        if (err) {
+          process.nextTick(errback, err)
+          return
+        }
+        if (stats.isSymbolicLink()) {
+          return
+        }
+        else if (stats.isDirectory()) {
+          process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback)
+        }
+        else if (stats.isFile()) {
+          process.nextTick(fileCallback, filepath)
+        }
+      })
+    })
+  })
+}
+
+function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
+  original = new RegExp(RegExp.quote(original), 'g')
+  replacement = RegExp.quoteReplacement(replacement)
+  const updateFile = !DRY_RUN ? (filepath) => {
+    if (allowedExtensions.has(path.parse(filepath).ext)) {
+      sed('-i', original, replacement, filepath)
+    }
+  } : (filepath) => {
+    if (allowedExtensions.has(path.parse(filepath).ext)) {
+      console.log(`FILE: ${filepath}`)
+    }
+    else {
+      console.log(`EXCLUDED:${filepath}`)
+    }
+  }
+  walkAsync(directory, excludedDirectories, updateFile, (err) => {
+    console.error('ERROR while traversing directory!:')
+    console.error(err)
+    process.exit(1)
+  })
+}
+
+function main(args) {
+  if (args.length !== 2) {
+    console.error('USAGE: change-version old_version new_version')
+    console.error('Got arguments:', args)
+    process.exit(1)
+  }
+  const oldVersion = args[0]
+  const newVersion = args[1]
+  const EXCLUDED_DIRS = new Set([
+    '.git',
+    'node_modules',
+    'vendor'
+  ])
+  const INCLUDED_EXTENSIONS = new Set([
+    // This extension whitelist is how we avoid modifying binary files
+    '',
+    '.css',
+    '.html',
+    '.js',
+    '.json',
+    '.md',
+    '.scss',
+    '.txt',
+    '.yml'
+  ])
+  replaceRecursively('.', EXCLUDED_DIRS, INCLUDED_EXTENSIONS, oldVersion, newVersion)
+}
+
+main(process.argv.slice(2))

dist/aside/app-aside.component.d.ts

@@ -1,11 +1,12 @@
-import { OnInit } from '@angular/core';
+import { ElementRef, OnInit } from '@angular/core';
 export declare class AppAsideComponent implements OnInit {
-    display: string;
+    private el;
+    display: any;
     fixed: boolean;
     offCanvas: boolean;
-    constructor();
+    constructor(el: ElementRef);
     ngOnInit(): void;
     isFixed(fixed: boolean): void;
     isOffCanvas(offCanvas: boolean): void;
-    displayBreakpoint(display: string): void;
+    displayBreakpoint(display: any): void;
 }

dist/aside/app-aside.component.js

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular",
-  "version": "0.0.1",
+  "version": "2.0.0-alpha.1",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/compiler": "*",

dist/aside/app-aside.component.js.map

@@ -1,7 +1,7 @@
 import { OnInit } from '@angular/core';
 export declare class AppSidebarComponent implements OnInit {
     compact: boolean;
-    display: string;
+    display: any;
     fixed: boolean;
     minimized: boolean;
     offCanvas: boolean;
@@ -13,5 +13,5 @@ export declare class AppSidebarComponent implements OnInit {
     isMinimized(minimized: boolean): void;
     isOffCanvas(offCanvas: boolean): void;
     fixedPosition(fixed: boolean): void;
-    displayBreakpoint(display: string): void;
+    displayBreakpoint(display: any): void;
 }

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/angular-dev",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-beta.0",
   "devDependencies": {
     "@angular/common": "5.2.6",
     "@angular/compiler": "^5.2.6",
@@ -9,7 +9,7 @@
     "@angular/platform-browser": "5.2.6",
     "@angular/platform-browser-dynamic": "5.2.6",
     "@angular/router": "5.2.6",
-    "@coreui/styles": "^1.0.0-alpha.9",
+    "@coreui/coreui": "^2.0.0-beta.4",
     "@types/chai": "^4.1.2",
     "@types/jasmine": "^2.8.6",
     "@types/webpack": "^3.8.8",

dist/sidebar/app-sidebar-nav.component.js

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { asideMenuCssClasses } from './../shared';
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { asideMenuCssClasses, Replace } from './../shared';
 
 @Component({
   selector: 'app-aside',
@@ -10,13 +10,14 @@ import { asideMenuCssClasses } from './../shared';
   `
 })
 export class AppAsideComponent implements OnInit {
-  @Input() display: string;
+  @Input() display: any;
   @Input() fixed: boolean;
   @Input() offCanvas: boolean;
 
-  constructor() { }
+  constructor(private el: ElementRef) {}
 
   ngOnInit() {
+    Replace(this.el);
     this.isFixed(this.fixed);
     this.displayBreakpoint(this.display);
   }
@@ -29,9 +30,11 @@ export class AppAsideComponent implements OnInit {
     if (this.offCanvas) { document.querySelector('body').classList.add('aside-menu-off-canvas'); }
   }
 
-  displayBreakpoint(display: string): void {
-    let cssClass;
-    this.display ? cssClass = `aside-menu-${this.display}-show` : cssClass = asideMenuCssClasses[0];
-    document.querySelector('body').classList.add(cssClass);
+  displayBreakpoint(display: any): void {
+    if (this.display !== false ) {
+      let cssClass;
+      this.display ? cssClass = `aside-menu-${this.display}-show` : cssClass = asideMenuCssClasses[0];
+      document.querySelector('body').classList.add(cssClass);
+    }
   }
 }

dist/sidebar/app-sidebar-nav.component.js.map

@@ -1,6 +1,9 @@
 {
   "name": "@coreui/angular",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-beta.0",
+  "dependencies": {
+    "@coreui/coreui": "^2.0.0-beta.4",
+  },
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/compiler": "*",

dist/sidebar/app-sidebar.component.d.ts

@@ -172,7 +172,8 @@ export class AppSidebarNavLinkComponent implements OnInit {
         <app-sidebar-nav-item [item]='child'></app-sidebar-nav-item>
       </ng-template>
     </ul>
-  `
+  `,
+  styles: ['.nav-dropdown-toggle { cursor: pointer; }']
 })
 export class AppSidebarNavDropdownComponent implements OnInit {
   @Input() link: any;

dist/sidebar/app-sidebar.component.js

@@ -7,7 +7,7 @@ import { sidebarCssClasses } from './../shared';
 })
 export class AppSidebarComponent implements OnInit {
   @Input() compact: boolean;
-  @Input() display: string;
+  @Input() display: any;
   @Input() fixed: boolean;
   @Input() minimized: boolean;
   @Input() offCanvas: boolean;
@@ -44,9 +44,11 @@ export class AppSidebarComponent implements OnInit {
     if (this.fixed) { document.querySelector('body').classList.add('sidebar-fixed'); }
   }
 
-  displayBreakpoint(display: string): void {
-    let cssClass;
-    this.display ? cssClass = `sidebar-${this.display}-show` : cssClass = sidebarCssClasses[0];
-    document.querySelector('body').classList.add(cssClass);
+  displayBreakpoint(display: any): void {
+    if (this.display !== false ) {
+      let cssClass;
+      this.display ? cssClass = `sidebar-${this.display}-show` : cssClass = sidebarCssClasses[0];
+      document.querySelector('body').classList.add(cssClass);
+    }
   }
 }