LIL-731 Упростить подключение компонентов и JS скриптов

apps/content/templates/content/contest_edit.html

@@ -13,6 +13,5 @@
   <contest-redactor {% if object and object.id %}:contest-id="{{ object.id }}"{% endif %}></contest-redactor>
 {% endblock content %}
 {% block foot %}
-  <script type="text/javascript" src="{% static 'contestRedactor.js' %}"></script>
   <link rel="stylesheet" href="{% static 'contestRedactor.css' %}" />
 {% endblock foot %}

apps/course/templates/course/course_edit.html

@@ -13,7 +13,7 @@
                    access-token="{{ request.user.auth_token }}"
                    {% if object and object.id %}:course-id="{{ object.id }}"{% endif %}></course-redactor>
 {% endblock content %}
-{% block foot %}
-  <script type="text/javascript" src="{% static 'courseRedactor.js' %}"></script>
-  <link rel="stylesheet" href="{% static 'courseRedactor.css' %}" />
-{% endblock foot %}
+{% block pre_app_js %}
+  <script type="text/javascript" src="{% static 'courseEdit.js' %}"></script>
+  <link rel="stylesheet" href="{% static 'courseEdit.css' %}" />
+{% endblock pre_app_js %}

project/templates/blocks/lil_store_js.html

@@ -21,10 +21,14 @@
     components: {},
     urls: {
       courses: "{% url 'courses' %}",
+      courseEdit: /\/course\/\d+\/edit/,
+      courseCreate: "{% url 'course_create' %}",
       userProfileEdit: "{% url 'user-edit-profile' %}",
       userProfile: "{% url 'user-profile' %}",
       userBonuses: "{% url 'user-bonuses' %}",
       faq: "{% url 'faq' %}",
+      contestEdit: /contest\/\w+\/edit/,
+      userGalleryEdit: "{% url 'user-gallery-edit' %}",
     },
     flags: {
       referrer: '{{ referrer.id|default:'' }}',
@@ -33,8 +37,12 @@
       isGiftCertificateUrl: {{ is_gift_certificate_url|yesno:"true,false" }},
     },
     data: {},
-    urlIs: (urlPatternName) => {
-        return window.location.pathname.search(window.LIL_STORE.urls[urlPatternName]) > -1;
+    urlIs: (urlPatternNames) => {
+        if(! Array.isArray(urlPatternNames)){
+            urlPatternNames = [urlPatternNames];
+        }
+        return urlPatternNames.filter(
+          urlPatternName => window.location.pathname.search(window.LIL_STORE.urls[urlPatternName]) > -1).length > 0;
     },
     isIndexPage: window.location.pathname == '/',
   };

web/package.json

@@ -41,6 +41,7 @@
     "baguettebox.js": "^1.10.0",
     "clipboard": "^2.0.1",
     "downscale": "^1.0.4",
+    "extract-loader": "^3.1.0",
     "glob": "^7.1.2",
     "history": "^4.7.2",
     "ilyabirman-likely": "^2.3.0",

web/src/js/app.js

@@ -13,7 +13,6 @@ import "./modules/tabs";
 import "./modules/popup";
 import "./modules/courses";
 import "./modules/comments";
-import "./modules/comments";
 import "./modules/password-show";
 import "./modules/notification";
 import "./modules/mixpanel";
@@ -25,9 +24,8 @@ import Vue from 'vue';
 import Vuelidate from 'vuelidate';
 import VueAutosize from '../components/directives/autosize'
 import Comments from '../components/Comments';
-import UploadContestWork from '../components/UploadContestWork.vue';
-import ContestWorks from '../components/ContestWorks.vue';
 import Likes from '../components/blocks/Likes.vue';
+import FAQ from '../components/FAQ.vue';
 
 Vue.use(Vuelidate);
 Vue.use(VueAutosize);
@@ -38,23 +36,30 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 const components = {
-    UploadContestWork,
-    ContestWorks,
     Likes,
     Comments,
+    FAQ,
 };
+//
+//if(window.LIL_STORE.urlIs('userProfileEdit') || window.LIL_STORE.urlIs('userBonuses')){
+//    const profile = require("./modules/profile");
+//    profile.main();
+//}
+//if(window.LIL_STORE.urlIs(['courseEdit', 'courseCreate'])){
+//    const courseEdit = require("./modules/course-redactor");
+//    courseEdit.main();
+//}
+//if(window.LIL_STORE.urlIs('contestEdit')){
+//    const ContestRedactor = require('../components/ContestRedactor.vue');
+//    components['contest-redactor'] = ContestRedactor.default;
+//}
+//if(window.LIL_STORE.urlIs('userGalleryEdit')){
+//    const userGalleryEdit = require("./modules/user-gallery-edit");
+//    userGalleryEdit.main();
+//}
 
 Object.assign(components, window.LIL_STORE.components);
 
