[ 757 ] Front init + Main page

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "airbnb-base",
+  "globals": {
+    "$": true
+  }
+}

.gitignore

@@ -2,6 +2,9 @@ __pycache__/
 *.py[cod]
 *$py.class
 .idea/
+node_modules
 env/
 src/
+front/build
+static
 stroyprombeton/settings/local.py

.pylintrc

@@ -0,0 +1,4 @@
+[FORMAT]
+
+# Maximum number of characters on a single line.
+max-line-length=80

.scss-lint.yml

@@ -0,0 +1,46 @@
+severity: error
+
+linters:
+
+  BorderZero:
+    enabled: true
+    convention: zero
+
+  BemDepth:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: false
+
+  ExtendDirective:
+    enabled: true
+
+  LeadingZero:
+    enabled: false
+
+  NameFormat:
+    enabled: true
+
+  PrivateNamingConvention:
+    enabled: true
+    prefix: _
+
+  PropertySortOrder:
+    enabled: false
+
+  QualifyingElement:
+    enabled: false
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_BEM
+    class_convention: ^(?!js-).*
+    class_convention_explanation: should not be written in the form js-*
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes

README.md

@@ -1 +1,5 @@
 # stroyprombeton.ru
+stroyprombeton.ru site's code
+
+### Install dependencies
+Run `pip install --user -r requirements.txt`

front/js/components/main.es6

@@ -0,0 +1,60 @@
+const mainPage = (() => {
+  const DOM = {
+    $btnScrollTop: $('#btn-scroll-to-top'),
+    $scrollWrapper: $('#scroll-wrapper'),
+  };
+
+  const CONFIG = {
+    scrollbar: {
+      autoReinitialise: true,
+      mouseWheelSpeed: 30,
+    },
+  };
+
+  const init = () => {
+    pluginsInit();
+    setupXHR();
+    setUpListeners();
+  };
+
+  // TODO: move to config module
+  // http://youtrack.stkmail.ru/issue/dev-748
+  const setupXHR = () => {
+    const csrfUnsafeMethod = (method) => !(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+    const token = Cookies.get('csrftoken');
+
+    $.ajaxSetup({
+      beforeSend: (xhr, settings) => {
+        if (csrfUnsafeMethod(settings.type)) {
+          xhr.setRequestHeader('X-CSRFToken', token);
+        }
+      },
+    });
+  };
+
+  const setUpListeners = () => {
+    $(window).scroll(toggleToTopBtn);
+    DOM.$btnScrollTop.on('click', () => $('html, body').animate({ scrollTop: 0 }, 300));
+  };
+
+  const pluginsInit = () => {
+    console.warn('Here will be plugins initialization.');
+  };
+
+  const enableScrollToTop = () => {
+    DOM.$btnScrollTop.addClass('active');
+  };
+
+  const disableScrollToTop = () => {
+    DOM.$btnScrollTop.removeClass('active');
+  };
+
+  /**
+   * Toggles to top button.
+   */
+  const toggleToTopBtn = () => {
+    ($(window).scrollTop() > 300) ? enableScrollToTop() : disableScrollToTop();
+  };
+
+  init();
+})();

front/js/shared/mediator.es6

@@ -0,0 +1,30 @@
+/**
+ * We implements mediator pattern via jQuery's global events
+ * on empty object (it could be a window or a documents, also)
+ */
+const mediator = {
+  // Inner object, which used to bind and trigger events on it.
+  M: {},
+
+  /**
+   * Subscribes given collection of handlers to an event with a given name.
+   *
+   * @param {string} eventName
+   * @param handlers
+   */
+  subscribe: (eventName, ...handlers) => {
+    for (const handler of handlers) {
+      $(mediator.M).bind(eventName, handler);
+    }
+  },
+
+  /**
+   * Publishes event with a given name, passes context to its subscribers.
+   *
+   * @param eventName
+   * @param context
+   */
+  publish: (eventName, context) => {
+    $(mediator.M).trigger(eventName, context);
+  },
+};

front/js/shared/validator.es6

@@ -0,0 +1,26 @@
+const validator = (() => {
+  const CONFIG = {
+    regexpPhone: /(\+\d\s|\+\d)\(?\d{3}(\)|\)\s)?-?\d{1}-?\d{1}-?(\d{1}|\d{1}\s)-?\d{1}-?(\d{1}|\d{1}\s)-?\d{1}-?\d{1}/g,
+    regexpEmail: /^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,}$/,
+  };
+
+  /**
+   * Returns boolean result of phone number validation.
+   * Phone number should consist of 11 numbers. Number could have whitespaces.
+   *
+   * @param data - phone number
+   */
+  const isPhoneValid = (data) => data && !!data.match(CONFIG.regexpPhone);
+
+  /**
+   * Returns boolean result of email validation.
+   *
+   * @param data - email
+   */
+  const isEmailValid = (data) => !!data.toLowerCase().match(CONFIG.regexpEmail);
+
+  return {
+    isPhoneValid,
+    isEmailValid,
+  };
+})();

