switch wp

.gitattributes

+*.png binary
+*.jpg binary
+*.mp4 binary
\ No newline at end of file

src/cmp/Blocks.jsx

+var Info = function(cfg, children) {
+  return D.div({cls: 'info'}, children)
+};
+var Content = function(cfg, children) {
+  return D.div({cls: 'content0'}, children)
+};
+var headers = [];
+var Note = function(cfg, children) {
+  cfg = cfg || {};
+  return D.div({cls: D.cls('note', {'note-float': cfg.float})}, children)
+};
+
+var uniqLink = function(children) {
+  var child = children[0];
+  if(!child)
+    return {};
+  var title;
+  if(child.dom instanceof HTMLElement){
+    title = child.dom.innerText;
+  }else if(child instanceof HTMLElement){
+    title = child.innerText;
+  }else{
+    title = child;
+  }
+  return {name: title, title: title}
+};
+
+var Header = function(cfg, children) {
+  var item = uniqLink(children);
+  if(!cfg || !cfg.hidden)
+    headers.push(Object.assign(item, {type: 'Header'}));
+  return D.div({cls: 'header'}, [D.h('a', {attr: {name: item.name}})].concat(children))
+};
+var SubHeader = function(cfg, children) {
+  var item = uniqLink(children);
+  if(!cfg || !cfg.hidden)
+    headers.push(Object.assign(item, {type: 'SubHeader'}));
+  return D.div({cls: 'subHeader'}, [D.h('a', {attr: {name: item.name}})].concat(children))
+};
+var Field = function(cfg, children) {
+  cfg = cfg || {};
+  if(children[0].name === 'radio' || children[0].name === 'checkbox'){
+    return <div className={'field'}><label>{children} <span class='field-label'>{cfg.label}</span></label></div>
+  }else{
+    var child = children[0];
+    if(cfg.width && child){
+      if(child.dom instanceof HTMLElement){
+        child.dom.style.left = cfg.width+'px';
+      }else if(child instanceof HTMLElement){
+        child.style.left = cfg.width+'px';
+      }
+
+    }
+    return <div className={'field'}><label><span class='field-label'>{cfg.label}</span> {children}</label></div>
+  }
+};
+
+export {Info, Content, Note, Header, SubHeader, Field, headers};
\ No newline at end of file

src/cmp/Collapse/Collapse.jsx

+import {Component} from 'cmp/Component.jsx';
+import './Collapse.scss';
+var Collapse = new Component({
+  name: 'Collapse',
+  ctor: function(cfg) {
+    Object.assign(this, cfg);
+
+    this.createDOM();
+
+
+    this.afterInit && this.afterInit();
+  },
+  prop: {
+    value: {type: Boolean, default: false},
+    label: {type: String, default: 'Collapse'},
+  },
+  createDOM: function() {
+    var val = this.value,
+      el = this.dom = this.inputEl = D.h('div', {
+          cls: D.cls('cmp-collapse', {
+            collapsed: val
+          })
+        },
+      D.div({cls: 'cmp-collapse-title', onclick: function(){ val.set(!val.get())}}, this.label),
+      D.div({cls: 'cmp-collapse-content'}, this.children)
+    );
+
+    this.afterDOM && this.afterDOM();
+  }
+});
+
+export { Collapse };
\ No newline at end of file

src/cmp/Collapse/Collapse.scss

+.cmp-collapse.collapsed .cmp-collapse-content {
+  display: none;
+}
+.cmp-collapse-title:before {
+  content: '▼';
+  margin: 0 4px 0 0;
+}
+
+.cmp-collapse.collapsed {
+  .cmp-collapse-title:before {
+    content: '▲';
+  }
+}
+
+.cmp-collapse-title {
+  cursor: pointer;
+  font-weight: bold;
+  margin: 32px 0 0 0;
+}
+.cmp-collapse-content {
+  padding-left: 16px;
+}
\ No newline at end of file

src/cmp/Component.jsx

