Enhanced components with jQuery plugins and DOM observer

Merge pull request #70 from digicorp/dev
digicorp · Jan 29, 2018 · 0263893 · 0263893
2 parents 00d45e8 + 479c70b
commit 0263893
Show file tree

Hide file tree

Showing 16 changed files with 79 additions and 76 deletions.
diff --git a/assets/css/propeller.css b/assets/css/propeller.css
@@ -609,6 +609,9 @@ h2.pmd-card-title-text {
 }
 
 @media screen and (max-width:767px) {
+  .pmd-alert-container .pmd-alert {
+    width: 300px;
+  }
   .pmd-alert-container.left {
     left: 50%;
   }

diff --git a/assets/css/propeller.min.css b/assets/css/propeller.min.css
diff --git a/assets/css/propeller.min.css.map b/assets/css/propeller.min.css.map
diff --git a/assets/js/propeller.js b/assets/js/propeller.js
@@ -854,21 +854,22 @@ var pmdDropdown = function ($) {
             if (dataTrigger !== undefined && dataTrigger.toLowerCase() === "hover") {
                 $(finalSelector).prev("button").addClass("pmd-dropdown-hover");
             }
-            //Hover event fot mouse over
+			//Hover event fot mouse over
             var mainTimeout;
             $(Selector.PMD_DROPDOWN_HOVER).hover(function (event) {
+				if('ontouchstart' in document) return $this;
                 window.clearTimeout(mainTimeout);
                 var parent = $(event.target).parent();
-                 var $this = $(this);
+                var $this = $(this);
                 if (parent.hasClass('open') && parent.is(event.target)) {
                     // stop this event, stop executing any code
                     // in this callback but continue to propagate
                     return true;
                 }
                 $this.attr('aria-expanded', 'true');
-                parent.addClass('open');
-                $this.parent().trigger(Event.SHOW_BS_DROPDOWN);
-            }, function (event) {
+					parent.addClass('open');
+					$this.parent().trigger(Event.SHOW_BS_DROPDOWN);
+				}, function (event) {
                 var $this = $(this);
                 mainTimeout = window.setTimeout(function () {
                     var parent = $(event.target).parent();
@@ -879,10 +880,9 @@ var pmdDropdown = function ($) {
                     parent.removeClass('open');
                     $this.parent().trigger(Event.HIDE_BS_DROPDOWN);
                 }, 10);
-
             });
             $(Selector.PMD_DROPDOWN_HOVER).parent().find('.dropdown-menu').each(function () {
-                var $this = $(this);
+			    var $this = $(this);
                 var subTimeout;
                 $this.hover(function () {
                     window.clearTimeout(subTimeout);
@@ -896,7 +896,6 @@ var pmdDropdown = function ($) {
                         $this.parent().parent().trigger(Event.HIDE_BS_DROPDOWN);
                     }, 10);
                 });
-
             });
             if (options !== undefined && options.minimumSize !== null) {
                 minimumSize = parseFloat(options.minimumSize);

diff --git a/assets/js/propeller.min.js b/assets/js/propeller.min.js
diff --git a/components/alert/css/alert.css b/components/alert/css/alert.css
@@ -44,7 +44,7 @@
 .fadeInUp { animation-name: fadeInUp; }
 
 @media screen and (max-width:767px){
+	.pmd-alert-container .pmd-alert  {width:300px;}
 	.pmd-alert-container.left { left:50%;}
 	.pmd-alert-container.right { right:50%;}
-
 }
diff --git a/components/dropdown/js/dropdown.js b/components/dropdown/js/dropdown.js
@@ -224,21 +224,22 @@ var pmdDropdown = function ($) {
             if (dataTrigger !== undefined && dataTrigger.toLowerCase() === "hover") {
                 $(finalSelector).prev("button").addClass("pmd-dropdown-hover");
             }
-            //Hover event fot mouse over
+			//Hover event fot mouse over
             var mainTimeout;
             $(Selector.PMD_DROPDOWN_HOVER).hover(function (event) {
+				if('ontouchstart' in document) return $this;
                 window.clearTimeout(mainTimeout);
                 var parent = $(event.target).parent();
-                 var $this = $(this);
+                var $this = $(this);
                 if (parent.hasClass('open') && parent.is(event.target)) {
                     // stop this event, stop executing any code
                     // in this callback but continue to propagate
                     return true;
                 }
                 $this.attr('aria-expanded', 'true');
-                parent.addClass('open');
-                $this.parent().trigger(Event.SHOW_BS_DROPDOWN);
-            }, function (event) {
+					parent.addClass('open');
+					$this.parent().trigger(Event.SHOW_BS_DROPDOWN);
+				}, function (event) {
                 var $this = $(this);
                 mainTimeout = window.setTimeout(function () {
                     var parent = $(event.target).parent();
@@ -249,10 +250,9 @@ var pmdDropdown = function ($) {
                     parent.removeClass('open');
                     $this.parent().trigger(Event.HIDE_BS_DROPDOWN);
                 }, 10);
-
             });
             $(Selector.PMD_DROPDOWN_HOVER).parent().find('.dropdown-menu').each(function () {
-                var $this = $(this);
+			    var $this = $(this);
                 var subTimeout;
                 $this.hover(function () {
                     window.clearTimeout(subTimeout);
@@ -266,7 +266,6 @@ var pmdDropdown = function ($) {
                         $this.parent().parent().trigger(Event.HIDE_BS_DROPDOWN);
                     }, 10);
                 });
-
             });
             if (options !== undefined && options.minimumSize !== null) {
                 minimumSize = parseFloat(options.minimumSize);

diff --git a/components/sidebar/sidebar-pages/basic-sidebar-page.html b/components/sidebar/sidebar-pages/basic-sidebar-page.html
@@ -15,29 +15,29 @@
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
 
 	<!-- Example docs (CSS for helping component example file)-->
-	<link href="http://propeller.in/docs/css/example-docs.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/docs/css/example-docs.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller card (CSS for helping component example file) -->
-	<link href="http://propeller.in/components/card/css/card.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/card/css/card.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller typography -->
-	<link href="http://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
 
 	<!-- Google Icon Font -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<link href="http://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller dropdown -->
-	<link href="http://propeller.in/components/dropdown/css/dropdown.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/dropdown/css/dropdown.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller navbar -->
-	<link href="http://propeller.in/components/navbar/css/navbar.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/navbar/css/navbar.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller button  -->
-	<link href="http://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller list  -->
-	<link href="http://propeller.in/components/list/css/list.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/list/css/list.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller sidebar  -->
 	<link rel="stylesheet" type="text/css" href="../css/sidebar.css">
@@ -108,12 +108,12 @@ <h2 class="headline">Sidebar Constructor</h2>
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
 <!-- Propeller Global js --> 
-<script src="http://propeller.in/components/global/js/global.js"></script>
+<script src="https://propeller.in/components/global/js/global.js"></script>
 
 <!-- Propeller Sidebar js -->
 <script type="text/javascript" language="javascript" src="../js/sidebar.js"></script>
 
 <!-- Propeller Dropdown js -->
-<script type="text/javascript" language="javascript" src="http://propeller.in/components/dropdown/js/dropdown.js"></script>
+<script type="text/javascript" language="javascript" src="https://propeller.in/components/dropdown/js/dropdown.js"></script>
 
 </html>
diff --git a/components/sidebar/sidebar-pages/fixed-sidebar-page.html b/components/sidebar/sidebar-pages/fixed-sidebar-page.html
@@ -14,29 +14,29 @@
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
 
 	<!-- Example docs (CSS for helping component example file)-->
-	<link href="http://propeller.in/docs/css/example-docs.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/docs/css/example-docs.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller card (CSS for helping component example file) -->
-	<link href="http://propeller.in/components/card/css/card.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/card/css/card.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller typography -->
-	<link href="http://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
 
 	<!-- Google Icon Font -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<link href="http://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller dropdown -->
-	<link href="http://propeller.in/components/dropdown/css/dropdown.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/dropdown/css/dropdown.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller navbar -->
-	<link href="http://propeller.in/components/navbar/css/navbar.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/navbar/css/navbar.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller button  -->
-	<link href="http://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller list  -->
-	<link href="http://propeller.in/components/list/css/list.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/list/css/list.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller sidebar  -->
 	<link rel="stylesheet" type="text/css" href="../css/sidebar.css">
@@ -51,14 +51,14 @@
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
 
-             <a href="javascript:void(0);" data-target="basicSidebar" data-placement="left" data-position="fixed" is-open="true" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect pull-left margin-r8 pmd-sidebar-toggle"><i class="material-icons md-light">menu</i></a>
+             <a href="javascript:void(0);" data-target="basicSidebar" data-placement="left" data-position="fixed" is-open="true" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect pull-left margin-r8 pmd-sidebar-toggle" is-open-width="1000"><i class="material-icons md-light">menu</i></a>
               <a class="navbar-brand" href="javascript:void(0);">Brand</a> 
           </div>
 
           <!-- Navbar Right icon -->		
           <div class="pmd-navbar-right-icon pull-right"> 
               <a href="javascript:void(0);" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect"><i class="material-icons pmd-sm md-light">search</i></a>
-              <a href="javascript:void(0);" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect topbar-toggle visible-xs-inline-block" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><i class="material-icons pmd-sm">more_vert</i></a>
+              <a href="javascript:void(0);" class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect topbar-toggle visible-xs-inline-block" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" ><i class="material-icons pmd-sm">more_vert</i></a>
           </div> 
           <!-- /.navbar-collapse --> 
       </div>
@@ -106,13 +106,13 @@ <h2 class="headline">Sidebar Constructor</h2>
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
 <!-- Propeller Global js --> 
-<script src="http://propeller.in/components/global/js/global.js"></script>
+<script src="https://propeller.in/components/global/js/global.js"></script>
 
 <!-- Propeller Sidebar js -->
 <script type="text/javascript" language="javascript" src="../js/sidebar.js"></script>
 
 <!-- Propeller Dropdown js -->
-<script type="text/javascript" language="javascript" src="http://propeller.in/components/dropdown/js/dropdown.js"></script>
+<script type="text/javascript" language="javascript" src="https://propeller.in/components/dropdown/js/dropdown.js"></script>
 
 </html>
 
diff --git a/components/sidebar/sidebar-pages/open-sidebar-page.html b/components/sidebar/sidebar-pages/open-sidebar-page.html
@@ -14,29 +14,29 @@
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
 
 	<!-- Example docs (CSS for helping component example file)-->
-	<link href="http://propeller.in/docs/css/example-docs.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/docs/css/example-docs.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller card (CSS for helping component example file) -->
-	<link href="http://propeller.in/components/card/css/card.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/card/css/card.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller typography -->
-	<link href="http://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
 
 	<!-- Google Icon Font -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<link href="http://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
+	<link href="https://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller dropdown -->
-	<link href="http://propeller.in/components/dropdown/css/dropdown.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/dropdown/css/dropdown.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller navbar -->
-	<link href="http://propeller.in/components/navbar/css/navbar.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/navbar/css/navbar.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller button  -->
-	<link href="http://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller list  -->
-	<link href="http://propeller.in/components/list/css/list.css" type="text/css" rel="stylesheet"/>
+	<link href="https://propeller.in/components/list/css/list.css" type="text/css" rel="stylesheet"/>
 
 	<!-- Propeller sidebar  -->
 	<link rel="stylesheet" type="text/css" href="../css/sidebar.css">
@@ -118,12 +118,12 @@ <h2 class="headline">Sidebar Constructor</h2>
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
 <!-- Propeller Global js --> 
-<script src="http://propeller.in/components/global/js/global.js"></script>
+<script src="https://propeller.in/components/global/js/global.js"></script>
 
 <!-- Propeller Sidebar js -->
 <script type="text/javascript" language="javascript" src="../js/sidebar.js"></script>
 
 <!-- Propeller Dropdown js -->
-<script type="text/javascript" language="javascript" src="http://propeller.in/components/dropdown/js/dropdown.js"></script>
+<script type="text/javascript" language="javascript" src="https://propeller.in/components/dropdown/js/dropdown.js"></script>
 
 </html>