Update demo-nl

demo-newsletter-editor.html

@@ -684,5 +684,14 @@
 
       });
     </script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-74284223-1', 'auto');
+      ga('send', 'pageview');
+    </script>
   </body>
 </html>

demo.html

@@ -5,7 +5,9 @@
     <title>GrapesJS Demo</title>
     <link rel="stylesheet" href="stylesheets/toastr.min.css">
     <link rel="stylesheet" href="stylesheets/grapes.min.css">
+    <link rel="stylesheet" href="stylesheets/perfect-scrollbar.css">
     <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+    <script src="js/perfect-scrollbar.min.js"></script>
     <script src="js/toastr.min.js"></script>
     <style type="text/css">
         body, html{ height: 100%; margin: 0; }
@@ -150,6 +152,47 @@
 
          .gjs-block:hover {
            box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); }
+
+
+           /* Scrollbar */
+            .ps-container:hover > .ps-scrollbar-y-rail:hover,
+            .ps-container:hover > .ps-scrollbar-x-rail:hover,
+            .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+            .ps-container.ps-active-y > .ps-scrollbar-y-rail,
+            .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail,
+            .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail,
+            .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail,
+            .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+              background-color: rgba(0,0,0,0.3);
+              opacity: 1;
+            }
+
+            .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y,
+            .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x,
+            .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y,
+            .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x,
+            .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y,
+            .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x,
+            .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x,
+            .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y{
+              background-color: rgba(255,255,255, 0.3);
+              border-radius: 1px;
+              width: 6px;
+            }
+            /*
+            .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y,
+            .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+              background-color: rgba(255,255,255, 0.4);
+            }
+            */
+            .ps-container > .ps-scrollbar-y-rail {
+              width: 10px;
+            }
+
+            .ps-container > .ps-scrollbar-x-rail {
+              height: : 10px;
+            }
+
     </style>
   </head>
   <body>
@@ -1297,6 +1340,14 @@
       origWarn(msg);
     };
 
+    // Beautify  scrollbars
+    /*
+    gr.on('load', function() {
+      var el = document.querySelector('#gjs-pn-views-container');
+      console.log(el);
+      Ps.initialize(el);
+    });
+    */
     </script>
 
     <script>

stylesheets/perfect-scrollbar.css

@@ -0,0 +1,113 @@
+/* perfect-scrollbar v0.6.15 */
+.ps-container {
+  -ms-touch-action: auto;
+  touch-action: auto;
+  overflow: hidden !important;
+  -ms-overflow-style: none; }
+  @supports (-ms-overflow-style: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+  .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent; }
+  .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px; }
+    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      bottom: 2px;
+      /* there must be 'bottom' for ps-scrollbar-x */
+      height: 6px; }
+    .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+      height: 11px; }
+  .ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px; }
+    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      right: 2px;
+      /* there must be 'right' for ps-scrollbar-y */
+      width: 6px; }
+    .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+      width: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container:hover > .ps-scrollbar-x-rail,
+  .ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6; }
+  .ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+      background-color: #999; }