front/js/vendors/cookie.js

@@ -0,0 +1,151 @@
+/*!
+ * JavaScript Cookie v2.1.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+;(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		var OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			var result;
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					var expires = new Date();
+					expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
+					attributes.expires = expires;
+				}
+
+				try {
+					result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				if (!converter.write) {
+					value = encodeURIComponent(String(value))
+						.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+				} else {
+					value = converter.write(value, key);
+				}
+
+				key = encodeURIComponent(String(key));
+				key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
+				key = key.replace(/[\(\)]/g, escape);
+
+				return (document.cookie = [
+					key, '=', value,
+					attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
+					attributes.path    && '; path=' + attributes.path,
+					attributes.domain  && '; domain=' + attributes.domain,
+					attributes.secure ? '; secure' : ''
+				].join(''));
+			}
+
+			// Read
+
+			if (!key) {
+				result = {};
+			}
+
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()"
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var rdecode = /(%[0-9A-Z]{2})+/g;
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var name = parts[0].replace(rdecode, decodeURIComponent);
+				var cookie = parts.slice(1).join('=');
+
+				if (cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					cookie = converter.read ?
+						converter.read(cookie, name) : converter(cookie, name) ||
+						cookie.replace(rdecode, decodeURIComponent);
+
+					if (this.json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					if (key === name) {
+						result = cookie;
+						break;
+					}
+
+					if (!key) {
+						result[name] = cookie;
+					}
+				} catch (e) {}
+			}
+
+			return result;
+		}
+
+		api.set = api;
+		api.get = function (key) {
+			return api(key);
+		};
+		api.getJSON = function () {
+			return api.apply({
+				json: true
+			}, [].slice.call(arguments));
+		};
+		api.defaults = {};
+
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));

front/scss/common/_buttons.scss

@@ -0,0 +1,41 @@
+.btn-scroll-to-top {
+  @include font-smoothing;
+  background: $c-btn-red;
+  border: 2px solid $c-btn-red;
+  border-radius: 3px;
+  bottom: 20px;
+  box-shadow: 0 1px 0 rgba($c-white, 0.2) inset,
+              0 1px 2px rgba($c-black, 0.05);
+  color: $c-white;
+  cursor: pointer;
+  font-size: $f-size-base + 4;
+  font-weight: 400;
+  margin-bottom: 25px;
+  outline: none;
+  opacity: 0;
+  padding: 6px 20px;
+  position: fixed;
+  right: 0;
+  text-align: center;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  z-index: 10;
+
+  &:hover,
+  &:focus {
+    background: $c-btn-red-hover;
+    border: 2px solid $c-btn-red-hover;
+    color: $c-white;
+  }
+
+  &:active {
+    box-shadow: none;
+    background: $c-white;
+    border: 2px solid $c-btn-red;
+    color: $c-btn-red;
+  }
+
+  &.active {
+    opacity: 1;
+  }
+}