feat:WB1419 .13 hot CSS-injection

gulp/browserSyncManager.js

@@ -1,13 +1,23 @@
 var browserSync = require('browser-sync');
 
+var bsyncHandle = null;
 
 module.exports = {
     closeServer: closeServer,
     reloadServer: reloadServer,
     streamToServer: streamToServer,
     startServer: startServer,
+    getBSyncHandle: getBSyncHandle
 };
 
+function getBSyncHandle() {
+    return bsyncHandle;
+}
+
+function initBSyncHandle(label) {
+    return bsyncHandle = ((label ? browserSync.create(label) : browserSync.create()));
+}
+
 function closeServer(label) {
    browserSync.get(label).exit();
 }
@@ -25,9 +35,9 @@ function startServer(args) {
     var port = args.port;
     var baseDir = args.baseDir;
     var middleware = args.middleware;
-    var open = args.open;
+    var open = args.open || false;  // Callee, '08-servers.js' does not set this to a value so expect it to be undefined
 
-    var server = browserSync.create(label);
+    initBSyncHandle(label);
     var conf = {
         port: port,
         server: {
@@ -38,6 +48,6 @@ function startServer(args) {
     if(middleware) {
         conf.middleware = args.middleware;
     }
-    server.init(conf);
+    bsyncHandle.init(conf);
 
 }

gulp/tasks/04-custom-css.js

@@ -8,24 +8,32 @@ let concat = require("gulp-concat");
 let debug = require('gulp-debug');
 var wrap = require("gulp-wrap");
 var glob = require('glob');
+let browserSyncManager = require('../browserSyncManager');
 
 let buildParams = config.buildParams;
 
 
 
 gulp.task('watch-css', gulp.series('select-view', (cb) => {
-    gulp.watch([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()], {interval: 1000, usePolling: true}, gulp.series('custom-css'));
+    var filesWatchGlob = [buildParams.customCssMainPath(), buildParams.customNpmCssPath()];
+    var excludesFilesGlob = ['!'+buildParams.customCssPath()]
+    gulp.watch(filesWatchGlob.concat(excludesFilesGlob), {interval: 3000, usePolling: true}, gulp.series('custom-css'));
     cb();
-}));
+})); //  
 
 
 
 
 gulp.task('custom-css', gulp.series('select-view', () => {
-
-    return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
-        .pipe(concat(buildParams.customCssFile))
-        .pipe(gulp.dest(buildParams.viewCssDir()));
-
+    if (browserSyncManager.getBSyncHandle() === null) {
+        return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
+            .pipe(concat(buildParams.customCssFile))
+            .pipe(gulp.dest(buildParams.viewCssDir()));
+    } else {
+        return gulp.src([buildParams.customCssMainPath(),buildParams.customNpmCssPath(),'!'+buildParams.customCssPath()])
+            .pipe(concat(buildParams.customCssFile))
+            .pipe(gulp.dest(buildParams.viewCssDir()))
+            .pipe(browserSyncManager.getBSyncHandle().stream());
+    }
 
 }));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primo-explore-devenv",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "The Exlibris Primo Open Discovery Framework",
   "author": "noamamit92",
   "devDependencies": {
@@ -13,7 +13,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "babelify": "8.0.0",
     "bluebird": "3.5.4",
-    "browser-sync": "2.9.9",
+    "browser-sync": "^2.23.7",
     "browserify": "16.2.3",
     "camel-case": "^3.0.0",
     "colors": "^1.3.3",
@@ -42,6 +42,7 @@
     "gulp-streamify": "1.0.2",
     "gulp-template": "5.0.0",
     "gulp-uglify": "3.0.2",
+    "gulp-using": "^0.1.1",
     "gulp-util": "3.0.8",
     "gulp-wrap": "^0.15.0",
     "gulp-zip": "4.2.0",
@@ -72,4 +73,4 @@
     "> 2%"
   ],
   "repository": "https://github.com/ExLibrisGroup/primo-explore-devenv"
-}
+}

primo-explore/custom/.gitignore

@@ -1,8 +1,15 @@
 *.*
 # Add entries to prefixed with '!' to unhide your view files:
 # Eg:
-# !*/css/**
-# !*/html/**
-# !*/img/**
-# !*/js/**
+#!*/css/**
+#!*/js/**
+#!*/html/**
+#!*/img/**
+!*/css/**
+# The custom reskining files are now Git-visible from the above....BUT...
+# the end-product of the build itself css/custom1.css does not need to be
+# tracked hence the below
+**/css/custom1.css
+**/js/custom.js
+
 

primo-explore/custom/IAMS_VU2/css/README.md

@@ -0,0 +1,129 @@
+# The Primo New UI Customization Workflow Development Environment
+
+
+##css documentation
+
+- Primo uses Angular Directives massively in this project
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework  :
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+    <header layout="column" layout-fill class="topbar-wrapper">
+       <prm-topbar>
+       </prm-topbar>
+
+   <prm-search-bar (search-event)="prmSearch.onSearchBarSearchEvent()">
+   </prm-search-bar>
+
+          <md-progress-linear class="header-progress-bar animation-scale-up-down" md-mode="indeterminate" ng-show="prmSearch.searchInProgress">
+          </md-progress-linear>
+
+   </header>
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+- When defining css rules it is important to understand the css cascading/specifity logic:
+
+> http://www.w3.org/TR/css3-cascade/
+
+> https://specificity.keegan.st/
+
+
+
+
+- When you start working on customizing your css be aware of the ability to define css selectors based on the directive name, which is actually equivalent
+to an html tag - this will enable you changing the design of a component cross-system without relying on id's/classes
+
+- For the example above we can define selectors:
+
+```
+prm-topbar input {....}
+prm-topbar.md-primoExplore-theme input {....}
+```
+- Primo is using a theme inside angular-material to define a palette of colors see:
+> https://material.angularjs.org/latest/Theming/01_introduction
+
+
+- This means that you will often encounter a class "md-primoExplore-theme" attached to  elements.
+
+
+
+##Recipes/Examples:
+
+
+# css Recipe 1 - Color Scheme
+
+-  Open a new command line window
+
+-  cd to the project base directory (C:\**\**\primo-explore-devenv)
+-  Run `gulp css-colors` to save the OTB css file
+-  Run `css-color-extractor primo-explore/tmp/app.css --format=css  > primo-explore/tmp/colors.css` to extract the color definitions from the OTB css file and copy the css rules to primo-explore/custom/css/custom1.css
+
+
+Run the following steps repeatedly until you are satisfied with the result
+
+
+-  Choose a color from the interface (using your browsers' dev tools or extensions such as colorzilla)
+
+
+-  Choose the new color from your library color scheme
+-  Replace all values in the custom1.css file
+-  Save and refresh your browser
+
+
+
+# css Recipe 2 - Moving the Facets to the Left
+
+
+-  Select the parent container containing the search result and the facets
+-  Copy the selector definition using your browsers' dev tools
+-  Define the container as
+```
+display:flex;
+flex-flow:row-reverse;
+```
+
+
+- complete css definition:
+```
+prm-search > md-content.md-primoExplore-theme .main {
+    display: -webkit-flex; !* Safari *!
+    -webkit-flex-flow: row-reverse wrap; !* Safari 6.1+ *!
+    display: flex;
+    flex-flow: row-reverse wrap;
+
+}
+.screen-gt-sm .sidebar{
+    webkit-flex: 0 0 15%;
+    flex: 0 0 15%;
+}
+```
+-  Save and refresh your browser
+
+
+
+
+
+
+
+
+