-if(window.LIL_STORE.urlIs('faq')){
-    const FAQ = require('../components/FAQ.vue');
-    components['faq'] = FAQ.default;
-}
-if(window.LIL_STORE.urlIs('userProfileEdit') || window.LIL_STORE.urlIs('userBonuses')){
-    const profile = require("./modules/profile");
-    profile.main();
-}
-
 const app = new Vue({
     el: '#lilcity-vue-app',
     data() {

web/src/js/pages/contest-edit.js

@@ -1,4 +1,3 @@
-import ContestRedactor from '../components/ContestRedactor.vue'
+import ContestRedactor from '../../components/ContestRedactor.vue';
 
 window.LIL_STORE.components['contest-redactor'] = ContestRedactor;
-

web/src/js/pages/contest.js

@@ -0,0 +1,5 @@
+import UploadContestWork from '../../components/UploadContestWork.vue';
+import ContestWorks from '../../components/ContestWorks.vue';
+
+window.LIL_STORE.components['upload-contest-work'] = UploadContestWork;
+window.LIL_STORE.components['contest-works'] = ContestWorks;

web/src/js/pages/course-edit.js

@@ -1,5 +1,5 @@
-import 'babel-polyfill'
-import CourseRedactor from '../components/CourseRedactor.vue'
+import 'babel-polyfill';
+import CourseRedactor from '../../components/CourseRedactor.vue';
 import $ from 'jquery';
 
 window.LIL_STORE.components['course-redactor'] = CourseRedactor;

web/src/js/pages/profile.js

@@ -1,9 +1,9 @@
 import $ from 'jquery';
 import slugify from 'slugify';
 import ClipboardJS from 'clipboard';
-import {showNotification} from './notification';
+import {showNotification} from '../modules/notification';
 
-export const main = () => {
+$(document).ready(function () {
     if(window.LIL_STORE.urlIs('userBonuses')){
         $('#referrer-url').select().click(function(){
             $(this).select();
@@ -53,4 +53,4 @@ export const main = () => {
         });
         changeSlug();
     }
-}
+});

web/src/js/pages/user-gallery-edit.js

@@ -1,6 +1,7 @@
-import BlockImages from '../components/blocks/BlockImages.vue';
+import BlockImages from '../../components/blocks/BlockImages.vue';
 import $ from 'jquery';
-import {api} from "./modules/api";
+import {api} from "../modules/api";
+
 
 window.LIL_STORE.components['block-images'] = BlockImages;
 

web/src/sass/app.sass

@@ -2,4 +2,4 @@
 @import helpers/all
 @import generated/sprite-svg
 @import common
-@import '~baguettebox.js/dist/baguetteBox.min.css';
+@import '~baguettebox.js/dist/baguetteBox.min.css';

web/src/sass/pages/course-edit.scss

@@ -0,0 +1,166 @@
+.vdp-datepicker__calendar {
+  width: 240px;
+  margin-top: 10px;
+  padding: 5px;
+  background: white;
+  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
+  z-index: 99 !important;
+
+  header {
+    display: flex;
+    margin-bottom: 5px;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .prev, .next {
+    font-size: 0;
+    cursor: pointer;
+    order: 1;
+    width: auto !important;
+    padding: 10px;
+  }
+
+  .prev {
+    order: 1;
+  }
+
+  .next {
+    order: 3;
+  }
+
+  .prev:before, .next:before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    border: solid #E6E6E6;
+    border-width: 2px 2px 0 0;
+  }
+
+  .prev:after, .next:after {
+    content: none !important;
+  }
+
+  .prev:before {
+    transform: rotate(-135deg);
+  }
+
+  .next:before {
+    transform: rotate(45deg);
+  }
+}
+
+.kit__preview {
+  img {
+    width: 140px;
+    height: 140px;
+  }
+}
+
+.kit__photo {
+  width: 140px;
+  height: 140px;
+}
+
+.kit__section-remove {
+  button.sortable__handle {
+    margin-right: 10px;
+    cursor: -webkit-grab;
+    cursor: grab;
+
+    svg.icon-hamburger {
+      width: 1em;
+      height: 1em;
+    }
+  }
+}
+
+.sortable-ghost, .sortable-chosen {
+  background: white;
+  border-radius: 10px;
+}
+
+.course-redactor__preview-button-bg-save {
+  background-color: #58fffb;
+}
+.course-redactor__preview-button {
+  transition: backgroundColor 0.5s ease-in-out;
+}
+
+.field_text {
+  height: 270px;
+  overflow: scroll;
+}
+
+.courses__item {
+  flex: 0 0 300px;
+}
+
+.courses__item .field {
+  margin-bottom: 0;
+}
+
+.courses__content .redactor-box {
+  overflow-x: visible;
+  overflow-y: auto;
+  max-height: 200px;
+  background: none;
+  margin-top: 10px;
+}
+
+.courses__content .redactor-layer{
+  background: none;
+}
+
+.courses__theme {
+  flex: 1;
+}
+
+.courses__price {
+  margin-left: 20px;
+}
+
+.courses__preview {
+  .upload {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .upload__title {
+    color: #888888;
+    font-size: 16px;
+    margin-top: 100px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .upload__file {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.course-delete-cover {
+  left: 5px;
+  position: absolute;
+  bottom: 3px;
+}
+
+.field-category .select__head {
+  font-size: inherit;
+  line-height: inherit;
+  height: auto;
+}
+
+.datetime-fields {
+  display: flex;
+}
+
+.field-time {
+  margin-left: 10px;
+  flex: 50%;
+}

web/webpack.config.js

@@ -5,33 +5,36 @@ const NODE_ENV = process.env.NODE_ENV || 'development';
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 
+
 module.exports = {
   entry: {
     app: "./src/js/app.js",
-    courseRedactor: "./src/js/course-redactor.js",
-    contestRedactor: "./src/js/contest-redactor.js",
-    userGalleryEdit: "./src/js/user-gallery-edit.js",
+    courseEdit: "./src/js/pages/course-edit.js",
+    contest: "./src/js/pages/contest.js",
+    contestEdit: "./src/js/pages/contest-edit.js",
+    profile: "./src/js/pages/profile.js",
+    userGalleryEdit: "./src/js/pages/user-gallery-edit.js",
     mixpanel: "./src/js/third_party/mixpanel-2-latest.js",
     sprite: glob('./src/icons/*.svg'),
     images: glob('./src/img/*.*'),
     imagesCertificates: glob('./src/img/user-certificates/*'),
     imagesGiftCertificates: glob('./src/img/gift-certificates/*'),
     imagesReviews: glob('./src/img/reviews/*'),
-    fonts: glob('./src/fonts/*')
+    fonts: glob('./src/fonts/*'),
+//    pages: glob('./src/js/pages/*'),
+//    pagesCss: glob('./src/sass/pages/*'),
   },
   output: {
     path: path.join(__dirname, "build"),
     filename: NODE_ENV === 'development' ? '[name].js' : '[name].js',
     library: '[name]',
-    //filename: NODE_ENV === 'development' ? '[name].js' : '[name].[id].[chunkhash].js',
-    //library: '[name]',
     publicPath: '/static/',
   },
   module: {
     loaders: [
       {
         test: /\.js$/,
-        exclude: /(node_modules|bower_components|third_party)/,
+        exclude: /(node_modules|bower_components|third_party|pages)/,
         use: {
           loader: 'babel-loader',
           options: {
@@ -41,7 +44,7 @@ module.exports = {
       },
       {
         test: /third_party\/.*\.js$/,
-        exclude: /(node_modules|bower_components)/,
+        exclude: /(node_modules|bower_components|pages)/,
         use: {
           loader: 'file-loader',
           options: {
@@ -49,6 +52,22 @@ module.exports = {
           }
         }
       },
+//      {
+//        test: /\.js$/,
+//        include: [path.resolve(__dirname, 'src/js/pages')],
+//        use: [{
+//          loader: 'file-loader',
+//          options: {
+//            name: "[name].[ext]"
+//          }
+//        },
+//        {
+//          loader: 'babel-loader',
+//          options: {
+//            "presets": ["es2015"],
+//          }
+//        }]
+//      },
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
@@ -58,11 +77,39 @@ module.exports = {
       },
       {
         test: /\.s[ac]ss$/,
+        exclude: [path.resolve(__dirname, 'src/sass/pages')],
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: ['css-loader', 'sass-loader']
         })
       },
+      /* {
+        test: /\.s[ac]ss$/,
+        include: [path.resolve(__dirname, 'src/sass/pages')],
+          use:  [
+            {
+              loader: 'file-loader',
+              options: {
+                  name: '[name].css',
+              }
+            },
+            {
+              loader: 'extract-loader',
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                  sourceMap: true
+              }
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                  sourceMap: true
+              }
+            }
+          ]
+      }, */
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -127,6 +174,10 @@ module.exports = {
       "window.$": "jquery"
     }),
     new ExtractTextPlugin('[name].css'),
+//    new MiniCssExtractPlugin({
+//      filename: "[name].css",
+//      chunkFilename: "[id].css"
+//    }),
   ],
 
   resolve: {