@@ -53,6 +53,9 @@ Component.prototype = {
     }
   },
   '~destroy': function() {
+
+    // TODO: destroy props
+
     var pointer = this.dom.parentNode;
     if(!pointer){
       pointer = this.dom;

src/cmp/Input/Input.jsx

+import {Component} from 'cmp/Component.jsx';
+
+
+var Input = new Component({
+  name: 'Input',
+  ctor: function(cfg) {
+    Object.assign(this, cfg);
+
+    this.createDOM();
+    this.initBinding();
+
+    this.afterInit && this.afterInit();
+  },
+  prop: {
+    value: {type: String, default: false}
+  },
+  createDOM: function() {
+    var val = this.value,
+      el = this.dom = this.inputEl = D.h('input', {
+        attr: {type: 'text'},
+        cls: 'cmp-input',
+        oninput: function() {
+          val.set(el.value);
+        }
+      });
+
+    this.afterDOM && this.afterDOM();
+  },
+  initBinding: function() {
+    var _self = this;
+
+    this.sub([this.value], function (val) {
+      _self.inputEl.value = val;
+    });
+
+  }
+});
+
+export { Input };

src/cmp/NumberInput/NumberInput.jsx

+import {Component} from 'cmp/Component.jsx';
+
+
+var NumberInput = new Component({
+  name: 'NumberInput',
+  ctor: function(cfg) {
+    Object.assign(this, cfg);
+
+    this.createDOM();
+    this.initBinding();
+
+    this.afterInit && this.afterInit();
+  },
+  prop: {
+    value: {type: String, default: false}
+  },
+  createDOM: function() {
+    var val = this.value,
+      el = this.dom = this.inputEl = D.h('input', {
+        attr: {type: 'number'},
+        cls: 'cmp-input',
+        oninput: function() {
+          val.set(el.value|0);
+        }
+      });
+
+    this.afterDOM && this.afterDOM();
+  },
+  initBinding: function() {
+    var _self = this;
+
+    this.sub([this.value], function (val) {
+      _self.inputEl.value = val;
+    });
+
+  }
+});
+
+export { NumberInput };

src/cmp/TimeInput/TimeInput.jsx

+import {Component} from 'cmp/Component.jsx';
+
+
+var TimeInput = new Component({
+  name: 'TimeInput',
+  ctor: function(cfg) {
+    Object.assign(this, cfg);
+
+    this.createDOM();
+    this.initBinding();
+
+    this.afterInit && this.afterInit();
+  },
+  prop: {
+    value: {type: Number, default: false},
+    min: {type: Number, default: 0},
+    max: {type: Number, default: 24*60*60},
+  },
+  createDOM: function() {
+    var _self = this;
+
+    this.dom = D.div({cls: 'TimeInput'},
+      this.minuteEl = D.h('input', {
+        attr: {type: 'number'},
+        cls: 'cmp-input minute',
+        oninput: function() {
+          _self.store.set('minutes', _self.minuteEl.value|0);
+        }
+      }), ':',
+      this.secondEl = D.h('input', {
+        attr: {type: 'number'},
+        cls: 'cmp-input second',
+        oninput: function() {
+          var val = _self.secondEl.value |0;
+          if(val<0){
+            _self.store.set({
+              'minutes': _self.store.get('minutes')-1,
+              'seconds': 59
+            });
+          }else if(val>59){
+            _self.store.set({
+              'minutes': _self.store.get('minutes')+1,
+              'seconds': 0
+            });
+          }else{
+            _self.store.set('seconds', val);
+          }
+        }
+      })
+    );
+
+    this.afterDOM && this.afterDOM();
+  },
+  initBinding: function() {
+    var _self = this;
+
+    this.sub([this.value], function (val) {
+      var sec = (val % 60) |0,
+          min = (val / 60) |0;
+
+      _self.store.set({
+        minutes: min,
+        seconds: sec
+      });
+
+    });
+    this.sub(['minutes', 'seconds'], function(min, sec) {
+      _self.value.set(min*60 + sec);
+      _self.minuteEl.value = min;
+      _self.secondEl.value = sec;
+    });
+
+  }
+});
+
+export { TimeInput };

src/core/DOM.js

@@ -39,6 +39,15 @@ NS.apply = function(a,b) {
                     el.removeAttribute(attrName)
                 }
             }
+        },
+        style: function(s, styleProp) {
+            return function(val) {
+                if(val !== void 0 && val !== false){
+                    s[styleProp] = val;
+                }else{
+                    delete s[styleProp];
+                }
+            }
         }
     };
 
@@ -114,7 +123,19 @@ NS.apply = function(a,b) {
             if(typeof style === 'string'){
                 el.style = style;
             }else{
-                NS.apply( el.style, style );
+                for( i in style ){
+                    var s = el.style;
+                    if(style.hasOwnProperty( i )){
+                        if( typeof style[ i ] === 'function' ){
+                            style[ i ]( setters.style( s, i ) );
+                        }else if(typeof style[ i ] === 'object'&& style[ i ] !== null && style[ i ].hook){
+                            return style[ i ].hook(setters.style(s, i));
+                        }else{
+                            setters.style( s, i )( style[ i ] );
+                        }
+                    }
+                }
+                //NS.apply( el.style, style );
             }
         }
 
