pan-alexey · pan-alexey · Sep 29, 2019 · Sep 29, 2019 · Sep 29, 2019 · Sep 29, 2019
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # tower-css
-WEB COMPONENT BASED FRONTEND FRAMEWORK
+Пример работы компонентов: https://vxv.me
+
+Tower - это набор компонентов, с минмальной связаностью, и не зависит от фреймворка.
+Особеность проекта в том что он работает на IE9 и не требует инициализации. Он не клонирует/пересоздает DOM элементы.
+Проект создан в свободное от работы время.
diff --git a/_config.yml b/_config.yml
diff --git a/app/html/index.html b/app/html/index.html
@@ -27,8 +27,10 @@
 </head>
 
 <body>
-
 	<style>
+		[v-cloak] {
+			visibility: hidden!important;
+		}
 		.fade-enter-active,
 		.fade-leave-active {
 			transition-duration: 0.3s;
@@ -80,7 +82,11 @@
 
 	<div id="app">
 		<transition name="fade">
-			<router-view></router-view>
+			<router-view>
+				<div v-cloak>
+					234242343242342
+				</div>
+			</router-view>
 		</transition>
 	</div>
 </body>

diff --git a/app/html/prod.html → app/html/live.html b/app/html/prod.html → app/html/live.html
@@ -23,66 +23,53 @@
 
 	<link rel="stylesheet" type="text/css" href="./source/css/core.min.css">
 	<link rel="stylesheet" type="text/css" href="./source/css/components.min.css">
-
-</head>
-
-<body>
-
 	<style>
 		.fade-enter-active,
 		.fade-leave-active {
 			transition-duration: 0.3s;
 			transition-property: opacity;
 			transition-timing-function: ease;
 		}
-
 		.fade-enter,
 		.fade-leave-active {
 			opacity: 0;
 		}
-
 		.fade-enter-active {
 			animation: fade-in .600s;
 			overflow: auto;
 		}
-
 		.fade-leave-active {
 			animation: fade-out .600s;
 			overflow: hidden;
 		}
-
 		@keyframes fade-in {
 			0% {
 				opacity: 0;
 				transform: translateY(30%);
 			}
-
 			50% {
 				transform: translateY(0);
 			}
-
 			100% {
 				opacity: 1;
 			}
 		}
-
 		@keyframes fade-out {
 			0% {
 				opacity: 1;
 			}
-
 			100% {
 				opacity: 0;
 			}
 		}
 	</style>
+</head>
+
+<body>
+
+
 
 
-	<div id="app">
-		<transition name="fade">
-			<router-view></router-view>
-		</transition>
-	</div>
 </body>
 <!-- UI COMPONENTS  -->
 
@@ -99,8 +86,69 @@
 <script src="./source/polyfill.min.js"></script>
 <script src="./source/js/core.min.js"></script>
 <script src="./source/js/components.min.js"></script>
-<!--/ UI COMPONENTS -->
-<script src="./webpack/app.min.js"></script>
+
+
+<!-- The core Firebase JS SDK is always required and must be listed first -->
+<!-- 
+<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-database.js"></script> 
+-->
+
+
+<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase.js"></script>
+<!-- TODO: Add SDKs for Firebase products that you want to use
+     https://firebase.google.com/docs/web/setup#available-libraries -->
+
+<script>
+  // Your web app's Firebase configuration
+  var firebaseConfig = {
+    apiKey: "AIzaSyCOI9ZHFtXnz_fhryUTLFHrWAui4C72sbg",
+    authDomain: "vue-frontend-data.firebaseapp.com",
+    databaseURL: "https://vue-frontend-data.firebaseio.com",
+    projectId: "vue-frontend-data",
+    storageBucket: "",
+    messagingSenderId: "97938394019",
+    appId: "1:97938394019:web:33fd30cb6f4193be"
+  };
+  // Initialize Firebase
+  firebase.initializeApp(firebaseConfig);
+
+  var firebaseDB = firebase.database().ref('/');
+  var user = firebase.auth().signInAnonymously();
+var user_id;
+	var user = firebase.auth().signInAnonymously();
+	firebase.auth().onAuthStateChanged(function(user) {
+		if (user) {
+		var isAnonymous = user.isAnonymous;
+		user_id = user.uid;
+
+
+		} else {
+		}
+	});
+
+
+	function writeUserData(message) {
+
+		var data = {
+          user_id: user_id,
+          message: message
+	  };
+	  console.log(data);
+		firebaseDB.push(data);
+	}
+
+
+
+	firebaseDB.limitToLast(100).on('child_added', function (data) {
+
+		console.log(data.val());
+
+});
+
+</script>
+
 
 
 </html>
diff --git a/app/source/components/carusel/style.less b/app/source/components/carusel/style.less
@@ -54,4 +54,13 @@
   z-index: 2;
   visibility: visible!important;
   left: -100%;
-}
+}
+
+
+
+
+.@{_}swipemenu-noscroll{
+  overflow-y: hidden;
+
+}
+
diff --git a/app/source/components/chekbox/style.less b/app/source/components/chekbox/style.less
@@ -11,7 +11,7 @@
 
 @float : @align;
 @text-align : @align;
