Isolate bootstrap from the rest of application.

This commit includes script to generate bootstrap.isolated.css file
based on the original bootstrap.css where every selector is
prefixed by ".bootstrap-iso "

refs #197

components/layout/layout.js

@@ -155,6 +155,7 @@ define(['angular', 'angular-material', 'core', 'map', 'geolocation', 'layermanag
                     if(config.design == 'md')
                         window.require(['bottomSheetCollapsible']);
                     $scope.importCss = angular.isDefined(config.importCss) ? config.importCss : true;
+                    $scope.useIsolatedBootstrap = angular.isDefined(config.useIsolatedBootstrap) ? config.useIsolatedBootstrap : false;
                     $scope.Core = Core;
                     $scope.geolocation = Geolocation;
                     $scope.LM = LayerManager;

components/layout/partials/layout.html

@@ -1,12 +1,13 @@
-<link rel="stylesheet" ng-if="importCss" ng-href="{{Core.getNmPath()}}bootstrap/dist/css/bootstrap.min.css">
+<link rel="stylesheet" ng-if="importCss && !useIsolatedBootstrap" ng-href="{{Core.getNmPath()}}bootstrap/dist/css/bootstrap.min.css">
+<link rel="stylesheet" ng-if="importCss && useIsolatedBootstrap" ng-href="{{Core.getNmPath()}}bootstrap/dist/css/bootstrap.isolated.css">
 <link rel="stylesheet" ng-if="importCss" ng-href="{{Core.getNmPath()}}/openlayers/css/ol.css" type="text/css">
 <!-- Compiled and minified CSS -->
 <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css"> -->
 <link rel="stylesheet" type="text/css" ng-href="{{hsl_path}}css/mobile.css" ng-if="importCss && !!window.cordova">
 <link rel="stylesheet" ng-if="importCss" ng-href="{{hsl_path}}css/app.css"/>
 <link rel="stylesheet" ng-if="importCss" ng-href="{{hsl_path}}css/whhg-font/css/whhg.css"/>
 
-<div id="page-wrapper">
+<div id="page-wrapper" class="bootstrap-iso">
     <div id="content-wrapper" ng-class="{'open': Core.sidebarExpanded, 'sb-right': Core.sidebarRight && !Core.puremapApp, 'sb-left': !Core.sidebarRight && !Core.puremapApp, 'classic-sidebar': Core.classicSidebar, 'mini-sidebar': !Core.classicSidebar}">
         <div class="page-content">
             <div hs.map.directive ng-controller="hs.map.controller" ng-show="hs_map.visible" id="map" style="z-index:990"></div>

package.json

@@ -28,6 +28,8 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-requirejs": "^1.1.0",
     "phantomjs-prebuilt": "^2.1.16",
+    "postcss": "^7.0.14",
+    "postcss-prefix-selector": "^1.7.1",
     "protractor": "^5.4.2",
     "release-it": "^10.3.0"
   },
@@ -42,7 +44,8 @@
     "update-webdriver": "webdriver-manager update",
     "preprotractor": "npm run update-webdriver",
     "protractor": "protractor test/protractor-conf.js",
-    "release": "release-it"
+    "release": "release-it",
+    "isolate-bootstrap": "node scripts/bootstrap-isolate.js"
   },
   "dependencies": {
     "angular": "^1.7.2",

scripts/bootstrap-isolate.js

@@ -0,0 +1,16 @@
+var fs = require('fs');
+var postcss = require('postcss');
+var prefixer = require('postcss-prefix-selector');
+
+var css = fs.readFileSync('node_modules/bootstrap/dist/css/bootstrap.css', 'utf8').toString();
+
+var out = postcss()
+    .use(prefixer({
+        prefix: '.bootstrap-iso'
+    }))
+    .process(css).then(function (result) {
+        fs.writeFileSync('node_modules/bootstrap/dist/css/bootstrap.isolated.css', result.css);
+        console.log('bootstrap.isolated.css file created in node_modules/bootstrap/dist/css directory');
+    })
+
+