diff --git a/modal-bootstrap-close-current-open-new/README.md b/modal-bootstrap-close-current-open-new/README.md new file mode 100644 index 0000000..27eb2d7 --- /dev/null +++ b/modal-bootstrap-close-current-open-new/README.md @@ -0,0 +1,3 @@ +# Bootstrap modal: close current, open new + + A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this [question on stackoverflow](http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new) \ No newline at end of file diff --git a/modal-bootstrap-close-current-open-new/index.html b/modal-bootstrap-close-current-open-new/index.html new file mode 100644 index 0000000..d335334 --- /dev/null +++ b/modal-bootstrap-close-current-open-new/index.html @@ -0,0 +1,130 @@ + + + + + Bootstrap modal: close current, open new + + + + + + + + +
+

Bootstrap modal: close current, open new

+

+ A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this + question on stackoverflow +

+
+ + + + + + + + + + + + + + +
+

Usage:

+
<!-- Button trigger modal -->
+<ANY data-toggle="modal" data-target="TARGET">...</ANY>
+
+<div class="modal fade" id="SELECTOR" tabindex="-1">
+  <div class="modal-dialog">
+   <div class="modal-content">
+    <div class="modal-body"> ... </div>
+     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
+      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
+     </div>
+   </div>
+  </div>
+</div>
+
+ +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/modal-bootstrap-close-current-open-new/style.css b/modal-bootstrap-close-current-open-new/style.css new file mode 100644 index 0000000..fd923d4 --- /dev/null +++ b/modal-bootstrap-close-current-open-new/style.css @@ -0,0 +1,54 @@ +body { + font-family: 'Roboto', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Advent Pro', sans-serif; +} + +.btn { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; +} + +.btn.btn-primary { + border-color: #008aff; + background-color: #008aff; +} + +.caps { + text-transform: uppercase; +} + +pre.prettyprint { + padding: 15px !important; + border: 0 !important; + font-family: consolas; + font-size: 14px; + background-color: #2e2c34 !important; + -moz-border-radius: 2px !important; + -webkit-border-radius: 2px; + border-radius: 2px !important; +} +.callout-demo pre.prettyprint { + max-height: 415px; +} +pre.prettyprint span.com { + color: #5E5E5E; +} +pre.prettyprint span.pln { + color: #395063; +} +pre.prettyprint span.tag { + color: #B5C6DF; +} +pre.prettyprint span.atv { + color: #70B8AF; +} +pre.prettyprint span.pun, pre.prettyprint span.opn, pre.prettyprint span.clo { + color: #B9947B; +} +pre.prettyprint span.atn { + color: #B5A8B8; +} \ No newline at end of file diff --git a/modal-dialogs-angularjs-bootstrap-3/README.md b/modal-dialogs-angularjs-bootstrap-3/README.md new file mode 100644 index 0000000..ae4c84c --- /dev/null +++ b/modal-dialogs-angularjs-bootstrap-3/README.md @@ -0,0 +1,5 @@ +# Modal Dialogs - AngularJS BootStrap 3 + + A dialog/modal service written in AngularJS, creates predefined easy to use dialogs (error,wait,notify,confirm,create) with Angular UI and Bootstrap 3 + + \ No newline at end of file diff --git a/modal-dialogs-angularjs-bootstrap-3/index.html b/modal-dialogs-angularjs-bootstrap-3/index.html new file mode 100644 index 0000000..9a75cf4 --- /dev/null +++ b/modal-dialogs-angularjs-bootstrap-3/index.html @@ -0,0 +1,59 @@ + + + + + Modal Dialogs - AngularJS BootStrap 3 + + + + + + + + + + + + +

Bootstrap 3 & AngularJS Dialog/Modals


+

+ Demostration of an Angular-Dialog-Service module. Which can be found on Github: https://github.com/m-e-conroy/angular-dialog-service
+

+
+
+ + + + + + + + + +
+
+
+
+
+

+ From Confirm Dialog: {{confirmed}} +

+
+
+
+
+
+

+ Your Name: {{name}} +

+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/modal-dialogs-angularjs-bootstrap-3/script.js b/modal-dialogs-angularjs-bootstrap-3/script.js new file mode 100644 index 0000000..f0e4699 --- /dev/null +++ b/modal-dialogs-angularjs-bootstrap-3/script.js @@ -0,0 +1,90 @@ +angular.module('modalTest',['ui.bootstrap','dialogs']) +.controller('dialogServiceTest',function($scope,$rootScope,$timeout,$dialogs){ + $scope.confirmed = 'You have yet to be confirmed!'; + $scope.name = '"Your name here."'; + + $scope.launch = function(which){ + var dlg = null; + switch(which){ + + // Error Dialog + case 'error': + dlg = $dialogs.error('This is my error message'); + break; + + // Wait / Progress Dialog + case 'wait': + dlg = $dialogs.wait(msgs[i++],progress); + fakeProgress(); + break; + + // Notify Dialog + case 'notify': + dlg = $dialogs.notify('Something Happened!','Something happened that I need to tell you.'); + break; + + // Confirm Dialog + case 'confirm': + dlg = $dialogs.confirm('Please Confirm','Is this awesome or what?'); + dlg.result.then(function(btn){ + $scope.confirmed = 'You thought this quite awesome!'; + },function(btn){ + $scope.confirmed = 'Shame on you for not thinking this is awesome!'; + }); + break; + + // Create Your Own Dialog + case 'create': + dlg = $dialogs.create('/dialogs/whatsyourname.html','whatsYourNameCtrl',{},{key: false,back: 'static'}); + dlg.result.then(function(name){ + $scope.name = name; + },function(){ + $scope.name = 'You decided not to enter in your name, that makes me sad.'; + }); + + break; + }; // end switch + }; // end launch + + // for faking the progress bar in the wait dialog + var progress = 25; + var msgs = [ + 'Hey! I\'m waiting here...', + 'About half way done...', + 'Almost there?', + 'Woo Hoo! I made it!' + ]; + var i = 0; + + var fakeProgress = function(){ + $timeout(function(){ + if(progress < 100){ + progress += 25; + $rootScope.$broadcast('dialogs.wait.progress',{msg: msgs[i++],'progress': progress}); + fakeProgress(); + }else{ + $rootScope.$broadcast('dialogs.wait.complete'); + } + },1000); + }; // end fakeProgress + +}) // end dialogsServiceTest +.controller('whatsYourNameCtrl',function($scope,$modalInstance,data){ + $scope.user = {name : ''}; + + $scope.cancel = function(){ + $modalInstance.dismiss('canceled'); + }; // end cancel + + $scope.save = function(){ + $modalInstance.close($scope.user.name); + }; // end save + + $scope.hitEnter = function(evt){ + if(angular.equals(evt.keyCode,13) && !(angular.equals($scope.name,null) || angular.equals($scope.name,''))) + $scope.save(); + }; // end hitEnter +}) // end whatsYourNameCtrl +.run(['$templateCache',function($templateCache){ + $templateCache.put('/dialogs/whatsyourname.html','

User\'s Name

Enter your full name, first & last.
'); +}]); // end run / module \ No newline at end of file diff --git a/modal-dialogs-angularjs-bootstrap-3/style.css b/modal-dialogs-angularjs-bootstrap-3/style.css new file mode 100644 index 0000000..b186816 --- /dev/null +++ b/modal-dialogs-angularjs-bootstrap-3/style.css @@ -0,0 +1,19 @@ +/* Fix for Bootstrap 3 with Angular UI Bootstrap */ + +.modal { + display: block; +} + +/* Custom dialog/modal headers */ + +.dialog-header-error { background-color: #d2322d; } +.dialog-header-wait { background-color: #428bca; } +.dialog-header-notify { background-color: #eeeeee; } +.dialog-header-confirm { background-color: #333333; } + .dialog-header-error span, .dialog-header-error h4, + .dialog-header-wait span, .dialog-header-wait h4, + .dialog-header-confirm span, .dialog-header-confirm h4 { color: #ffffff; } + +/* Ease Display */ + +.pad { padding: 25px; } \ No newline at end of file diff --git a/modal-pure-css/README.md b/modal-pure-css/README.md new file mode 100644 index 0000000..6f94045 --- /dev/null +++ b/modal-pure-css/README.md @@ -0,0 +1,2 @@ +# Pure css popup box modal + diff --git a/modal-pure-css/image.jpg b/modal-pure-css/image.jpg new file mode 100644 index 0000000..2d7c1b9 Binary files /dev/null and b/modal-pure-css/image.jpg differ diff --git a/modal-pure-css/index.html b/modal-pure-css/index.html new file mode 100644 index 0000000..c90e545 --- /dev/null +++ b/modal-pure-css/index.html @@ -0,0 +1,28 @@ + + + + + Pure css popup box + + + + + +

Popup/Modal Windows without JavaScript

+
+ Let me Pop up +
+ +
+
+

Here i am

+ × +
+ Thank to pop me out of that button, but now i'm done so you can close this window. +
+
+
+ + + + \ No newline at end of file diff --git a/modal-pure-css/style.css b/modal-pure-css/style.css new file mode 100644 index 0000000..c176b18 --- /dev/null +++ b/modal-pure-css/style.css @@ -0,0 +1,96 @@ +body { + font-family: Arial, sans-serif; + background: url(./image.jpg) no-repeat; + background-size: cover; + height: 100vh; +} + +h1 { + text-align: center; + font-family: Tahoma, Arial, sans-serif; + color: #06D85F; + margin: 80px 0; +} + +.box { + width: 40%; + margin: 0 auto; + background: rgba(255,255,255,0.2); + padding: 35px; + border: 2px solid #fff; + border-radius: 20px/50px; + background-clip: padding-box; + text-align: center; +} + +.button { + font-size: 1em; + padding: 10px; + color: #fff; + border: 2px solid #06D85F; + border-radius: 20px/50px; + text-decoration: none; + cursor: pointer; + transition: all 0.3s ease-out; +} +.button:hover { + background: #06D85F; +} + +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; +} +.overlay:target { + visibility: visible; + opacity: 1; +} + +.popup { + margin: 70px auto; + padding: 20px; + background: #fff; + border-radius: 5px; + width: 30%; + position: relative; + transition: all 5s ease-in-out; +} + +.popup h2 { + margin-top: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; +} +.popup .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; +} +.popup .close:hover { + color: #06D85F; +} +.popup .content { + max-height: 30%; + overflow: auto; +} + +@media screen and (max-width: 700px){ + .box{ + width: 70%; + } + .popup{ + width: 70%; + } +} \ No newline at end of file diff --git a/modal-responsive-design/README.md b/modal-responsive-design/README.md new file mode 100644 index 0000000..f143dc3 --- /dev/null +++ b/modal-responsive-design/README.md @@ -0,0 +1,4 @@ +# Responsive Modal Design + + Material Design inspired modals. No jQuery required. Responsive. + \ No newline at end of file diff --git a/modal-responsive-design/index.html b/modal-responsive-design/index.html new file mode 100644 index 0000000..476b19d --- /dev/null +++ b/modal-responsive-design/index.html @@ -0,0 +1,85 @@ + + + + + Responsive Modal Design + + + + + + + +
+
+

Material Design Modals

+
+ +
+
+

+ Modal 1 + Modal 2 + Modal 3 +

+
+

Click a button to activate a modal.

+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/modal-responsive-design/script.js b/modal-responsive-design/script.js new file mode 100644 index 0000000..7c90860 --- /dev/null +++ b/modal-responsive-design/script.js @@ -0,0 +1,191 @@ +var Modal = (function() { + + var trigger = $qsa('.modal__trigger'); // what you click to activate the modal + var modals = $qsa('.modal'); // the entire modal (takes up entire window) + var modalsbg = $qsa('.modal__bg'); // the entire modal (takes up entire window) + var content = $qsa('.modal__content'); // the inner content of the modal + var closers = $qsa('.modal__close'); // an element used to close the modal + var w = window; + var isOpen = false; + var contentDelay = 400; // duration after you click the button and wait for the content to show + var len = trigger.length; + + // make it easier for yourself by not having to type as much to select an element + function $qsa(el) { + return document.querySelectorAll(el); + } + + var getId = function(event) { + + event.preventDefault(); + var self = this; + // get the value of the data-modal attribute from the button + var modalId = self.dataset.modal; + var len = modalId.length; + // remove the '#' from the string + var modalIdTrimmed = modalId.substring(1, len); + // select the modal we want to activate + var modal = document.getElementById(modalIdTrimmed); + // execute function that creates the temporary expanding div + makeDiv(self, modal); + }; + + var makeDiv = function(self, modal) { + + var fakediv = document.getElementById('modal__temp'); + + /** + * if there isn't a 'fakediv', create one and append it to the button that was + * clicked. after that execute the function 'moveTrig' which handles the animations. + */ + + if (fakediv === null) { + var div = document.createElement('div'); + div.id = 'modal__temp'; + self.appendChild(div); + moveTrig(self, modal, div); + } + }; + + var moveTrig = function(trig, modal, div) { + var trigProps = trig.getBoundingClientRect(); + var m = modal; + var mProps = m.querySelector('.modal__content').getBoundingClientRect(); + var transX, transY, scaleX, scaleY; + var xc = w.innerWidth / 2; + var yc = w.innerHeight / 2; + + // this class increases z-index value so the button goes overtop the other buttons + trig.classList.add('modal__trigger--active'); + + // these values are used for scale the temporary div to the same size as the modal + scaleX = mProps.width / trigProps.width; + scaleY = mProps.height / trigProps.height; + + scaleX = scaleX.toFixed(3); // round to 3 decimal places + scaleY = scaleY.toFixed(3); + + + // these values are used to move the button to the center of the window + transX = Math.round(xc - trigProps.left - trigProps.width / 2); + transY = Math.round(yc - trigProps.top - trigProps.height / 2); + + // if the modal is aligned to the top then move the button to the center-y of the modal instead of the window + if (m.classList.contains('modal--align-top')) { + transY = Math.round(mProps.height / 2 + mProps.top - trigProps.top - trigProps.height / 2); + } + + + // translate button to center of screen + trig.style.transform = 'translate(' + transX + 'px, ' + transY + 'px)'; + trig.style.webkitTransform = 'translate(' + transX + 'px, ' + transY + 'px)'; + // expand temporary div to the same size as the modal + div.style.transform = 'scale(' + scaleX + ',' + scaleY + ')'; + div.style.webkitTransform = 'scale(' + scaleX + ',' + scaleY + ')'; + + + window.setTimeout(function() { + window.requestAnimationFrame(function() { + open(m, div); + }); + }, contentDelay); + + }; + + var open = function(m, div) { + + if (!isOpen) { + // select the content inside the modal + var content = m.querySelector('.modal__content'); + // reveal the modal + m.classList.add('modal--active'); + // reveal the modal content + content.classList.add('modal__content--active'); + + /** + * when the modal content is finished transitioning, fadeout the temporary + * expanding div so when the window resizes it isn't visible ( it doesn't + * move with the window). + */ + + content.addEventListener('transitionend', hideDiv, false); + + isOpen = true; + } + + function hideDiv() { + // fadeout div so that it can't be seen when the window is resized + div.style.opacity = '0'; + content.removeEventListener('transitionend', hideDiv, false); + } + }; + + var close = function(event) { + + event.preventDefault(); + event.stopImmediatePropagation(); + + var target = event.target; + var div = document.getElementById('modal__temp'); + + /** + * make sure the modal__bg or modal__close was clicked, we don't want to be able to click + * inside the modal and have it close. + */ + + if (isOpen && target.classList.contains('modal__bg') || target.classList.contains('modal__close')) { + + // make the hidden div visible again and remove the transforms so it scales back to its original size + div.style.opacity = '1'; + div.removeAttribute('style'); + + /** + * iterate through the modals and modal contents and triggers to remove their active classes. + * remove the inline css from the trigger to move it back into its original position. + */ + + for (var i = 0; i < len; i++) { + modals[i].classList.remove('modal--active'); + content[i].classList.remove('modal__content--active'); + trigger[i].style.transform = 'none'; + trigger[i].style.webkitTransform = 'none'; + trigger[i].classList.remove('modal__trigger--active'); + } + + // when the temporary div is opacity:1 again, we want to remove it from the dom + div.addEventListener('transitionend', removeDiv, false); + + isOpen = false; + + } + + function removeDiv() { + setTimeout(function() { + window.requestAnimationFrame(function() { + // remove the temp div from the dom with a slight delay so the animation looks good + div.remove(); + }); + }, contentDelay - 50); + } + + }; + + var bindActions = function() { + for (var i = 0; i < len; i++) { + trigger[i].addEventListener('click', getId, false); + closers[i].addEventListener('click', close, false); + modalsbg[i].addEventListener('click', close, false); + } + }; + + var init = function() { + bindActions(); + }; + + return { + init: init + }; + +}()); + +Modal.init(); \ No newline at end of file diff --git a/modal-responsive-design/style.css b/modal-responsive-design/style.css new file mode 100644 index 0000000..0ad8a05 --- /dev/null +++ b/modal-responsive-design/style.css @@ -0,0 +1,195 @@ +* { + box-sizing: border-box; +} +body { + line-height: 1.5; + font-family: 'Lato'; + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} +h1, +h2, +h3, +p { + font-weight: 300; + margin: 0 0 2.4rem 0; +} +h1, +h2, +h3 { + line-height: 1.3; +} +a { + text-decoration: none; + color: inherit; + font-weight: 400; +} +/** + * Material Modal CSS + */ +.modal { + will-change: visibility, opacity; + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow-y: auto; + overflow-x: hidden; + z-index: 1000; + visibility: hidden; + opacity: 0; + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); + transition-delay: $modal-delay; +} +.modal--active { + visibility: visible; + opacity: 1; +} +.modal--align-top { + align-items: flex-start; +} +.modal__bg { + background: transparent; +} +.modal__dialog { + max-width: 600px; + padding: 1.2rem; +} +.modal__content { + will-change: transform, opacity; + position: relative; + padding: 2.4rem; + background: #ffebee; + background-clip: padding-box; + box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); + opacity: 0; + transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1); +} +.modal__content--active { + opacity: 1; +} +.modal__close { + z-index: 1100; + cursor: pointer; +} +.modal__trigger { + position: relative; + display: inline-block; + padding: 1.2rem 2.4rem; + color: rgba(0,0,0,0.7); + line-height: 1; + cursor: pointer; + background: #ffebee; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26); + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); +} +.modal__trigger--active { + z-index: 10; +} +.modal__trigger:hover { + background: #e5d3d6; +} +#modal__temp { + will-change: transform, opacity; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #ffebee; + -webkit-transform: none; + transform: none; + opacity: 1; + transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); + transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); +} +/** + * Demo specific CSS + */ +body { + height: 100vh; + background: #f44336; +} +img { + max-width: 100%; +} +.demo-btns header { + padding: 7vh 10vw; + background: #ffebee; + display: flex; + align-items: center; +} +.demo-btns header h1 { + margin: 0; + color: rgba(0,0,0,0.54); + font-weight: 300; +} +.demo-btns .info { + background: #f44336; + padding: 3vh 10vw; + height: 70vh; + display: flex; + align-items: center; + justify-content: center; + flex-flow: column wrap; +} +.demo-btns p { + text-align: center; + color: #fff; +} +.demo-btns .link { + font-size: 20px; +} +.demo-btns .modal__trigger { + margin-right: 3px; +} +@media (max-width: 640px) { + .demo-btns .modal__trigger { + margin-bottom: 0.8rem; + } +} +.demo-close { + position: absolute; + top: 0; + right: 0; + margin: 1.2rem; + padding: 0.6rem; + background: rgba(0,0,0,0.3); + border-radius: 50%; + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); +} +.demo-close svg { + width: 24px; + fill: #fff; + pointer-events: none; + vertical-align: top; +} +.demo-close:hover { + background: rgba(0,0,0,0.6); +} +.logo { + position: fixed; + bottom: 3vh; + right: 3vw; + z-index: 2; +} +.logo img { + width: 45px; + -webkit-transform: rotate(0); + transform: rotate(0); + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); +} +.logo img:hover { + -webkit-transform: rotate(180deg) scale(1.1); + transform: rotate(180deg) scale(1.1); +} \ No newline at end of file diff --git a/template-product-powered-by-bootstrap/README.md b/template-product-powered-by-bootstrap/README.md new file mode 100644 index 0000000..45fa208 --- /dev/null +++ b/template-product-powered-by-bootstrap/README.md @@ -0,0 +1,3 @@ +# Product Template powered by Bootstrap + +Product template with accordion, powered with some bootstrap and customized CSS and a little bit of jQuery. diff --git a/template-product-powered-by-bootstrap/index.html b/template-product-powered-by-bootstrap/index.html new file mode 100644 index 0000000..36d8970 --- /dev/null +++ b/template-product-powered-by-bootstrap/index.html @@ -0,0 +1,245 @@ + + + + + Product Template powered by Bootstrap + + + + + + +
+ +
+
+ +
+
    +
  • +
    +

    Rustic

    + +
    • +
  • +
    +

    Clean

    + +
    • +
  • +
    +

    Stylish

    + +
    • +
  • +
    +

    Family

    + +
    • +
+
+ +
+ +
+

Quality

+
+
+
+

High quality

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+
+
+

Smart design

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+
+
+

Modern or retro

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+
+
+
+
+
+
+ +
+ +
+ +
+ +
+
+

Menu

+ +

More

+ +
+
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/template-product-powered-by-bootstrap/script.js b/template-product-powered-by-bootstrap/script.js new file mode 100644 index 0000000..c498244 --- /dev/null +++ b/template-product-powered-by-bootstrap/script.js @@ -0,0 +1,151 @@ +(function () { + var expand; + expand = function () { + var $input, $search; + $search = $('.search'); + $input = $('.input'); + if ($search.hasClass('close')) { + $search.removeClass('close'); + $input.removeClass('square'); + } else { + $search.addClass('close'); + $input.addClass('square'); + } + if ($search.hasClass('close')) { + $input.focus(); + } else { + $input.blur(); + } + }; + $(function () { + var $accordion, $wideScreen; + $accordion = $('#accordion').children('li'); + $wideScreen = $(window).width() > 767; + if ($wideScreen) { + $accordion.on('mouseenter click', function (e) { + var $this; + e.stopPropagation(); + $this = $(this); + if ($this.hasClass('out')) { + $this.addClass('out'); + } else { + $this.addClass('out'); + $this.siblings().removeClass('out'); + } + }); + } else { + $accordion.on('touchstart touchend', function (e) { + var $this; + e.stopPropagation(); + $this = $(this); + if ($this.hasClass('out')) { + $this.addClass('out'); + } else { + $this.addClass('out'); + $this.siblings().removeClass('out'); + } + }); + } + }); + $(function () { + var $container, $menu, $menubtn, $navbar; + $menubtn = $('#hb'); + $navbar = $('.navbar'); + $menu = $('.navigation'); + $container = $('.site-inner'); + $menubtn.on('click', function (e) { + if ($menubtn.hasClass('active')) { + $menubtn.removeClass('active'); + $menu.removeClass('slide-right'); + $container.removeClass('slide-right'); + $navbar.removeClass('slide-right'); + } else { + $menubtn.addClass('active'); + $menu.addClass('slide-right'); + $container.addClass('slide-right'); + $navbar.addClass('slide-right'); + } + }); + }); + $(function () { + var $button, clickOrTouch; + clickOrTouch = 'click touchstart'; + $button = $('#search-button'); + $button.on(clickOrTouch, expand); + }); + $(function () { + var $box; + $box = $('.sm-box'); + $box.on('click', function (e) { + e.preventDefault(); + var $this; + $this = $(this); + if ($this.hasClass('active')) { + $this.removeClass('active'); + } else { + $this.addClass('active'); + } + }); + }); +}.call(this)); + +$("select").each(function() { + var $this = $(this), + $options = $(this).children("option").length; + + $this.addClass("select-hidden"); + $this.wrap("
"); + $this.after("
"); + + var $styledSelect = $this.next("div.select-styled"); + $styledSelect.text($this.children("option").eq(0).text()); + + var $list = $("