-
+@offset-x : 6px;
 
 .checkbox {
   position: relative;
@@ -29,10 +29,10 @@
   line-height: 20px;
   vertical-align: top;
   clear: both;
-  padding-@{float}: 6px;
+  padding-@{float}: @offset-x;
 }
 .checkbox .chekmark:not(:empty) {
-  padding-@{float}: 6px;
+  padding-@{float}: @offset-x;
 }
 .checkbox .chekmark:before, 
 .checkbox .chekmark:after {
@@ -53,7 +53,7 @@
 .checkbox input[type="checkbox"] {
   outline: 0;
   visibility: hidden;
-  width: 24px;
+  width: 20px;
   margin: 0;
   display: block;
   float: @float;
@@ -80,9 +80,9 @@
 
 
 
-.checkbox.disabled input[type="checkbox"] + .chekmark {
+.checkbox.disabled  {
   opacity: @disabled ;
 }
-.checkbox[disabled] input[type="checkbox"] + .chekmark {
+.checkbox[disabled] {
   opacity: @disabled ;
 }
diff --git a/app/source/components/popup/.todo b/app/source/components/popup/.todo
diff --git a/app/source/components/popup/script.js b/app/source/components/popup/script.js
diff --git a/app/source/components/popup/style.less b/app/source/components/popup/style.less
@@ -0,0 +1,5 @@
+@import "./../varibles.less";
+.@{_}popup > .@{_}popup-block{
+    visibility: hidden;
+}
+
diff --git a/app/source/components/ripple/script.js b/app/source/components/ripple/script.js
@@ -59,7 +59,7 @@
             ink.addEventListener(transitionend, function(event){
                 if(trensitionTrigger) return; 
                 trensitionTrigger = true;
-                //el.removeChild(rippleContent);
+                el.removeChild(rippleContent);
             });
         });
         ink.addClass('@{_}animate' );

diff --git a/app/source/components/swipemenu/script.js b/app/source/components/swipemenu/script.js
@@ -9,7 +9,7 @@
 
     var $param = {
         blindZone : 40,
-        matageLength : 40,
+        matageLength : 30,
         tan : 2,
         exclude : [
             ".@{_}slider",
@@ -56,6 +56,10 @@
 
     var close = function(element){
         element.removeClass('@{_}active');
+
+        var root = document.documentElement;
+        root.removeClass('@{_}swipemenu-noscroll');
+
         setBackdrop(element, 0);
         setX(element, 0);
     }
@@ -64,7 +68,8 @@
     var begin = function(element, state){
         element.addClass('@{_}active');
         element.addClass('@{_}change');
-
+        var root = document.documentElement;
+        root.addClass('@{_}swipemenu-noscroll');
 
     }
     var change = function(element,state){
@@ -299,7 +304,7 @@
             var x = Math.abs(point.clientX - event.touches[0].clientX);
             var y = Math.abs(point.clientY - event.touches[0].clientY);
             distance = point.clientX - event.touches[0].clientX;
-            distance = distance + offset;
+            //distance = distance + offset; //********
 
             if (trigger == 1) {
                 $action.move(-distance);
@@ -372,7 +377,7 @@
             var x = Math.abs(point.clientX - event.clientX);
             var y = Math.abs(point.clientY - event.clientY);
             distance = point.clientX - event.clientX;
-            distance = distance + offset;
+            //distance = distance + offset;  //********
             if (trigger == 1) {
                 $action.move(-distance);
                 return;

diff --git a/app/source/components/switch/style.less b/app/source/components/switch/style.less
@@ -58,4 +58,12 @@ input:checked + .handle {
   -webkit-transform: translateX(22px);
   -ms-transform: translateX(22px);
   transform: translateX(22px);
+}
+
+
+.switch.disabled  {
+  opacity: @disabled ;
+}
+.switch[disabled] {
+  opacity: @disabled ;
 }
diff --git a/app/source/components/tooltip/.todo b/app/source/components/tooltip/.todo
diff --git a/app/webpack/components/Box.vue b/app/webpack/components/Box.vue
@@ -1,5 +1,4 @@
-// _Components_.vue
-<style>
+<style lang="less">
 .box-example{
     display: inline-block;
     width: 5rem;
@@ -8,6 +7,8 @@
 }
 </style>
 
+
+
 <template>
   <div class="activity">
     <div class="navbar">

diff --git a/app/webpack/components/Dropdown.vue b/app/webpack/components/Dropdown.vue
@@ -0,0 +1,57 @@
+<style lang="less">
+.box-example{
+    display: inline-block;
+    width: 12rem;
+    height: 5rem;
+    margin: .25rem;
+}
+</style>
+
+
+
+<template>
+  <div class="activity">
+    <div class="navbar">
+      <div class="navbar-top">
+        <div class="navbar-block blue" data-type="float">
+          <div class="navbar-content">
+            <div class="navbar-group blue">
+              <router-link to="/">
+                <i class="material-icons icon-home">&#xe88a;</i>
+              </router-link>
+            </div>
+            <div class="navbar-title center">
+              <b>BOX</b>
+            </div>
+            <div class="navbar-group">
+              <router-link to="/components">
+                <i class="material-icons icon-list">&#xe896;</i>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container gutter-x">
+
+
+        <span class="box-material box-example drop">
+
+        </span>
+
+
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted: function() {
+    //Необходимо вызвать пересчет отступа
+    window.navbar();
+  }
+};
+</script>
+