@@ -241,6 +262,24 @@ NS.apply = function(a,b) {
         isInDOM && D._recursiveCmpCall(el, {childNodes: newChild}, 'afterAddToDOM');
 
     };
+    D.insertAfter = function(newChild, refChild) {
+        var f = document.createDocumentFragment();
+        D.appendChild(f, newChild);
+        var el = refChild.parentNode,
+          subEl = newChild;
+
+        var isInDOM = D.isInDOM(el);
+        isInDOM && D._recursiveCmpCall(el, f, 'beforeAddToDOM');
+        var next = refChild.nextSibling;
+        if(next){
+            el.insertBefore( f, next );
+        }else{
+            el.appendChild( f );
+        }
+
+        isInDOM && D._recursiveCmpCall(el, {childNodes: newChild}, 'afterAddToDOM');
+
+    };
     D.appendChild = function(el, subEl){
         var type = typeof subEl;
 
@@ -591,6 +630,18 @@ NS.apply = function(a,b) {
             }, true)
         }
     };
+    D.findParent = function(el, fn) {
+        var test;
+        while(el){
+            test = fn(el);
+            if(test === true)
+                return el;
+
+            el = el.parentNode
+        }
+    };
+    D.s = D.h;
+
 })(window['NS'], typeof window !== "undefined" ? window :
   typeof WorkerGlobalScope !== "undefined" ? self :
     typeof global !== "undefined" ? global :

src/core/data/Transform.js

@@ -42,6 +42,9 @@ var Transform = (function() {
   var Transform = {
     toFixed: hookAndConvert(function(val, digits) {
       return (val-0).toFixed(digits);
+    }),
+    concat: hookAndConvert(function(val, val2) {
+      return val + val2;
     })
   };
 

src/core/data/store/Store.js

@@ -277,7 +277,7 @@ Store.prototype = {
 
 
       }
-      !suppresFirstCall && wrap();
+      !suppresFirstCall && caller();
       return function() {
         for( var i = 0, _i = uns.length; i < _i; i++ ){
           uns[ i ]();

src/index.html

@@ -13,6 +13,7 @@
 
     <script src="core/Observer.js"></script>
     <script src="core/DOM.js"></script>
+    <script src="core/data/Transform.js"></script>
     <script src="core/Localizer.js"></script>
 
     <script src="core/Random.Seeded.js"></script>
@@ -22,17 +23,52 @@
     $COMMIT$
     $BUNDLE$
     <style>
+        li {
+            margin: 32px 0;
+        }
+        a[target]:after{
+            content: '⭧';
+        }
+
+        a {
+            position: relative;
+        }
         td {
             padding: 4px 8px;
             text-align: center;
         }
+        .content {
+            padding: 4px 32px;
+            margin: 32px -32px;
+            border-left: 2px solid;
+            width: 720px;
+            box-sizing: border-box;
+        }
+        .content0 {
+            padding: 4px 32px;
+            margin: 32px -32px;
+            width: 720px;
+            box-sizing: border-box;
+        }
+        i {
+            font-style: normal;
+            border-bottom: 2px solid #ff5e00;
+        }
+        .form {
+            padding: 4px 32px;
+            background: #eee;
+            margin: 32px -32px;
+            border-left: 2px solid;
+            width: 720px;
+        }
+
         .info {
-            background: #fffabc;
+            background: #fff0c6;
             padding: 16px 32px;
             margin: 16px 0;
         }
         .page-content {
-            max-width: 1024px;
+            max-width: 920px;
             margin: auto;
             font-family: 'Literata', serif;
             position: relative;
@@ -46,12 +82,12 @@
         .header {
             font-weight: bold;
             font-size: 64px;
-            margin: 32px 0 16px;
+            margin: 128px 0 32px;
         }
         .subHeader {
             font-weight: bold;
             font-size: 32px;
-            margin: 32px 0 16px 0px;
+            margin: 96px 0 48px 0;
         }
         .thead td {
             border-bottom: 2px solid #000;
@@ -62,8 +98,9 @@
             font-size: 24px;
         }
         a {
-            color: #1c7cf3;
-            font-family: sans-serif;
+            color: #1b9bcc;
+            font-family: 'Literata', serif;
+            margin: 0 4px;
         }
         .note.note-float {
             float: right;

src/main.jsx

 import '/model/Store';
 import {lal} from '/posts/post.jsx';
+import {s} from '/posts/store.jsx';
 import {VideoCalculator} from '/posts/VideoCalculator.jsx';
+import {Interactive} from '/posts/Interactive.jsx';
+import { headers, Header, SubHeader } from "cmp/Blocks.jsx";
+import { Collapse } from "cmp/Collapse/Collapse.jsx";
 
 
 const {IF, ELSE} = Store;
 export default function() {
   var krokotau = Store.Value.Boolean(false);
   let graph,
-    dom = <div renderTo={document.body} class={["page-content", {krokotau}]}>
-      <button onClick={()=>krokotau.toggle()}>togl</button>
-      Hello world!
+    dom = <div renderTo={document.body} class={[ "page-content", { krokotau } ]}>
+      {_ => {
+        setTimeout( function(){
+          _( headers.map( i =>
+            <div class={D.cls( 'link-header', {
+              h1: i.type === 'Header',
+              h2: i.type === 'SubHeader'
+            } )}><a href={'#' + i.name}>{i.title}</a></div>
+          ) )
+        }, 10 );
+      }}
+      <Collapse label={'Хранение и передача видео'} value={false}>
         {VideoCalculator}
+      </Collapse>
+      <Collapse label={'Интерактив'} value={false}>
+        <Interactive/>
+      </Collapse>
+
     </div>;
 
   const w = window;

src/main.scss

 @import "/global-styles/variables.scss";
 
 @import "/global-styles/mixins.scss";
-
-
-select, input {
-  font-size: 18px;
-  padding: 8px;
-
-}
-
-.field label {
-  select, input {
-    position: absolute;
-    left: 300px;
-  }
-}
-
-.field {
-  margin: 24px 0;
-  font-size: 18px;
-}
\ No newline at end of file

src/posts/Interactive.scss

+.timeline-title {
+  margin: 8px 8px;
+}
+.editor, .editor .field, .editor select, .editor input {
+  font-family: Tahoma;
+  font-size: 12px;
+
+}
+.timelines-list {
+  .add-button {
+    display: flex;
+    height: 32px;
+
+    align-items: center;
+    svg {
+      margin-right: 8px;
+    }
+  }
+
+  .item {
+    background: #67919e;
+    border-bottom: 1px solid #67919e;
+    border-top: 1px solid #67919e;
+    border-left: 4px solid #fff;
+    border-right: 4px solid #fff;
+    color: #fff;
+    padding: 4px;
+  }
+}
+.editor {
+  .inputs {
+    transition: all 0.4s ease;
+    label {
+      display: flex;
+      align-items: center;
+    }
+
+    input, select {
+      border: 0;
+      border-bottom: 1px solid;
+    }
+  }
+
+  .field label {
+    select, input {
+      position: absolute;
+      left: auto;
+    }
+  }
+
+
+  .field label {
+    .TimeInput {
+      position: absolute;
+
+      select, input {
+        position: relative;
+        left: auto;
+      }
+    }
+  }
+}
+
+.TimeInput input {
+  width: 3em;
+}
+.time-now {
+  position: absolute;
+  z-index: 1;
+  border-left: 1px dotted #67919e;
+  left: 0;
+  top: -8px;
+  bottom: -8px;
+}
+.kolbasa {
+  background: #67919e;
+  border: 1px solid #67919e;
+  position: absolute;
+  color: #fff;
+  text-align: center;
+  padding: 4px 0;
+  top: 1px;
+}
+.bottom-panel {
+  padding: 8px 0;
+  margin-bottom: 32px;
+  height: 150px;
+}
+
+.timeline-panel {
+  width: 100%
+}
+.timelines-bounds-list {
+  border-left: 1px solid #67919e;
+  border-right: 1px solid #67919e;
+  margin: 0 4px;
+  padding: 8px 4px;
+  box-sizing: border-box;
+  position: relative;
+  height: 150px;
+
+  .from {
+    position: absolute;
+    bottom: -20px;
+    left: 0;
+    transform: translateX(-50%);
+  }
+  .to {
+    position: absolute;
+    bottom: -20px;
+    right: 0;
+    transform: translateX(50%);
+  }
+}
+.quiz {
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background: rgba(255,255,255,0.5);
+  padding:8px 16px;
+  .title {
+    font-size: 28px;
+  }
+  .answer {
+    margin: 16px 0;
+    font-size: 18px;
+    &:before {
+      content: '⚪';
+      margin-right:8px;
+    }
+  }
+}
+
+.quiz.style1 {
+  background: rgba(86, 208, 255, 0.1);
+  .answer {
+    text-shadow: #19de76 1px -2px 5px;;
+    font-size: 22px;
+    font-family: CURSIVE;
+    color: #ffffff;
+    &:before {
+      font-size: 14px;
+    }
+  }
+  .title {
+    font-family: CURSIVE;
+    color: #ffffff;
+    text-shadow: #19de76 1px -2px 5px;;
+
+  }
+}
+.quiz.style2 {
+  transform: perspective(400px) rotateX(-15deg);
+  background: transparent;
+  color: #fff;
+  padding: 0;
+  .title {
+    font-size: 28px;
+    background: rgba(38, 87, 130, 0.7);
+    padding: 8px 16px;
+    margin-left: -16px;
+    text-align: left;
+    border-radius: 9px;
+    color: #ccecec;
+  }
+  .answer {
+    margin: 16px 0;
+    font-size: 18px;
+    background: linear-gradient(8deg, #8db4d0, transparent);
+    display: inherit;
+    padding: 8px;
+    border-radius: 25px;
+    border: 4px dotted #fff
+  }
+}
+
+.quiz.style3 {
+  border-radius: 20px;
+  transform: perspective(400px) rotateY(-5deg);
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  .title {
+    font-size: 28px;
+    text-align: center;
+  }
+}
+
+.not-implemented {
+  border-radius: 4px;
+  background: #ccc;
+  color: #777;
+  display: inline-block;
+  padding: 8px 16px;
+  cursor: not-allowed;
+}
+
+.act {
+  margin: 0 8px;
+  top: 12px;
+  vertical-align: middle;
+}
+.step {
+  overflow: hidden;
+  transition: all 0.4s ease;
+}
+
+.add-button {
+  cursor: pointer;
+  position: relative;
+  .inner {
+    display: none;
+  }
+  &:hover .inner{
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 150px;
+    z-index: 2;
+    .add-submenu {
+      width: 100%;
+      button {
+        width: 100%;
+        cursor: pointer;
+      }
+    }
+    .not-implemented {
+      .add-submenu button {
+        background: #bbb;
+      }
+    }
+  }
+}
+.editor.notAdded {
+  .timelines-list .item {
+    display: none;
+  }
+  .kolbasa {
+    display: none;
+  }
+  .quiz {
+    display: none;
+  }
+  .inputs {
+    opacity: 0;
+  }
+}
\ No newline at end of file

src/posts/VideoCalculator.scss

+select, input {
+  font-size: 18px;
+  padding: 8px;
+}
+
+.field label {
+  select, input {
+    position: absolute;
+    left: 300px;
+  }
+}
+
+.field {
+  margin: 24px 0;
+  font-size: 18px;
+}
+.h1 {
+  margin: 32px 0 0 0;
+  font-size: 24px;
+}
\ No newline at end of file

src/posts/store.jsx

+var s = window.s = new Store({
+  size: '',
+  codec: 1,
+  framerate: 0,
+  time: 0,
+
+  filesize: 0,
+  filesize2: 0,
+  filesize3: 0,
+  perDay: 0,
+  simult: 0,
+  popularity: 0,
+  creating: 0,
+
+  useInterlacing: false,
+  calculation: 'tv-show',
+  backups: 0,
+  duration: 0,
+  dc: 0,
+  viewersFrom: 0,
+  viewersTo: 0
+});
+export {s};
\ No newline at end of file

text/main

 Техническое задание на разработку видеосервиса и портала-аттракциона
 
+3. Портал
+3.1 Структура
+3.1.1 Проекты ( исторический, искусство, реалити, магазин на диване)
+3.1.2 Выборки из проектов
+3.1.2 Направления (Детектив, комедия, драма)
+3.1.3 Творчество, его сортировка и возможность добавить своё
+
+
 1. Видеосервис 
 1.1 должен выдерживать нагрузку
 1.2 трэкает внимание пользователей
@@ -13,12 +21,6 @@
 2.3.1 Сканирование QR с экрана
 2.3.2 Вход по двухфакторной авторизации
 
-3. Портал
-3.1 Структура
-3.1.1 Проекты ( исторический, искусство, реалити, магазин на диване)
-3.1.2 Выборки из проектов
-3.1.2 Направления (Детектив, комедия, драма)
-3.1.3 Творчество, его сортировка и возможность добавить своё
 
 3.2 Коллаборативность
 3.2.0 Социальная сеть