Rearrange and update dev build script

8a554f12 · Kamran Ahmed · a47eab3e · 8a554f12 · 8a554f12 · 8a554f12
13 changed file
--- a/assets/styles/scss/base.scss
+++ b/assets/styles/scss/base.scss
--- a/demo/demo.scss
+++ b/demo/demo.scss
+@import "base";
+@import "../src/sholo";
+
+$container-width: 500px !default;
+$logo-font-size: 55px !default;
+$button-font-size: 13px !default;
+$dark-button-bg: #2d2d2d !default;
+$dark-button-text: #ffffff !default;
+$light-button-bg: #f5f5f5 !default;
+$light-button-text: #2d2d2d !default;
+
+.page-wrap {
+  padding-top: 1px;
+  width: $container-width;
+  margin: auto;
+}
+
+.btn {
+  font-size: $button-font-size;
+  padding: 7px 10px;
+  border-radius: 3px;
+
+  &.btn__dark {
+    background: $dark-button-bg;
+    color: $dark-button-text;
+  }
+
+  &.btn__light {
+    background: $light-button-bg;
+    color: $light-button-text;
+  }
+}
+
+section {
+  margin-bottom: 35px;
+}
+
+.section__header {
+  margin: 80px 0 50px;
+  text-align: center;
+  display: block;
+  padding: 10px 10px 20px;
+
+  h1 {
+    font-size: $logo-font-size;
+  }
+}
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sholo</title>
-  <link rel="stylesheet" href="./assets/styles/css/demo.css">
+  <link rel="stylesheet" href="./dist/demo.css">
 </head>
 <body>
 <div class="page-wrap">
@@ -55,7 +55,7 @@
  </section>
 </div>

-<script src="./assets/scripts/dist/sholo.js"></script>
+<script src="./dist/sholo.js"></script>
 <script>
  const sholo = new Sholo({
    animate: true,
@@ -85,7 +85,7 @@
      popover: {
        title: 'Adding Introductions',
        description: 'You can use it to add popovers on top of the website',
-        position: 'right',
+        position: 'rig',
      },
    },
    {

--- a/postcss.config.js
+++ b/postcss.config.js
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-  },
-};
--- a/assets/scripts/src/constants.js
+++ b/assets/scripts/src/constants.js
--- a/assets/scripts/src/polyfill.js
+++ b/assets/scripts/src/polyfill.js
--- a/assets/scripts/src/element.js
+++ b/assets/scripts/src/element.js
@@ -7,7 +7,7 @@ import Position from './position';
 export default class Element {
  /**
   * DOM element object
-   * @param {Node} node
+   * @param {Node|HTMLElement} node
   * @param {Object} options
   * @param {Popover} popover
   * @param {Overlay} overlay

--- a/assets/scripts/src/overlay.js
+++ b/assets/scripts/src/overlay.js
 import Position from './position';
-import { ID_OVERLAY, OVERLAY_ZINDEX } from './constants';
+import { ID_OVERLAY, OVERLAY_ZINDEX } from '../common/constants';

 /**
 * Responsible for overlay creation and manipulation i.e.

--- a/assets/scripts/src/popover.js
+++ b/assets/scripts/src/popover.js
@@ -8,7 +8,7 @@ import {
  CLASS_POPOVER_TITLE, CLASS_PREV_STEP_BTN,
  ID_POPOVER,
  POPOVER_HTML,
-} from './constants';
+} from '../common/constants';

 /**
 * Popover that is displayed on top of the highlighted element

--- a/assets/scripts/src/position.js
+++ b/assets/scripts/src/position.js
--- a/assets/scripts/src/sholo.js
+++ b/assets/scripts/src/sholo.js
-import Overlay from './overlay';
-import Element from './element';
-import './polyfill';
-import Popover from './popover';
+import Overlay from './core/overlay';
+import Element from './core/element';
+import Popover from './core/popover';
+import './common/polyfill';
 import {
  CLASS_CLOSE_BTN,
  CLASS_NEXT_STEP_BTN,
@@ -11,7 +11,7 @@ import {
  OVERLAY_ANIMATE,
  OVERLAY_OPACITY,
  OVERLAY_PADDING, RIGHT_KEY_CODE,
-} from './constants';
+} from './common/constants';

 /**
 * Plugin class that drives the plugin

--- a/assets/styles/scss/demo.scss
+++ b/assets/styles/scss/demo.scss
-@import "base";
-
-$container-width: 500px !default;
-$logo-font-size: 55px !default;
-$button-font-size: 13px !default;
-$dark-button-bg: #2d2d2d !default;
-$dark-button-text: #ffffff !default;
-$light-button-bg: #f5f5f5 !default;
-$light-button-text: #2d2d2d !default;
-
-.page-wrap {
-  padding-top: 1px;
-  width: $container-width;
-  margin: auto;
-}
-
-.btn {
-  font-size: $button-font-size;
-  padding: 7px 10px;
-  border-radius: 3px;
-
-  &.btn__dark {
-    background: $dark-button-bg;
-    color: $dark-button-text;
-  }
-
-  &.btn__light {
-    background: $light-button-bg;
-    color: $light-button-text;
-  }
-}
-
-section {
-  margin-bottom: 35px;
-}
-
-.section__header {
-  margin: 80px 0 50px;
-  text-align: center;
-  display: block;
-  padding: 10px 10px 20px;
-
-  h1 {
-    font-size: $logo-font-size;
-  }
-}
-
-/////////////////////////////////////////
 div#sholo-popover-item {
  display: none;
  position: absolute;

--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -5,13 +5,13 @@ module.exports = {
  mode: 'development',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
-    './assets/styles/scss/demo.scss',
-    './assets/scripts/src/sholo.js',
+    './demo/demo.scss',
+    './src/index.js',
  ],
  output: {
-    path: path.join(__dirname, '/assets'),
-    publicPath: '/assets/',
-    filename: 'scripts/dist/sholo.js',
+    path: path.join(__dirname, '/dist'),
+    publicPath: '/dist/',
+    filename: 'sholo.js',
    libraryTarget: 'umd',
    library: 'Sholo',
  },
@@ -44,7 +44,7 @@ module.exports = {
  },
  plugins: [
    new ExtractTextPlugin({
-      filename: 'styles/css/demo.css',
+      filename: 'demo.css',
      allChunks: true,
    }),
  ],