├── .babelrc
├── .codeclimate.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.yml
├── .github
    ├── ISSUE_TEMPLATE.md
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .stylelintrc
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── dist
    ├── jquery.sidr.js
    ├── jquery.sidr.min.js
    ├── sidr.js
    ├── sidr.min.js
    └── stylesheets
    │   ├── sidr.bare.css
    │   ├── sidr.bare.min.css
    │   ├── sidr.dark.css
    │   ├── sidr.dark.min.css
    │   ├── sidr.light.css
    │   └── sidr.light.min.css
├── examples
    ├── README.md
    ├── index.html
    ├── jquery
    │   ├── anchor-menu.html
    │   ├── full-width.html
    │   ├── index.html
    │   ├── menu-with-callbacks.html
    │   ├── multiple-menus.html
    │   ├── nodisplaced-menu-with-close-options.html
    │   ├── only-touch.html
    │   ├── reload-content.html
    │   └── simple-menu.html
    ├── menu.gif
    ├── remote-content.html
    ├── style.css
    └── vanilla
    │   ├── anchor-menu.html
    │   ├── full-width.html
    │   ├── index.html
    │   ├── menu-with-callbacks.html
    │   ├── multiple-menus.html
    │   ├── nodisplaced-menu-with-close-options.html
    │   ├── only-touch.html
    │   ├── reload-content.html
    │   └── simple-menu.html
├── karma.conf.js
├── package.json
├── postcss.config.js
├── rollup.config.js
├── spec
    ├── default.options.spec.js
    ├── fnSidr.spec.js
    ├── menu.store.spec.js
    ├── models
    │   ├── base.element.spec.js
    │   └── menu.spec.js
    ├── runner.spec.js
    ├── status.spec.js
    └── utils
    │   ├── dom.spec.js
    │   └── utils.spec.js
└── src
    ├── css
        ├── common
        │   ├── base.css
        │   └── variables.css
        ├── sidr.bare.css
        ├── sidr.dark.css
        ├── sidr.light.css
        └── themes
        │   ├── dark.css
        │   └── light.css
    ├── jquery.sidr.js
    ├── js
        ├── default.options.js
        ├── jquery.fnSidr.js
        ├── menu.store.js
        ├── models
        │   ├── base.element.js
        │   ├── body.js
        │   ├── button.js
        │   └── menu.js
        ├── runner.js
        ├── sidr.js
        ├── status.js
        └── utils
        │   ├── dom.js
        │   └── utils.js
    └── sidr.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "sourceMap": true,
 3 |   "presets": [
 4 |     [
 5 |       "env",
 6 |       {
 7 |         "targets": {
 8 |           "browsers": ["last 2 versions", "IE >= 10", "Safari >= 6", "iOS >= 5", "> 1%", "Android >= 3"]
 9 |         },
10 |         "modules": false
11 |       }
12 |     ]
13 |   ],
14 |   "plugins": [
15 |     "external-helpers"
16 |   ],
17 |   "env": {
18 |     "test": {
19 |       "plugins": ["external-helpers", "istanbul"]
20 |     }
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/.codeclimate.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | engines:
 3 |   bundler-audit:
 4 |     enabled: false
 5 |   csslint:
 6 |     enabled: false
 7 |   duplication:
 8 |     enabled: true
 9 |     config:
10 |       languages:
11 |       - javascript
12 |   eslint:
13 |     enabled: true
14 |   fixme:
15 |     enabled: true
16 | ratings:
17 |   paths:
18 |   - "src/**.js"
19 | exclude_paths:
20 | - "dist/**/*"
21 | - "spec/**/*""
22 | - "examples/**/*"
23 | - "*.conf.js"
24 | - "*.config.js"
25 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | trim_trailing_whitespace = true
 8 | indent_style = space
 9 | 
10 | [*.{js,json}]
11 | indent_size = 2
12 | 
13 | [*.{yml}]
14 | indent_size = 2
15 | 
16 | [*.md]
17 | trim_trailing_whitespace = false
18 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/*{.,-}min.js
2 | dist/**
3 | 


--------------------------------------------------------------------------------
/.eslintrc.yml:
--------------------------------------------------------------------------------
 1 | extends: standard
 2 | 
 3 | rules:
 4 |   no-new: 0
 5 | 
 6 | env:
 7 |   browser: true
 8 |   es6: true
 9 |   jquery: true
10 |   node: true
11 |   mocha: true
12 | 
13 | globals:
14 |   sinon: true
15 |   should: true
16 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | Issue tracker is **ONLY** used for reporting bugs. Use [stackoverflow](https://stackoverflow.com) for supporting issues and questions.
 2 | 
 3 | <!--- Provide a general summary of the issue in the Title above -->
 4 | 
 5 | ## Expected Behavior
 6 | <!--- Tell us what should happen -->
 7 | 
 8 | ## Current Behavior
 9 | <!--- Tell us what happens instead of the expected behavior -->
10 | 
11 | ## Possible Solution
12 | <!--- Not obligatory, but suggest a fix/reason for the bug, -->
13 | 
14 | ## Steps to Reproduce
15 | <!--- Provide a link to a live example, or an unambiguous set of steps to -->
16 | <!--- reproduce this bug. Include code to reproduce, if relevant -->
17 | 1.
18 | 2.
19 | 3.
20 | 4.
21 | 
22 | ## Context (Environment)
23 | <!--- How has this issue affected you? What are you trying to accomplish? -->
24 | <!--- Providing context helps us come up with a solution that is most useful in the real world -->
25 | 
26 | <!--- Provide a general summary of the issue in the Title above -->
27 | 
28 | ## Detailed Description
29 | <!--- Provide a detailed description of the change or addition you are proposing -->
30 | 
31 | ## Possible Implementation
32 | <!--- Not obligatory, but suggest an idea for implementing addition or change -->
33 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--- Provide a general summary of your changes in the Title above -->
 2 | 
 3 | ## Description
 4 | <!--- Describe your changes in detail -->
 5 | 
 6 | ## Related Issue
 7 | <!--- This project only accepts pull requests related to open issues -->
 8 | <!--- If suggesting a new feature or change, please discuss it in an issue first -->
 9 | <!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
10 | <!--- Please link to the issue here: -->
11 | 
12 | ## Motivation and Context
13 | <!--- Why is this change required? What problem does it solve? -->
14 | <!--- If it fixes an open issue, please link to the issue here. -->
15 | 
16 | ## How Has This Been Tested?
17 | <!--- Please describe in detail how you tested your changes. -->
18 | <!--- Include details of your testing environment, and the tests you ran to -->
19 | <!--- see how your change affects other areas of the code, etc. -->
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *~
 2 | *.diff
 3 | *.patch
 4 | .DS_Store
 5 | .tags
 6 | .tags_sorted_by_file
 7 | package-lock.json
 8 | node_modules
 9 | coverage/
10 | dist/stylesheets/*.map
11 | dist/vendor/
12 | 


--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "stylelint-config-standard",
3 |   "severity": "error",
4 |   "rules": {
5 |     "indentation": 4
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 | - "8"
 5 | before_script:
 6 |   - if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter; fi
 7 |   - if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then chmod +x ./cc-test-reporter; fi
 8 |   - if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then ./cc-test-reporter before-build; fi
 9 | script: npm run dist
10 | after_script:
11 |   - if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then ./cc-test-reporter after-build --coverage-input-type lcov --exit-code $TRAVIS_TEST_RESULT; fi
12 | notifications:
13 |   email: false
14 | deploy:
15 |   provider: npm
16 |   email: alberto@berriart.com
17 |   api_key:
18 |     secure: Ogy1KCQTITD+DgAFnIfyjuT6o+zXv2+WFP1XRpOLu18s3eoyppP83Kf+XwHJE/CbyAj+LfagFK1aF7W6TWnihaoppaBB2HIN5a7xjIR4kaw9Gl1v/p4nAKU1EE/SP3LPaicZYKTxZqBC+yrJeqDZc1AfXsDXSqbJHgKPAGuav6w=
19 |   on:
20 |     tags: true
21 |     repo: artberri/sidr
22 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | ## 3.0.0 XXXX-XX-XX (Unreleased)
  4 | 
  5 | New features:
  6 | 
  7 | - jQuery is not needed anymore, now, Sidr is just a JS library which is available also as a jQuery Plugin
  8 | - `left`/`right` transforms replaced with CSS3 2D Transforms (translateX) (TODO)
  9 | - New `reload` method to make easier to handle dynamic data, eliminating the need of destroying it and reinstantiate the slider. Thanks to @liladani: <https://github.com/artberri/sidr/pull/176>
 10 | - New displace format resizing body. Thanks to @p0lar-bear: <https://github.com/artberri/sidr/pull/150> (TODO)
 11 | - Allow to keep menus opened. Thanks to @wtfred: https://github.com/artberri/sidr/pull/181 (TODO)
 12 | 
 13 | Breaking changes:
 14 | 
 15 | - Option 'bind' (event that triggers the menu) allows only a single event
 16 | - Default value for 'bind' (event that triggers the menu) is now `click` (it was `touchstart click`, both)
 17 | - Drop support for browsers not supporting animations
 18 | - Classes added to the menus change from `left` and `right` to `sidr-left` and `sidr-right` to avoid collisions
 19 | - Supports only browsers that natively support the following features:
 20 |   - <https://caniuse.com/#search=querySelectorAll>
 21 |   - <https://caniuse.com/#feat=classlist>
 22 |   - <https://caniuse.com/#search=transitions>
 23 |   - <https://caniuse.com/#search=CSS3%202D%20Transforms>
 24 | 
 25 | Internals:
 26 | 
 27 | - Update dev dependencies
 28 | - Switch from Grunt to NPM Scripts
 29 | - Switch from SASS + COMPASS to PostCSS
 30 | - Switch from PhantomJS to Headless Chrome for testing
 31 | 
 32 | ## 2.2.1 2016-02-17
 33 | 
 34 | Bug fixes:
 35 | 
 36 | - Removed the preinstall script that was generating problems when installing from npm
 37 | 
 38 | ## 2.2.0 2016-02-16
 39 | 
 40 | New features:
 41 | 
 42 | - Added `bind` option that can be used to change the button event that will trigger the menu toggle
 43 | - Added the `status` method to get the Sidr status object
 44 | 
 45 | From this version the bundling is done with rollup instead of browserify.
 46 | 
 47 | ## 2.1.0 2016-01-20
 48 | 
 49 | New features:
 50 | 
 51 | - Now it works with CSS3 transitions by default and fallbacks to jQuery.animate when not supported
 52 | - Added `timing` option that can be used to indicate the transition timing function for the CSS3 transitions
 53 | - Added `method` option to change the default behaviour of the button (that is currently the toggle method)
 54 | - Added `onOpenEnd` option to add a callback that will be fired when the menu ends opening
 55 | - Added `onCloseEnd` option to add a callback that will be fired when the menu ends closing
 56 | 
 57 | Bug fixes:
 58 | 
 59 | - Launch callback when a menu open is delayed until another one is closed
 60 | - Fixes bug introduced in 2.0.0 that added a method called 'undefined' in addition to the methods close, open, toggle
 61 | 
 62 | This version has a complete code refactor for code quality improvements:
 63 | 
 64 | - ES2015 syntax supported
 65 | - jquery.sidr.js file split
 66 | - Start Unit testing
 67 | 
 68 | ## 2.0.0 2016-01-10
 69 | 
 70 | **Breaking changes** that require major version incrementation:
 71 | 
 72 | - Removing position:absolute fallback that added support for very old mobile browsers
 73 | - Removing toogle method that was a typo, use toggle instead
 74 | 
 75 | Bug fixes:
 76 | 
 77 | - Fixing tap event on touchscreen devices
 78 | - Removing unnecessary compass mixins
 79 | - Fixes reinitalization
 80 | - Adding example
 81 | - Fixing bower structure
 82 | - Adding continous integration
 83 | - Fixing adding body classes when no displacing
 84 | - Removing only the needed styles from html and body tag
 85 | 
 86 | ## 1.2.1 2013-11-06
 87 | 
 88 | - Fixing tap event on touch devices
 89 | 
 90 | ## 1.2.0 2013-11-05
 91 | 
 92 | - Adding bind to tap event if exists instead of click    (faster)
 93 | - Fixed reopening menu bug in some browsers and jQuery versions
 94 | - Add a body class when the sidr menu is open and when animating
 95 | - Fixing the toogle/toggle typo
 96 | - Adds an option to allow choosing between displace or not the content (displace)
 97 | - Added callbacks for onOpen and onClose
 98 | 
 99 | ## 1.1.1 2013-03-13
100 | 
101 | - Fix bug when closing sidr programatically
102 | 
103 | ## 1.1.0 - 2013-03-11
104 | 
105 | - Added the `body` option
106 | 
107 | ## 1.0.0 - 2013-02-20
108 | 
109 | - First public version
110 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | ## Important notes
 4 | 
 5 | Please don't edit files in the `dist` subdirectory as they are generated via npm-scripts. You'll find source code in the `src` subdirectory!
 6 | 
 7 | ### Code style
 8 | 
 9 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
10 | 
11 | ## Modifying the code
12 | 
13 | Ensure that you have [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. The best way to do it is through [NVM](https://github.com/creationix/nvm).
14 | 
15 | 1. Fork and clone the repo.
16 | 1. Run `npm install` to install all dependencies (including grunt).
17 | 1. Run `npm run serve` to develop while watching changes
18 | 1. Run `npm run dist` to ensure files are linted/tested and that the project builds properly
19 | 
20 | Assuming that you don't see any red, you're ready to go.
21 | 
22 | ## Submitting pull requests
23 | 
24 | 1. Create a new branch, please don't work in your `master` branch directly.
25 | 1. Fix stuff.
26 | 1. Add examples if you are adding a new feature.
27 | 1. Run `npm run dist` to see if there are warnings/errors.
28 | 1. Push to your fork and submit a pull request.
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013 Alberto Varela
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sidr
 2 | 
 3 | [![Build Status](https://travis-ci.org/artberri/sidr.svg?branch=master)](https://travis-ci.org/artberri/sidr)
 4 | [![Code Climate](https://codeclimate.com/github/artberri/sidr/badges/gpa.svg)](https://codeclimate.com/github/artberri/sidr)
 5 | [![Test Coverage](https://codeclimate.com/github/artberri/sidr/badges/coverage.svg)](https://codeclimate.com/github/artberri/sidr/coverage)
 6 | [![Total Downloads](https://img.shields.io/npm/dt/sidr.svg)](https://www.npmjs.com/package/sidr)
 7 | [![Downloads Last Month](https://img.shields.io/npm/dm/sidr.svg)](https://www.npmjs.com/package/sidr)
 8 | [![Dependency Status](https://david-dm.org/artberri/sidr.svg)](https://david-dm.org/artberri/sidr)
 9 | [![npm version](https://img.shields.io/npm/v/sidr.svg)](https://npmjs.org/package/sidr)
10 | [![License](https://img.shields.io/npm/l/sidr.svg)](https://github.com/artberri/sidr/blob/master/LICENSE)
11 | 
12 | Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. It uses CSS3 transitions in modern browsers and fallbacks into jQuery.animate when they are not supported.
13 | 
14 | For a further description, documentation and others visit: [http://www.berriart.com/sidr](http://www.berriart.com/sidr)
15 | 
16 | ## Development
17 | 
18 | - Source hosted at [GitHub](https://github.com/artberri/sidr)
19 | - If you have problems implenting this, ask about it in [StackOverflow](http://stackoverflow.com/search?q=sidr)
20 | - Report issues and feature requests in [GitHub Issues](https://github.com/artberri/sidr/issues)
21 | - Contributing: [CONTRIBUTING.md](CONTRIBUTING.md)
22 | 
23 | Pull requests are very welcome! Make sure your patches are well tested. Please create a topic branch for every separate change you make.
24 | 
25 | ## Licensing
26 | 
27 | Released under the MIT License [http://opensource.org/licenses/MIT](http://opensource.org/licenses/MIT)
28 | 
29 | Copyright © 2013-2017 Alberto Varela ([http://www.berriart.com](http://www.berriart.com))
30 | 
31 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
32 | 
33 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
34 | 
35 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
36 | 


--------------------------------------------------------------------------------
/dist/jquery.sidr.min.js:
--------------------------------------------------------------------------------
1 | /*! sidr - v3.0.0 - 2017-12-10
2 |   http://www.berriart.com/sidr/
3 |   * Copyright (c) 2013-2017 Alberto Varela; Licensed MIT */
4 | !function(){"use strict";function e(e){return"status"===e?a:d[e]?d[e].apply(this,Array.prototype.slice.call(arguments,1)):"function"!=typeof e&&"string"!=typeof e&&e?void console.error("Method "+e+" does not exist on sidr"):d.toggle.apply(this,arguments)}function t(e,t){var n=e.getAttribute(t);"string"==typeof n&&""!==n&&"sidr-inner"!==n&&e.setAttribute(t,n.replace(/([A-Za-z0-9_.-]+)/g,"sidr-"+t+"-$1"))}function n(e,t,n){for(var i=n.split(" "),o=0;o<i.length;o++){var s=i[o].trim();e.classList[t](s)}}function i(e,t,n){e[t]=n}function o(e,t,n){return e[t]}function s(e){return"BODY"===e.tagName}function r(e){var t="sidr-open";return"sidr"!==e&&(t+=" "+e+"-open"),t}for(var a={moving:!1,opened:!1},l={},u={add:function(e,t){l[e]=t},get:function(e){return l[e]}},c=function(e){return function(t,n){"function"==typeof t?(n=t,t="sidr"):t||(t="sidr");u.get(t)[e](n)}},d={},h=["open","close","toggle","reload"],f=0;f<h.length;f++){var p=h[f];d[p]=c(p)}var m={isUrl:function(e){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)},extend:function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},fetch:function(e,t){var n=new XMLHttpRequest;n.onreadystatechange=function(){4===n.readyState&&200===n.status&&t(n.responseText)},n.open("GET",e,!0),n.send()}},v={id:function(e){return document.getElementById(e)},qs:function(e){return document.querySelector(e)},qsa:function(e){return document.querySelectorAll(e)},createElement:function(e){var t=document.createElement("div");return t.id=e,document.body.appendChild(t),t},getHTMLContent:function(e){for(var t="",n=this.qsa(e),i=0;i<n.length;i++)t+='<div class="sidr-inner">'+n[i].innerHTML+"</div>";return t},addPrefixes:function(e){var n=document.createElement("div");n.innerHTML=e;for(var i=n.querySelectorAll("*"),o=0;o<i.length;o++)t(i[o],"id"),t(i[o],"class"),i[o].removeAttribute("style");return n.innerHTML},transitions:function(){var e=(document.body||document.documentElement).style,t=!1,n="transition",i="transition",o="transitionend";if(n in e)t=!0;else{var s=function(e,t){for(var n=void 0,i=["moz","webkit","o","ms"],o=0;o<i.length;o++)if((n=i[o])+e in t)return n;return!1}(n=n.charAt(0).toUpperCase()+n.substr(1),e);i=(t=!!s)?s+n:null,n=t?"-"+s+"-"+n.toLowerCase():null,"webkit"===s?o="webkitTransitionEnd":"0"===s&&(o="oTransitionEnd")}return{cssProperty:i,supported:t,property:n,event:o}}()},y=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},b=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),g=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},C=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},k=function(){function e(t){y(this,e),this.element=t}return b(e,[{key:"bind",value:function(e,t){this.element.addEventListener(e,t,!1)}},{key:"unbind",value:function(e,t){this.element.removeEventListener(e,t,!1)}},{key:"style",value:function(e,t){if("string"==typeof e)this.element.style[e]=t;else for(var n in e)e.hasOwnProperty(n)&&(this.element.style[n]=e[n])}},{key:"addClass",value:function(e){n(this.element,"add",e)}},{key:"removeClass",value:function(e){n(this.element,"remove",e)}},{key:"html",value:function(e){if(!e)return o(this.element,"innerHTML");i(this.element,"innerHTML",e)}},{key:"scrollTop",value:function(e){if(!e)return o(this.element,"scrollTop");i(this.element,"scrollTop",e)}},{key:"offsetWidth",value:function(){return this.element.offsetWidth}}]),e}(),O="sidr-animating",w=function(e){function t(e,n){y(this,t);var i=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,v.qs(e.body)));return i.name=e.name,i.side=e.side,i.speed=e.speed,i.timing=e.timing,i.displace=e.displace,i.menuWidth=n,i}return g(t,k),b(t,[{key:"prepare",value:function(e){var t="open"===e?"hidden":"";if(s(this.element)){var n=new k(v.qs("html")),i=n.scrollTop();n.style("overflowX",t),n.scrollTop(i)}}},{key:"unprepare",value:function(){if(s(this.element)){new k(v.qs("html")).style("overflowX","")}}},{key:"move",value:function(e){this.addClass(O),"open"===e?this.open():this.close()}},{key:"open",value:function(){var e=this;if(this.displace){var t=v.transitions,n={width:this.offsetWidth()+"px",position:"absolute"};this.style(this.side,"0"),this.style(t.cssProperty,this.side+" "+this.speed/1e3+"s "+this.timing),this.style(n),setTimeout(function(){return e.style(e.side,e.menuWidth+"px")},1)}}},{key:"onClose",value:function(){var e=v.transitions,t={width:"",position:"",right:"",left:""};t[e.cssProperty]="",this.style(t),this.unbind(e.event,this.temporalCallback)}},{key:"close",value:function(){if(this.displace){var e=v.transitions;this.style(this.side,0);var t=this;this.temporalCallback=function(){t.onClose()},this.bind(e.event,this.temporalCallback)}}},{key:"removeAnimationClass",value:function(){this.removeClass(O)}},{key:"removeOpenClass",value:function(){this.removeClass(r(this.name))}},{key:"addOpenClass",value:function(){this.addClass(r(this.name))}}]),t}(),M=function(e){function t(e){y(this,t);var n=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,v.id(e.name)));return n.name=e.name,n.speed=e.speed,n.side=e.side,n.displace=e.displace,n.source=e.source,n.timing=e.timing,n.method=e.method,n.renaming=e.renaming,n.onOpenCallback=e.onOpen,n.onCloseCallback=e.onClose,n.onOpenEndCallback=e.onOpenEnd,n.onCloseEndCallback=e.onCloseEnd,n.init(e),n}return g(t,k),b(t,[{key:"init",value:function(e){this.element||(this.element=v.createElement(this.name)),this.style(v.transitions.cssProperty,this.side+" "+this.speed/1e3+"s "+this.timing),this.addClass("sidr sidr-"+this.side),this.body=new w(e,this.offsetWidth()),this.reload()}},{key:"reload",value:function(){var e=this;if("function"==typeof this.source){var t=this.source(name);this.html(t)}else if("string"==typeof this.source&&m.isUrl(this.source))m.fetch(this.source,function(t){e.html(t)});else if("string"==typeof this.source){var n=v.getHTMLContent(this.source);this.renaming&&(n=v.addPrefixes(n)),this.html(n)}else null!==this.source&&console.error("Invalid Sidr Source")}},{key:"move",value:function(e,t){a.moving=!0,this.body.prepare(e),this.body.move(e),this.moveMenu(e,t)}},{key:"open",value:function(e){var t=this;if(a.opened!==this.name&&!a.moving)if(!1===a.opened)this.move("open",e),this.onOpenCallback();else{u.get(a.opened).close(function(){t.open(e)})}}},{key:"close",value:function(e){a.opened!==this.name||a.moving||(this.move("close",e),this.onCloseCallback())}},{key:"toggle",value:function(e){a.opened===this.name?this.close(e):this.open(e)}},{key:"onOpenMenu",value:function(e){var t=this.name;a.moving=!1,a.opened=t,this.unbind(v.transitions.event,this.temporalOpenMenuCallback),this.body.removeAnimationClass(),this.body.addOpenClass(),this.onOpenEndCallback(),"function"==typeof e&&e(t)}},{key:"openMenu",value:function(e){var t=this;this.style(this.side,0),this.temporalOpenMenuCallback=function(){t.onOpenMenu(e)},this.bind(v.transitions.event,this.temporalOpenMenuCallback)}},{key:"onCloseMenu",value:function(e){this.unbind(v.transitions.event,this.temporalCloseMenuCallback),this.style({left:"",right:""}),this.body.unprepare(),a.moving=!1,a.opened=!1,this.body.removeAnimationClass(),this.body.removeOpenClass(),this.onCloseEndCallback(),"function"==typeof e&&e(name)}},{key:"closeMenu",value:function(e){var t=this;this.style(this.side,""),this.temporalCloseMenuCallback=function(){t.onCloseMenu(e)},this.bind(v.transitions.event,this.temporalCloseMenuCallback)}},{key:"moveMenu",value:function(e,t){"open"===e?this.openMenu(t):this.closeMenu(t)}}]),t}(),E=function(t){function n(e,t){y(this,n);var i=C(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return i.init(t),i}return g(n,k),b(n,[{key:"init",value:function(t){if(!this.element.getAttribute("data-sidr")){var n=t.name,i=t.method,o=t.bind;this.element.setAttribute("data-sidr",n),this.bind(o,function(t){t.preventDefault(),e(i,n)})}}}]),n}(),_={name:"sidr",speed:200,side:"left",source:null,renaming:!0,body:"body",displace:!0,timing:"ease",method:"toggle",bind:"click",onOpen:function(){},onClose:function(){},onOpenEnd:function(){},onCloseEnd:function(){}};jQuery.sidr=e,jQuery.fn.sidr=function(e){var t=m.extend(_,e);return u.add(t.name,new M(t)),this.each(function(){new E(this,t)})}}();
5 | 


--------------------------------------------------------------------------------
/dist/sidr.min.js:
--------------------------------------------------------------------------------
1 | /*! sidr - v3.0.0 - 2017-12-10
2 |   http://www.berriart.com/sidr/
3 |   * Copyright (c) 2013-2017 Alberto Varela; Licensed MIT */
4 | !function(){"use strict";function e(e,t){var n=e.getAttribute(t);"string"==typeof n&&""!==n&&"sidr-inner"!==n&&e.setAttribute(t,n.replace(/([A-Za-z0-9_.-]+)/g,"sidr-"+t+"-$1"))}function t(e,t,n){for(var i=n.split(" "),o=0;o<i.length;o++){var s=i[o].trim();e.classList[t](s)}}function n(e,t,n){e[t]=n}function i(e,t,n){return e[t]}function o(e){return"BODY"===e.tagName}function s(e){var t="sidr-open";return"sidr"!==e&&(t+=" "+e+"-open"),t}function r(e){return"status"===e?k:M[e]?M[e].apply(this,Array.prototype.slice.call(arguments,1)):"function"!=typeof e&&"string"!=typeof e&&e?void console.error("Method "+e+" does not exist on sidr"):M.toggle.apply(this,arguments)}for(var a={name:"sidr",speed:200,side:"left",source:null,renaming:!0,body:"body",displace:!0,timing:"ease",method:"toggle",bind:"click",onOpen:function(){},onClose:function(){},onOpenEnd:function(){},onCloseEnd:function(){}},l={},u=function(e,t){l[e]=t},c=function(e){return l[e]},d=function(e){return!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e)},h=function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},p=function(e,t){var n=new XMLHttpRequest;n.onreadystatechange=function(){4===n.readyState&&200===n.status&&t(n.responseText)},n.open("GET",e,!0),n.send()},f={id:function(e){return document.getElementById(e)},qs:function(e){return document.querySelector(e)},qsa:function(e){return document.querySelectorAll(e)},createElement:function(e){var t=document.createElement("div");return t.id=e,document.body.appendChild(t),t},getHTMLContent:function(e){for(var t="",n=this.qsa(e),i=0;i<n.length;i++)t+='<div class="sidr-inner">'+n[i].innerHTML+"</div>";return t},addPrefixes:function(t){var n=document.createElement("div");n.innerHTML=t;for(var i=n.querySelectorAll("*"),o=0;o<i.length;o++)e(i[o],"id"),e(i[o],"class"),i[o].removeAttribute("style");return n.innerHTML},transitions:function(){var e=(document.body||document.documentElement).style,t=!1,n="transition",i="transition",o="transitionend";if(n in e)t=!0;else{var s=function(e,t){for(var n=void 0,i=["moz","webkit","o","ms"],o=0;o<i.length;o++)if((n=i[o])+e in t)return n;return!1}(n=n.charAt(0).toUpperCase()+n.substr(1),e);i=(t=!!s)?s+n:null,n=t?"-"+s+"-"+n.toLowerCase():null,"webkit"===s?o="webkitTransitionEnd":"0"===s&&(o="oTransitionEnd")}return{cssProperty:i,supported:t,property:n,event:o}}()},m=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},v=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),y=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},b=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},g=function(){function e(t){m(this,e),this.element=t}return v(e,[{key:"bind",value:function(e,t){this.element.addEventListener(e,t,!1)}},{key:"unbind",value:function(e,t){this.element.removeEventListener(e,t,!1)}},{key:"style",value:function(e,t){if("string"==typeof e)this.element.style[e]=t;else for(var n in e)e.hasOwnProperty(n)&&(this.element.style[n]=e[n])}},{key:"addClass",value:function(e){t(this.element,"add",e)}},{key:"removeClass",value:function(e){t(this.element,"remove",e)}},{key:"html",value:function(e){if(!e)return i(this.element,"innerHTML");n(this.element,"innerHTML",e)}},{key:"scrollTop",value:function(e){if(!e)return i(this.element,"scrollTop");n(this.element,"scrollTop",e)}},{key:"offsetWidth",value:function(){return this.element.offsetWidth}}]),e}(),C=function(e){function t(e,n){m(this,t);var i=b(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,f.qs(e.body)));return i.name=e.name,i.side=e.side,i.speed=e.speed,i.timing=e.timing,i.displace=e.displace,i.menuWidth=n,i}return y(t,g),v(t,[{key:"prepare",value:function(e){var t="open"===e?"hidden":"";if(o(this.element)){var n=new g(f.qs("html")),i=n.scrollTop();n.style("overflowX",t),n.scrollTop(i)}}},{key:"unprepare",value:function(){if(o(this.element)){new g(f.qs("html")).style("overflowX","")}}},{key:"move",value:function(e){this.addClass("sidr-animating"),"open"===e?this.open():this.close()}},{key:"open",value:function(){var e=this;if(this.displace){var t=f.transitions,n={width:this.offsetWidth()+"px",position:"absolute"};this.style(this.side,"0"),this.style(t.cssProperty,this.side+" "+this.speed/1e3+"s "+this.timing),this.style(n),setTimeout(function(){return e.style(e.side,e.menuWidth+"px")},1)}}},{key:"onClose",value:function(){var e=f.transitions,t={width:"",position:"",right:"",left:""};t[e.cssProperty]="",this.style(t),this.unbind(e.event,this.temporalCallback)}},{key:"close",value:function(){if(this.displace){var e=f.transitions;this.style(this.side,0);var t=this;this.temporalCallback=function(){t.onClose()},this.bind(e.event,this.temporalCallback)}}},{key:"removeAnimationClass",value:function(){this.removeClass("sidr-animating")}},{key:"removeOpenClass",value:function(){this.removeClass(s(this.name))}},{key:"addOpenClass",value:function(){this.addClass(s(this.name))}}]),t}(),k={moving:!1,opened:!1},O=function(e){function t(e){m(this,t);var n=b(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,f.id(e.name)));return n.name=e.name,n.speed=e.speed,n.side=e.side,n.displace=e.displace,n.source=e.source,n.timing=e.timing,n.method=e.method,n.renaming=e.renaming,n.onOpenCallback=e.onOpen,n.onCloseCallback=e.onClose,n.onOpenEndCallback=e.onOpenEnd,n.onCloseEndCallback=e.onCloseEnd,n.init(e),n}return y(t,g),v(t,[{key:"init",value:function(e){this.element||(this.element=f.createElement(this.name)),this.style(f.transitions.cssProperty,this.side+" "+this.speed/1e3+"s "+this.timing),this.addClass("sidr sidr-"+this.side),this.body=new C(e,this.offsetWidth()),this.reload()}},{key:"reload",value:function(){var e=this;if("function"==typeof this.source){var t=this.source(name);this.html(t)}else if("string"==typeof this.source&&d(this.source))p(this.source,function(t){e.html(t)});else if("string"==typeof this.source){var n=f.getHTMLContent(this.source);this.renaming&&(n=f.addPrefixes(n)),this.html(n)}else null!==this.source&&console.error("Invalid Sidr Source")}},{key:"move",value:function(e,t){k.moving=!0,this.body.prepare(e),this.body.move(e),this.moveMenu(e,t)}},{key:"open",value:function(e){var t=this;if(k.opened!==this.name&&!k.moving)if(!1===k.opened)this.move("open",e),this.onOpenCallback();else{c(k.opened).close(function(){t.open(e)})}}},{key:"close",value:function(e){k.opened!==this.name||k.moving||(this.move("close",e),this.onCloseCallback())}},{key:"toggle",value:function(e){k.opened===this.name?this.close(e):this.open(e)}},{key:"onOpenMenu",value:function(e){var t=this.name;k.moving=!1,k.opened=t,this.unbind(f.transitions.event,this.temporalOpenMenuCallback),this.body.removeAnimationClass(),this.body.addOpenClass(),this.onOpenEndCallback(),"function"==typeof e&&e(t)}},{key:"openMenu",value:function(e){var t=this;this.style(this.side,0),this.temporalOpenMenuCallback=function(){t.onOpenMenu(e)},this.bind(f.transitions.event,this.temporalOpenMenuCallback)}},{key:"onCloseMenu",value:function(e){this.unbind(f.transitions.event,this.temporalCloseMenuCallback),this.style({left:"",right:""}),this.body.unprepare(),k.moving=!1,k.opened=!1,this.body.removeAnimationClass(),this.body.removeOpenClass(),this.onCloseEndCallback(),"function"==typeof e&&e(name)}},{key:"closeMenu",value:function(e){var t=this;this.style(this.side,""),this.temporalCloseMenuCallback=function(){t.onCloseMenu(e)},this.bind(f.transitions.event,this.temporalCloseMenuCallback)}},{key:"moveMenu",value:function(e,t){"open"===e?this.openMenu(t):this.closeMenu(t)}}]),t}(),w=function(e){return function(t,n){"function"==typeof t?(n=t,t="sidr"):t||(t="sidr");c(t)[e](n)}},M={},E=["open","close","toggle","reload"],_=0;_<E.length;_++){var T=E[_];M[T]=w(T)}var A=function(e){function t(e,n){m(this,t);var i=b(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return i.init(n),i}return y(t,g),v(t,[{key:"init",value:function(e){if(!this.element.getAttribute("data-sidr")){var t=e.name,n=e.method,i=e.bind;this.element.setAttribute("data-sidr",t),this.bind(i,function(e){e.preventDefault(),r(n,t)})}}}]),t}(),P={new:function(e,t){var n=h(a,t),i=f.qsa(e);u(n.name,new O(n));for(var o=0;o<i.length;o++)new A(i[o],n)},status:function(){return r.apply(void 0,["status"].concat(Array.prototype.slice.call(arguments)))},reload:function(){return r.apply(void 0,["reload"].concat(Array.prototype.slice.call(arguments)))},close:function(){return r.apply(void 0,["close"].concat(Array.prototype.slice.call(arguments)))},open:function(){return r.apply(void 0,["open"].concat(Array.prototype.slice.call(arguments)))},toggle:function(){return r.apply(void 0,["toggle"].concat(Array.prototype.slice.call(arguments)))}};window.sidr=P}();
5 | 


--------------------------------------------------------------------------------
/dist/stylesheets/sidr.bare.css:
--------------------------------------------------------------------------------
 1 | .sidr {
 2 |     display: block;
 3 |     position: fixed;
 4 |     top: 0;
 5 |     height: 100%;
 6 |     z-index: 999999;
 7 |     width: 260px;
 8 |     overflow-x: hidden;
 9 |     overflow-y: auto
10 | }
11 | .sidr.sidr-right {
12 |     left: auto;
13 |     right: -260px;
14 | }
15 | .sidr.sidr-left {
16 |     left: -260px;
17 |     right: auto;
18 | }
19 | 


--------------------------------------------------------------------------------
/dist/stylesheets/sidr.bare.min.css:
--------------------------------------------------------------------------------
1 | .sidr{display:block;position:fixed;top:0;height:100%;z-index:1;width:260px;overflow-x:hidden;overflow-y:auto}.sidr.sidr-right{left:auto;right:-260px}.sidr.sidr-left{left:-260px;right:auto}


--------------------------------------------------------------------------------
/dist/stylesheets/sidr.dark.css:
--------------------------------------------------------------------------------
  1 | .sidr {
  2 |     /* Default Settings */
  3 |     display: block;
  4 |     position: fixed;
  5 |     top: 0;
  6 |     height: 100%;
  7 |     z-index: 999999;
  8 |     width: 260px;
  9 |     overflow-x: hidden;
 10 |     overflow-y: auto
 11 | }
 12 | .sidr .sidr-inner {
 13 |     padding: 0 0 15px
 14 | }
 15 | .sidr .sidr-inner > p {
 16 |     margin-left: 15px;
 17 |     margin-right: 15px;
 18 | }
 19 | .sidr.sidr-right {
 20 |     left: auto;
 21 |     right: -260px;
 22 | }
 23 | .sidr.sidr-left {
 24 |     left: -260px;
 25 |     right: auto;
 26 | }
 27 | .sidr {
 28 |     /* Theme Settings */
 29 |     font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
 30 |     font-size: 15px;
 31 |     background: #333;
 32 |     color: #fff;
 33 |     -webkit-box-shadow: 0 0 5px 5px #222 inset;
 34 |             box-shadow: 0 0 5px 5px #222 inset
 35 | }
 36 | .sidr h1,
 37 |     .sidr h2,
 38 |     .sidr h3,
 39 |     .sidr h4,
 40 |     .sidr h5,
 41 |     .sidr h6 {
 42 |     font-size: 15px - 4;
 43 |     font-weight: normal;
 44 |     padding: 0 15px;
 45 |     margin: 0 0 5px;
 46 |     color: #fff;
 47 |     line-height: 24px;
 48 |     -webkit-box-shadow: 0 5px 5px 3px rgba(#000, .2);
 49 |             box-shadow: 0 5px 5px 3px rgba(#000, .2);
 50 | }
 51 | .sidr p {
 52 |     font-size: 15px - 2;
 53 |     margin: 0 0 12px
 54 | }
 55 | .sidr p a {
 56 |     color: rgba(#fff, .9);
 57 | }
 58 | .sidr > p {
 59 |     margin-left: 15px;
 60 |     margin-right: 15px;
 61 | }
 62 | .sidr ul {
 63 |     display: block;
 64 |     margin: 0 0 15px;
 65 |     padding: 0;
 66 |     border-top: 1px solid darken(#333, 10%);
 67 |     border-bottom: 1px solid lighten(#333, 10%)
 68 | }
 69 | .sidr ul li {
 70 |     display: block;
 71 |     margin: 0;
 72 |     line-height: 48px;
 73 |     border-top: 1px solid lighten(#333, 10%);
 74 |     border-bottom: 1px solid darken(#333, 10%)
 75 | }
 76 | .sidr ul li:hover,
 77 |             .sidr ul li.active,
 78 |             .sidr ul li.sidr-class-active {
 79 |     border-top: 0;
 80 |     line-height: 49px
 81 | }
 82 | .sidr ul li:hover > a,
 83 |                 .sidr ul li:hover > span,
 84 |                 .sidr ul li.active > a,
 85 |                 .sidr ul li.active > span,
 86 |                 .sidr ul li.sidr-class-active > a,
 87 |                 .sidr ul li.sidr-class-active > span {
 88 |     -webkit-box-shadow: 0 0 15px 3px #222 inset;
 89 |             box-shadow: 0 0 15px 3px #222 inset;
 90 | }
 91 | .sidr ul li a,
 92 |             .sidr ul li span {
 93 |     padding: 0 15px;
 94 |     display: block;
 95 |     text-decoration: none;
 96 |     color: #fff;
 97 | }
 98 | .sidr ul li ul {
 99 |     border-bottom: 0;
100 |     margin: 0
101 | }
102 | .sidr ul li ul li {
103 |     line-height: 40px;
104 |     font-size: 15px - 2
105 | }
106 | .sidr ul li ul li:last-child {
107 |     border-bottom: 0;
108 | }
109 | .sidr ul li ul li:hover,
110 |                     .sidr ul li ul li.active,
111 |                     .sidr ul li ul li.sidr-class-active {
112 |     border-top: 0;
113 |     line-height: 41px
114 | }
115 | .sidr ul li ul li:hover > a,
116 |                         .sidr ul li ul li:hover > span,
117 |                         .sidr ul li ul li.active > a,
118 |                         .sidr ul li ul li.active > span,
119 |                         .sidr ul li ul li.sidr-class-active > a,
120 |                         .sidr ul li ul li.sidr-class-active > span {
121 |     -webkit-box-shadow: 0 0 15px 3px #222 inset;
122 |             box-shadow: 0 0 15px 3px #222 inset;
123 | }
124 | .sidr ul li ul li a,
125 |                     .sidr ul li ul li span {
126 |     color: rgba(#fff, .8);
127 |     padding-left: 30px;
128 | }
129 | .sidr form {
130 |     margin: 0 15px;
131 | }
132 | .sidr label {
133 |     font-size: 15px - 2;
134 | }
135 | .sidr input[type="text"],
136 |     .sidr input[type="password"],
137 |     .sidr input[type="date"],
138 |     .sidr input[type="datetime"],
139 |     .sidr input[type="email"],
140 |     .sidr input[type="number"],
141 |     .sidr input[type="search"],
142 |     .sidr input[type="tel"],
143 |     .sidr input[type="time"],
144 |     .sidr input[type="url"],
145 |     .sidr textarea,
146 |     .sidr select {
147 |     width: 100%;
148 |     font-size: 15px - 2;
149 |     padding: 5px;
150 |     -webkit-box-sizing: border-box;
151 |             box-sizing: border-box;
152 |     margin: 0 0 10px;
153 |     border-radius: 2px;
154 |     border: 0;
155 |     background: rgba(#000, .1);
156 |     color: rgba(#fff, .6);
157 |     display: block;
158 |     clear: both;
159 | }
160 | .sidr input[type=checkbox] {
161 |     width: auto;
162 |     display: inline;
163 |     clear: none;
164 | }
165 | .sidr input[type=button],
166 |     .sidr input[type=submit] {
167 |     color: #333;
168 |     background: #fff
169 | }
170 | .sidr input[type=button]:hover, .sidr input[type=submit]:hover {
171 |     background: rgba(#fff, .9);
172 | }
173 | 


--------------------------------------------------------------------------------
/dist/stylesheets/sidr.dark.min.css:
--------------------------------------------------------------------------------
1 | .sidr{display:block;position:fixed;top:0;height:100%;z-index:1;width:260px;overflow-x:hidden;overflow-y:auto}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.sidr-right{left:auto;right:-260px}.sidr.sidr-left{left:-260px;right:auto}.sidr{font-family:lucida grande,tahoma,verdana,arial,sans-serif;font-size:15px;background:#333;color:#fff;box-shadow:inset 0 0 5px 5px #222}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:15px - 4;font-weight:400;padding:0 15px;margin:0 0 5px;color:#fff;line-height:24px;box-shadow:0 5px 5px 3px rgba(#000,.2)}.sidr p{font-size:15px - 2;margin:0 0 12px}.sidr p a{color:rgba(#fff,.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid darken(#333,10%);border-bottom:1px solid lighten(#333,10%)}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid lighten(#333,10%);border-bottom:1px solid darken(#333,10%)}.sidr ul li.active,.sidr ul li.sidr-class-active,.sidr ul li:hover{border-top:0;line-height:49px}.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span,.sidr ul li:hover>a,.sidr ul li:hover>span{box-shadow:inset 0 0 15px 3px #222}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}.sidr ul li ul{border-bottom:0;margin:0}.sidr ul li ul li{line-height:40px;font-size:15px - 2}.sidr ul li ul li:last-child{border-bottom:0}.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active,.sidr ul li ul li:hover{border-top:0;line-height:41px}.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span,.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span{box-shadow:inset 0 0 15px 3px #222}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(#fff,.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:15px - 2}.sidr input[type=date],.sidr input[type=datetime],.sidr input[type=email],.sidr input[type=number],.sidr input[type=password],.sidr input[type=search],.sidr input[type=tel],.sidr input[type=text],.sidr input[type=time],.sidr input[type=url],.sidr select,.sidr textarea{width:100%;font-size:15px - 2;padding:5px;box-sizing:border-box;margin:0 0 10px;border-radius:2px;border:0;background:rgba(#000,.1);color:rgba(#fff,.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(#fff,.9)}


--------------------------------------------------------------------------------
/dist/stylesheets/sidr.light.css:
--------------------------------------------------------------------------------
  1 | .sidr {
  2 |     /* Default Settings */
  3 |     display: block;
  4 |     position: fixed;
  5 |     top: 0;
  6 |     height: 100%;
  7 |     z-index: 999999;
  8 |     width: 260px;
  9 |     overflow-x: hidden;
 10 |     overflow-y: auto
 11 | }
 12 | .sidr .sidr-inner {
 13 |     padding: 0 0 15px
 14 | }
 15 | .sidr .sidr-inner > p {
 16 |     margin-left: 15px;
 17 |     margin-right: 15px;
 18 | }
 19 | .sidr.sidr-right {
 20 |     left: auto;
 21 |     right: -260px;
 22 | }
 23 | .sidr.sidr-left {
 24 |     left: -260px;
 25 |     right: auto;
 26 | }
 27 | .sidr {
 28 |     /* Theme Settings */
 29 |     font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
 30 |     font-size: 15px;
 31 |     background: #f8f8f8;
 32 |     color: #333;
 33 |     -webkit-box-shadow: 0 0 5px 5px #ebebeb inset;
 34 |             box-shadow: 0 0 5px 5px #ebebeb inset
 35 | }
 36 | .sidr h1,
 37 |     .sidr h2,
 38 |     .sidr h3,
 39 |     .sidr h4,
 40 |     .sidr h5,
 41 |     .sidr h6 {
 42 |     font-size: 15px - 4;
 43 |     font-weight: normal;
 44 |     padding: 0 15px;
 45 |     margin: 0 0 5px;
 46 |     color: #333;
 47 |     line-height: 24px;
 48 |     -webkit-box-shadow: 0 5px 5px 3px rgba(#000, .2);
 49 |             box-shadow: 0 5px 5px 3px rgba(#000, .2);
 50 | }
 51 | .sidr p {
 52 |     font-size: 15px - 2;
 53 |     margin: 0 0 12px
 54 | }
 55 | .sidr p a {
 56 |     color: rgba(#333, .9);
 57 | }
 58 | .sidr > p {
 59 |     margin-left: 15px;
 60 |     margin-right: 15px;
 61 | }
 62 | .sidr ul {
 63 |     display: block;
 64 |     margin: 0 0 15px;
 65 |     padding: 0;
 66 |     border-top: 1px solid darken(#f8f8f8, 10%);
 67 |     border-bottom: 1px solid lighten(#f8f8f8, 10%)
 68 | }
 69 | .sidr ul li {
 70 |     display: block;
 71 |     margin: 0;
 72 |     line-height: 48px;
 73 |     border-top: 1px solid lighten(#f8f8f8, 10%);
 74 |     border-bottom: 1px solid darken(#f8f8f8, 10%)
 75 | }
 76 | .sidr ul li:hover,
 77 |             .sidr ul li.active,
 78 |             .sidr ul li.sidr-class-active {
 79 |     border-top: 0;
 80 |     line-height: 49px
 81 | }
 82 | .sidr ul li:hover > a,
 83 |                 .sidr ul li:hover > span,
 84 |                 .sidr ul li.active > a,
 85 |                 .sidr ul li.active > span,
 86 |                 .sidr ul li.sidr-class-active > a,
 87 |                 .sidr ul li.sidr-class-active > span {
 88 |     -webkit-box-shadow: 0 0 15px 3px #ebebeb inset;
 89 |             box-shadow: 0 0 15px 3px #ebebeb inset;
 90 | }
 91 | .sidr ul li a,
 92 |             .sidr ul li span {
 93 |     padding: 0 15px;
 94 |     display: block;
 95 |     text-decoration: none;
 96 |     color: #333;
 97 | }
 98 | .sidr ul li ul {
 99 |     border-bottom: 0;
100 |     margin: 0
101 | }
102 | .sidr ul li ul li {
103 |     line-height: 40px;
104 |     font-size: 15px - 2
105 | }
106 | .sidr ul li ul li:last-child {
107 |     border-bottom: 0;
108 | }
109 | .sidr ul li ul li:hover,
110 |                     .sidr ul li ul li.active,
111 |                     .sidr ul li ul li.sidr-class-active {
112 |     border-top: 0;
113 |     line-height: 41px
114 | }
115 | .sidr ul li ul li:hover > a,
116 |                         .sidr ul li ul li:hover > span,
117 |                         .sidr ul li ul li.active > a,
118 |                         .sidr ul li ul li.active > span,
119 |                         .sidr ul li ul li.sidr-class-active > a,
120 |                         .sidr ul li ul li.sidr-class-active > span {
121 |     -webkit-box-shadow: 0 0 15px 3px #ebebeb inset;
122 |             box-shadow: 0 0 15px 3px #ebebeb inset;
123 | }
124 | .sidr ul li ul li a,
125 |                     .sidr ul li ul li span {
126 |     color: rgba(#333, .8);
127 |     padding-left: 30px;
128 | }
129 | .sidr form {
130 |     margin: 0 15px;
131 | }
132 | .sidr label {
133 |     font-size: 15px - 2;
134 | }
135 | .sidr input[type="text"],
136 |     .sidr input[type="password"],
137 |     .sidr input[type="date"],
138 |     .sidr input[type="datetime"],
139 |     .sidr input[type="email"],
140 |     .sidr input[type="number"],
141 |     .sidr input[type="search"],
142 |     .sidr input[type="tel"],
143 |     .sidr input[type="time"],
144 |     .sidr input[type="url"],
145 |     .sidr textarea,
146 |     .sidr select {
147 |     width: 100%;
148 |     font-size: 15px - 2;
149 |     padding: 5px;
150 |     -webkit-box-sizing: border-box;
151 |             box-sizing: border-box;
152 |     margin: 0 0 10px;
153 |     border-radius: 2px;
154 |     border: 0;
155 |     background: rgba(#000, .1);
156 |     color: rgba(#333, .6);
157 |     display: block;
158 |     clear: both;
159 | }
160 | .sidr input[type=checkbox] {
161 |     width: auto;
162 |     display: inline;
163 |     clear: none;
164 | }
165 | .sidr input[type=button],
166 |     .sidr input[type=submit] {
167 |     color: #f8f8f8;
168 |     background: #333
169 | }
170 | .sidr input[type=button]:hover, .sidr input[type=submit]:hover {
171 |     background: rgba(#333, .9);
172 | }
173 | 


--------------------------------------------------------------------------------
/dist/stylesheets/sidr.light.min.css:
--------------------------------------------------------------------------------
1 | .sidr{display:block;position:fixed;top:0;height:100%;z-index:1;width:260px;overflow-x:hidden;overflow-y:auto}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.sidr-right{left:auto;right:-260px}.sidr.sidr-left{left:-260px;right:auto}.sidr{font-family:lucida grande,tahoma,verdana,arial,sans-serif;font-size:15px;background:#f8f8f8;color:#333;box-shadow:inset 0 0 5px 5px #ebebeb}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:15px - 4;font-weight:400;padding:0 15px;margin:0 0 5px;color:#333;line-height:24px;box-shadow:0 5px 5px 3px rgba(#000,.2)}.sidr p{font-size:15px - 2;margin:0 0 12px}.sidr p a{color:rgba(#333,.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid darken(#f8f8f8,10%);border-bottom:1px solid lighten(#f8f8f8,10%)}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid lighten(#f8f8f8,10%);border-bottom:1px solid darken(#f8f8f8,10%)}.sidr ul li.active,.sidr ul li.sidr-class-active,.sidr ul li:hover{border-top:0;line-height:49px}.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span,.sidr ul li:hover>a,.sidr ul li:hover>span{box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#333}.sidr ul li ul{border-bottom:0;margin:0}.sidr ul li ul li{line-height:40px;font-size:15px - 2}.sidr ul li ul li:last-child{border-bottom:0}.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active,.sidr ul li ul li:hover{border-top:0;line-height:41px}.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span,.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span{box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(#333,.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:15px - 2}.sidr input[type=date],.sidr input[type=datetime],.sidr input[type=email],.sidr input[type=number],.sidr input[type=password],.sidr input[type=search],.sidr input[type=tel],.sidr input[type=text],.sidr input[type=time],.sidr input[type=url],.sidr select,.sidr textarea{width:100%;font-size:15px - 2;padding:5px;box-sizing:border-box;margin:0 0 10px;border-radius:2px;border:0;background:rgba(#000,.1);color:rgba(#333,.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#f8f8f8;background:#333}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(#333,.9)}


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
 1 | # Sidr Examples
 2 | 
 3 | You can see here some dummy examples with different common situations.
 4 | 
 5 | ## Running the examples locally
 6 | 
 7 | Ensure that you have [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. The best way to do it is through [NVM](https://github.com/creationix/nvm).
 8 | 
 9 | 1. Fork and clone the repo.
10 | 1. Run `npm install` to install all dependencies.
11 | 1. Run `grunt serve` to create a local server
12 | 
13 | The browser should open automatically with the sample index.
14 | 
15 | ## Example list
16 | 
17 | - [Simple Menu that closes the menu on window resize](simple-menu.html)
18 | - [No displaced menu that closes when tapping anywhere on the screen or in a menu item](nodisplaced-menu-with-close-options.html)
19 | - [Multiple menus on both sides with different sources](multiple-menus.html)
20 | - [Full Width menu](full-width.html)
21 | - [Menu with anchors instead of links](anchor-menu.html)
22 | - [Menu with multiple callbacks](menu-with-callbacks.html)
23 | - [Menu with fastclick disabled](only-click.html)
24 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div class="wrapper">
16 |       <h1>Sidr Examples</h1>
17 | 
18 |       <ul>
19 |         <li><a href="vanilla/">Examples with vanilla JS</a></li>
20 |         <li><a href="jquery/">Examples with jQuery</a></li>
21 |       </ul>
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/examples/jquery/anchor-menu.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Anchor Menu - Sidr Example</title>
  8 |     <!-- Include Sidr bundled CSS theme -->
  9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
 10 |     <!-- Your CSS -->
 11 |     <link rel="stylesheet" href="../style.css">
 12 |   </head>
 13 |   <body>
 14 | 
 15 |     <div id="sidr">
 16 |       <ul>
 17 |           <li><a href="index.html">All Examples</a></li>
 18 |           <li><a class="smooth" href="#header1">Header 1</a></li>
 19 |           <li><a class="smooth" href="#header2">Header 2</a></li>
 20 |           <li><a class="smooth" href="#header3">Header 3</a></li>
 21 |           <li><a class="smooth" href="#header4">Header 4</a></li>
 22 |       </ul>
 23 |     </div>
 24 | 
 25 |     <a id="simple-menu" class="menu-button fixed" href="#sidr">Toggle menu</a>
 26 | 
 27 |     <div class="wrapper">
 28 |       <h1 id="header1">Sidr Anchor Menu Example</h1>
 29 | 
 30 | 
 31 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 32 | 
 33 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 34 | 
 35 |       <h2 id="header2">Header 2</h2>
 36 | 
 37 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 38 | 
 39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 40 | 
 41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 42 | 
 43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 44 | 
 45 |       <h2 id="header3">Header 3</h2>
 46 | 
 47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 48 | 
 49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 50 | 
 51 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 52 | 
 53 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 54 | 
 55 |       <h2 id="header4">Header 4</h2>
 56 | 
 57 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 58 | 
 59 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 60 | 
 61 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 62 | 
 63 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 64 |     </div>
 65 | 
 66 |     <!-- Include jQuery -->
 67 |     <script src="../../dist/vendor/jquery.js"></script>
 68 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
 69 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
 70 |     <!-- Include the Sidr JS -->
 71 |     <script src="../../dist/jquery.sidr.js"></script>
 72 | 
 73 |     <!-- Your code -->
 74 |     <script>
 75 | 
 76 |     $(document).ready(function () {
 77 |       $('#simple-menu').sidr({
 78 |         timing: 'ease-in-out',
 79 |         speed: 500
 80 |       });
 81 |     });
 82 | 
 83 |     $( window ).resize(function () {
 84 |       $.sidr('close', 'sidr');
 85 |     });
 86 | 
 87 |     $('.smooth').click(function () {
 88 |       var target = $(this.hash);
 89 | 
 90 |       $.sidr('close', 'sidr');
 91 |       $('html,body').animate({
 92 |         scrollTop: target.offset().top
 93 |       }, 700);
 94 |     });
 95 | 
 96 |     </script>
 97 | 
 98 |   </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/examples/jquery/full-width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Full Width- Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr" class="fullwidth">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |       <ul>
33 |         <li><a id="close-menu-button" href="#">Close menu</a></li>
34 |       </ul>
35 |     </div>
36 | 
37 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
38 | 
39 |     <div class="wrapper">
40 |       <h1>Sidr Full Width Example</h1>
41 | 
42 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
43 | 
44 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
45 | 
46 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
47 | 
48 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
49 | 
50 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
51 | 
52 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
53 |     </div>
54 | 
55 |     <!-- Include jQuery -->
56 |     <script src="../../dist/vendor/jquery.js"></script>
57 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
58 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
59 |     <!-- Include the Sidr JS -->
60 |     <script src="../../dist/jquery.sidr.js"></script>
61 | 
62 |     <!-- Your code -->
63 |     <script>
64 | 
65 |     $(document).ready(function () {
66 |       $('#simple-menu').sidr({
67 |         timing: 'ease-in-out',
68 |         speed: 500
69 |       });
70 |     });
71 | 
72 |     $( window ).resize(function () {
73 |       $.sidr('close', 'sidr');
74 |     });
75 | 
76 |     $('#close-menu-button').click(function () {
77 |       $.sidr('close', 'sidr');
78 |     });
79 | 
80 |     </script>
81 | 
82 |   </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/examples/jquery/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div class="wrapper">
16 |       <h1>Sidr jQuery Examples</h1>
17 | 
18 |       <ul>
19 |         <li><a href="simple-menu.html">Simple Menu that closes the menu on window resize</a></li>
20 |         <li><a href="nodisplaced-menu-with-close-options.html">No displaced menu that closes when tapping anywhere on the screen or in a menu item.</a></li>
21 |         <li><a href="multiple-menus.html">Multiple menus on both sides with different sources.</a></li>
22 |         <li><a href="full-width.html">Full Width menu.</a></li>
23 |         <li><a href="anchor-menu.html">Menu with anchors instead of links.</a></li>
24 |         <li><a href="menu-with-callbacks.html">Menu with multiple callbacks.</a></li>
25 |         <li><a href="only-touch.html">Menu with only touch event.</a></li>
26 |         <li><a href="reload-content.html">Menu that reload contents after creation.</a></li>
27 | 
28 |         <li><a href="../">All examples</a></li>
29 |       </ul>
30 |     </div>
31 | 
32 |     <!-- Include jQuery -->
33 |     <script src="../../dist/vendor/jquery.js"></script>
34 |     <!-- Include the Sidr JS -->
35 |     <script src="../../dist/jquery.sidr.js"></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/examples/jquery/menu-with-callbacks.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Menu with multiple callbacks - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |     </div>
33 | 
34 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
35 | 
36 |     <div class="wrapper">
37 |       <h1>Menu with multiple callbacks</h1>
38 | 
39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
42 | 
43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
44 | 
45 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
46 | 
47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
48 | 
49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
50 |     </div>
51 | 
52 |     <!-- Include jQuery -->
53 |     <script src="../../dist/vendor/jquery.js"></script>
54 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
55 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
56 |     <!-- Include the Sidr JS -->
57 |     <script src="../../dist/jquery.sidr.js"></script>
58 | 
59 |     <!-- Your code -->
60 |     <script>
61 | 
62 |     $(document).ready(function () {
63 |       $('#simple-menu').sidr({
64 |         speed: 700,
65 |         onOpen: function () {
66 |           $('body').css('background', 'red');
67 |         },
68 |         onClose: function () {
69 |           $('body').css('background', 'green');
70 |         },
71 |         onOpenEnd: function () {
72 |           $('body').css('background', 'grey');
73 |         },
74 |         onCloseEnd: function () {
75 |           $('body').css('background', '');
76 |         }
77 |       });
78 |     });
79 | 
80 |     $( window ).resize(function () {
81 |       $.sidr('close', 'sidr');
82 |     });
83 | 
84 |     </script>
85 | 
86 |   </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/examples/jquery/multiple-menus.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Multiple Menus with different sources - Sidr Example</title>
  8 |     <!-- Include Sidr bundled CSS theme -->
  9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
 10 |     <!-- Your CSS -->
 11 |     <link rel="stylesheet" href="../style.css">
 12 |   </head>
 13 |   <body>
 14 | 
 15 |     <nav id="sidr-right-bottom">
 16 |       <h1>Sidr Right Bottom</h1>
 17 |       <ul>
 18 |         <li><a href="index.html">All Examples</a></li>
 19 |         <li class="active"><a href="#">Dummy 2</a></li>
 20 |         <li><a href="#">Dummy 3</a></li>
 21 |       </ul>
 22 |     </nav>
 23 | 
 24 |     <a id="sidr-left-top-button" class="menu-button" href="#sidr-left-top">Toggle menu</a>
 25 |     <a id="sidr-left-bottom-button" class="menu-button bottom" href="#sidr-left-bottom">Toggle menu</a>
 26 |     <a id="sidr-right-top-button" class="menu-button right" href="#sidr-right-top">Toggle menu</a>
 27 |     <a id="sidr-right-bottom-button" class="menu-button bottom right" href="#sidr-right-bottom">Toggle menu</a>
 28 | 
 29 |     <div class="wrapper">
 30 |       <h1>Sidr Multiple Menus with different sources Example</h1>
 31 | 
 32 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 33 | 
 34 |       <nav class="nav-sample">
 35 |         <h4>This content will be inside</h4>
 36 |         <ul class="classSample">
 37 |           <li><a href="index.html">All Examples</a></li>
 38 |           <li class="active"><a href="#">Dummy 2</a></li>
 39 |           <li><a href="#">Dummy 3</a></li>
 40 |         </ul>
 41 |       </nav>
 42 | 
 43 |       <div id="sample2">
 44 |         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 45 | 
 46 |         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 47 |       </div>
 48 | 
 49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 50 | 
 51 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 52 | 
 53 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 54 |     </div>
 55 | 
 56 |     <!-- Include jQuery -->
 57 |     <script src="../../dist/vendor/jquery.js"></script>
 58 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
 59 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
 60 |     <!-- Include the Sidr JS -->
 61 |     <script src="../../dist/jquery.sidr.js"></script>
 62 | 
 63 |     <!-- Your code -->
 64 |     <script>
 65 | 
 66 |     $(document).ready(function () {
 67 |       $('#sidr-left-top-button').sidr({
 68 |         name: 'sidr-left-top',
 69 |         timing: 'ease-in-out',
 70 |         speed: 500,
 71 |         source: '.nav-sample, #sample2'
 72 |       });
 73 | 
 74 |       $('#sidr-left-bottom-button').sidr({
 75 |         name: 'sidr-left-bottom',
 76 |         speed: 300,
 77 |         source: '.nav-sample',
 78 |         renaming: false
 79 |       });
 80 | 
 81 |       $('#sidr-right-top-button').sidr({
 82 |         name: 'sidr-right-top',
 83 |         speed: 800,
 84 |         side: 'right',
 85 |         source: function () {
 86 |           return '<p>This is the Sidr content generated with a callback</p>';
 87 |         }
 88 |       });
 89 | 
 90 |       $('#sidr-right-bottom-button').sidr({
 91 |         name: 'sidr-right-bottom',
 92 |         speed: 400,
 93 |         side: 'right',
 94 |         source: 'http://localhost:9000/examples/remote-content.html'
 95 |       });
 96 |     });
 97 | 
 98 |     $( window ).resize(function () {
 99 |       $.sidr('close', 'sidr-left-top');
100 |       $.sidr('close', 'sidr-left-bottom');
101 |       $.sidr('close', 'sidr-right-top');
102 |       $.sidr('close', 'sidr-right-bottom');
103 |     });
104 | 
105 |     </script>
106 | 
107 |   </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/examples/jquery/nodisplaced-menu-with-close-options.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple No Displaced Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr">
16 |       <ul>
17 |         <li><a href="index.html">All Examples</a></li>
18 |         <li class="active"><a href="#">Dummy 2</a></li>
19 |         <li><a href="#">Dummy 3</a></li>
20 |         <li><a id="close-menu-button" href="#">Close menu</a></li>
21 |       </ul>
22 |     </div>
23 | 
24 |     <div id="overlay"></div>
25 | 
26 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
27 | 
28 |     <div class="wrapper">
29 |       <h1>Sidr Simple No Displaced Menu Example</h1>
30 | 
31 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
32 | 
33 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
34 | 
35 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
36 | 
37 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
38 | 
39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
42 |     </div>
43 | 
44 |     <!-- Include jQuery -->
45 |     <script src="../../dist/vendor/jquery.js"></script>
46 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
47 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
48 |     <!-- Include the Sidr JS -->
49 |     <script src="../../dist/jquery.sidr.js"></script>
50 | 
51 |     <!-- Your code -->
52 |     <script>
53 | 
54 |     $(document).ready(function() {
55 |       $('#simple-menu').sidr({
56 |         displace: false
57 |       });
58 |     });
59 | 
60 |     $('#overlay, #close-menu-button').click(function () {
61 |       $.sidr('close', 'sidr');
62 |     });
63 | 
64 |     </script>
65 | 
66 |   </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/examples/jquery/only-touch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Only Click - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="other-name">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |     </div>
33 | 
34 |     <a id="only-click" class="menu-button" href="#sidr">Toggle menu</a>
35 | 
36 |     <div class="wrapper">
37 |       <h1>Sidr Only Touch Example</h1>
38 | 
39 |       <h2>Needs to be tested on a touch device or with the browser dev tools and emulation enabled</h2>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
42 | 
43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
44 | 
45 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
46 | 
47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
48 | 
49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
50 | 
51 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
52 |     </div>
53 | 
54 |     <!-- Include jQuery -->
55 |     <script src="../../dist/vendor/jquery.js"></script>
56 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
57 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
58 |     <!-- Include the Sidr JS -->
59 |     <script src="../../dist/jquery.sidr.js"></script>
60 | 
61 |     <!-- Your code -->
62 |     <script>
63 | 
64 |     $(document).ready(function () {
65 |       $('#only-click').sidr({
66 |         name: 'other-name',
67 |         bind: 'touchstart',
68 |         onOpen: function () {
69 |           console.log($.sidr('status'));
70 |         },
71 |         onClose: function () {
72 |           console.log($.sidr('status'));
73 |         },
74 |         onOpenEnd: function () {
75 |           console.log($.sidr('status'));
76 |         },
77 |         onCloseEnd: function () {
78 |           console.log($.sidr('status'));
79 |         }
80 |       });
81 |     });
82 | 
83 |     $( window ).resize(function () {
84 |       $.sidr('close', 'other-name');
85 |     });
86 | 
87 |     </script>
88 | 
89 |   </body>
90 | </html>
91 | 


--------------------------------------------------------------------------------
/examples/jquery/reload-content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
16 | 
17 |     <div class="wrapper">
18 |       <h1>Reload Content Example</h1>
19 | 
20 |       <p>This will be the menu content:</p>
21 |       <div class="sample-content">
22 |         <ul>
23 |             <li><a href="index.html">All Examples</a></li>
24 |             <li><a id="link1" href="index.html">Random Link 1</a></li>
25 |             <li><a id="link2" href="index.html">Random Link 2</a></li>
26 |             <li><a id="link3" href="index.html">Random Link 3</a></li>
27 |         </ul>
28 | 
29 |         <p></p>
30 |       </div>
31 | 
32 |       <p>Click this button to change above content and look how it changes also the menu content:</p>
33 | 
34 |       <button id="content-changer">Change content</button>
35 |     </div>
36 | 
37 |     <script src="../../dist/vendor/jquery.js"></script>
38 |     <!-- Try it also with jQuery 1.x or other version from the CDN -->
39 |     <!-- <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> -->
40 |     <!-- Include the Sidr JS -->
41 |     <script src="../../dist/jquery.sidr.js"></script>
42 | 
43 |     <!-- Your code -->
44 |     <script>
45 |       (function(sidr) {
46 |         "use strict"
47 | 
48 |         $('#simple-menu').sidr({
49 |           name: 'changing-menu',
50 |           timing: 'ease-in-out',
51 |           speed: 500,
52 |           source: '.sample-content'
53 |         });
54 | 
55 |         window.onresize = function() {
56 |           $.sidr('close', 'changing-menu');
57 |         };
58 | 
59 |         document.getElementById('content-changer').addEventListener('click', function () {
60 |           document.getElementById('link1').innerHTML = randomWord()
61 |           document.getElementById('link2').innerHTML = randomWord()
62 |           document.getElementById('link3').innerHTML = randomWord()
63 |           $.sidr('reload', 'changing-menu');
64 |         }, false)
65 | 
66 |         function randomWord() {
67 |           var things = ['Rock', 'Paper', 'Scissor', 'Piedra', 'Papel', 'Tijera'];
68 |           return things[Math.floor(Math.random()*things.length)];
69 |         }
70 | 
71 |       })(window.sidr);
72 |     </script>
73 | 
74 |   </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/examples/jquery/simple-menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |     </div>
33 | 
34 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
35 | 
36 |     <div class="wrapper">
37 |       <h1>Sidr Simple Menu Example</h1>
38 | 
39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
42 | 
43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
44 | 
45 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
46 | 
47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
48 | 
49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
50 |     </div>
51 | 
52 |     <!-- Include jQuery -->
53 |     <script src="../../dist/vendor/jquery.js"></script>
54 |     <!-- Include the Sidr JS -->
55 |     <script src="../../dist/jquery.sidr.js"></script>
56 | 
57 |     <!-- Your code -->
58 |     <script>
59 | 
60 |     $(document).ready(function () {
61 |       $('#simple-menu').sidr({
62 |         timing: 'ease-in-out',
63 |         speed: 500
64 |       });
65 |     });
66 | 
67 |     $( window ).resize(function () {
68 |       $.sidr('close', 'sidr');
69 |     });
70 | 
71 |     </script>
72 | 
73 |   </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/examples/menu.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/artberri/sidr/ecffa98ea5d579542c1f826639efbf12c1dc69e6/examples/menu.gif


--------------------------------------------------------------------------------
/examples/remote-content.html:
--------------------------------------------------------------------------------
1 | <p>This is content loaded remotelly</p>
2 | 


--------------------------------------------------------------------------------
/examples/style.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html, body, div, span, applet, object, iframe,
  7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  8 | a, abbr, acronym, address, big, cite, code,
  9 | del, dfn, em, img, ins, kbd, q, s, samp,
 10 | small, strike, strong, sub, sup, tt, var,
 11 | b, u, i, center,
 12 | dl, dt, dd, ol, ul, li,
 13 | fieldset, form, label, legend,
 14 | table, caption, tbody, tfoot, thead, tr, th, td,
 15 | article, aside, canvas, details, embed,
 16 | figure, figcaption, footer, header, hgroup,
 17 | menu, nav, output, ruby, section, summary,
 18 | time, mark, audio, video {
 19 |     margin: 0;
 20 |     padding: 0;
 21 |     border: 0;
 22 |     font-size: 100%;
 23 |     font: inherit;
 24 |     vertical-align: baseline;
 25 | }
 26 | /* HTML5 display-role reset for older browsers */
 27 | article, aside, details, figcaption, figure,
 28 | footer, header, hgroup, menu, nav, section {
 29 |     display: block;
 30 | }
 31 | body {
 32 |     line-height: 1;
 33 | }
 34 | ol, ul {
 35 |     list-style: none;
 36 | }
 37 | blockquote, q {
 38 |     quotes: none;
 39 | }
 40 | blockquote:before, blockquote:after,
 41 | q:before, q:after {
 42 |     content: '';
 43 |     content: none;
 44 | }
 45 | table {
 46 |     border-collapse: collapse;
 47 |     border-spacing: 0;
 48 | }
 49 | 
 50 | body {
 51 |     font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
 52 |     color: #666;
 53 |     line-height: 1.5em;
 54 | }
 55 | 
 56 | .wrapper {
 57 |     max-width: 800px;
 58 |     margin: auto;
 59 |     padding: 80px 20px 30px;
 60 | }
 61 | 
 62 | h1 {
 63 |     text-align: center;
 64 |     font-size: 32px;
 65 |     color: #444;
 66 |     margin-bottom: 30px;
 67 |     line-height: 1.5em;
 68 | }
 69 | 
 70 | h2 {
 71 |     font-size: 24px;
 72 |     color: #444;
 73 |     margin-bottom: 20px;
 74 |     line-height: 1.5em;
 75 | }
 76 | 
 77 | p {
 78 |     font-size: 16px;
 79 |     margin-bottom: 20px;
 80 | }
 81 | 
 82 | ul li {
 83 |   list-style-type: square;
 84 | }
 85 | 
 86 | .menu-button {
 87 |     display: block;
 88 |     position: absolute;
 89 |     top: 20px;
 90 |     left: 20px;
 91 |     background: url(menu.gif) no-repeat;
 92 |     overflow: hidden;
 93 |     width: 34px;
 94 |     height: 31px;
 95 |     text-indent: -9999px;
 96 | }
 97 | 
 98 | .menu-button.right {
 99 |     right: 20px;
100 |     left: auto;
101 | }
102 | 
103 | .menu-button.bottom {
104 |     top: 100px;
105 | }
106 | 
107 | .menu-button.fixed {
108 |     position: fixed;
109 | }
110 | 
111 | #overlay {
112 |     position: absolute;
113 |     position: fixed;
114 |     top: 0;
115 |     left: 0;
116 |     bottom: 0;
117 |     right: 0;
118 |     width: 100%;
119 |     height: 100%;
120 |     background: transparent;
121 |     z-index: 999998;
122 |     display: none;
123 | }
124 | 
125 | .sidr-open #overlay {
126 |     display: block;
127 | }
128 | 
129 | /* Settings for fullwidth */
130 | .sidr.fullwidth {
131 |     width: 100%;
132 | }
133 | 
134 | .sidr.left.fullwidth {
135 |     left: -100%;
136 | }
137 | 
138 | .sidr.right.fullwidth {
139 |     right: -100%;
140 | }
141 | /* END Settings for fullwidth */
142 | 


--------------------------------------------------------------------------------
/examples/vanilla/anchor-menu.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Anchor Menu - Sidr Example</title>
  8 |     <!-- Include Sidr bundled CSS theme -->
  9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
 10 |     <!-- Your CSS -->
 11 |     <link rel="stylesheet" href="../style.css">
 12 |   </head>
 13 |   <body>
 14 | 
 15 |     <div id="sidr">
 16 |       <ul>
 17 |           <li><a href="index.html">All Examples</a></li>
 18 |           <li><a class="smooth" href="#header1">Header 1</a></li>
 19 |           <li><a class="smooth" href="#header2">Header 2</a></li>
 20 |           <li><a class="smooth" href="#header3">Header 3</a></li>
 21 |           <li><a class="smooth" href="#header4">Header 4</a></li>
 22 |       </ul>
 23 |     </div>
 24 | 
 25 |     <a id="simple-menu" class="menu-button fixed" href="#sidr">Toggle menu</a>
 26 | 
 27 |     <div class="wrapper">
 28 |       <h1 id="header1">Sidr Anchor Menu Example</h1>
 29 | 
 30 | 
 31 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 32 | 
 33 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 34 | 
 35 |       <h2 id="header2">Header 2</h2>
 36 | 
 37 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 38 | 
 39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 40 | 
 41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 42 | 
 43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 44 | 
 45 |       <h2 id="header3">Header 3</h2>
 46 | 
 47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 48 | 
 49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 50 | 
 51 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 52 | 
 53 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 54 | 
 55 |       <h2 id="header4">Header 4</h2>
 56 | 
 57 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 58 | 
 59 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 60 | 
 61 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 62 | 
 63 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 64 |     </div>
 65 | 
 66 |     <!-- Include the Sidr JS -->
 67 |     <script src="../../dist/sidr.js"></script>
 68 | 
 69 |     <!-- Your code -->
 70 |     <script>
 71 |       (function(sidr) {
 72 |         "use strict"
 73 | 
 74 |         function scrollTo(scrollDuration, target) {
 75 |           var limit = target.offsetTop
 76 |           var scrollStep = (limit - window.scrollY) / (scrollDuration / 15)
 77 |           var previousDelta = 0
 78 |           var scrollInterval = setInterval(function () {
 79 |             var delta = target.offsetTop - window.scrollY
 80 |               if ((scrollStep > 0 && delta > 0 && previousDelta !== delta) || (scrollStep < 0 && delta < 0 && previousDelta !== delta)) {
 81 |                   window.scrollBy( 0, scrollStep );
 82 |                   previousDelta = delta
 83 |               }
 84 |               else clearInterval(scrollInterval);
 85 |           },15);
 86 |         }
 87 | 
 88 |         sidr.new('#simple-menu', {
 89 |           timing: 'ease-in-out',
 90 |           speed: 500
 91 |         });
 92 | 
 93 |         window.onresize = function() {
 94 |           sidr.close('sidr');
 95 |         };
 96 | 
 97 |         var buttons = document.querySelectorAll('.smooth')
 98 |         for (var i = 0; i < buttons.length; i++){
 99 |           buttons[i].addEventListener('click', function (e) {
100 |             e.preventDefault();
101 |             sidr.close('sidr');
102 |             var id = e.target.hash.substr(1)
103 |             var target = document.getElementById(id)
104 |             scrollTo(700, target)
105 |           }, false);
106 |         }
107 | 
108 |       })(window.sidr);
109 | 
110 |     </script>
111 | 
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/examples/vanilla/full-width.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Full Width- Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr" class="fullwidth">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |       <ul>
33 |         <li><a id="close-menu-button" href="#">Close menu</a></li>
34 |       </ul>
35 |     </div>
36 | 
37 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
38 | 
39 |     <div class="wrapper">
40 |       <h1>Sidr Full Width Example</h1>
41 | 
42 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
43 | 
44 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
45 | 
46 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
47 | 
48 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
49 | 
50 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
51 | 
52 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
53 |     </div>
54 | 
55 |     <!-- Include the Sidr JS -->
56 |     <script src="../../dist/sidr.js"></script>
57 | 
58 |     <!-- Your code -->
59 |     <script>
60 |       (function(sidr) {
61 |         "use strict"
62 | 
63 |         sidr.new('#simple-menu', {
64 |           timing: 'ease-in-out',
65 |           speed: 500
66 |         });
67 | 
68 |         window.onresize = function() {
69 |           sidr.close('sidr');
70 |         };
71 | 
72 |         document.getElementById('close-menu-button').addEventListener('click', function () {
73 |           sidr.close('sidr');
74 |         }, false);
75 | 
76 |       })(window.sidr);
77 | 
78 |     </script>
79 | 
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/examples/vanilla/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div class="wrapper">
16 |       <h1>Sidr vanilla JS Examples</h1>
17 | 
18 |       <ul>
19 |         <li><a href="simple-menu.html">Simple Menu that closes the menu on window resize</a></li>
20 |         <li><a href="nodisplaced-menu-with-close-options.html">No displaced menu that closes when tapping anywhere on the screen or in a menu item.</a></li>
21 |         <li><a href="multiple-menus.html">Multiple menus on both sides with different sources.</a></li>
22 |         <li><a href="full-width.html">Full Width menu.</a></li>
23 |         <li><a href="anchor-menu.html">Menu with anchors instead of links.</a></li>
24 |         <li><a href="menu-with-callbacks.html">Menu with multiple callbacks.</a></li>
25 |         <li><a href="reload-content.html">Menu that reload contents after creation.</a></li>
26 | 
27 |         <li><a href="../">All examples</a></li>
28 |       </ul>
29 |     </div>
30 | 
31 |     <!-- Include the Sidr JS -->
32 |     <script src="../../dist/sidr.js"></script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/examples/vanilla/menu-with-callbacks.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Menu with multiple callbacks - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |     </div>
33 | 
34 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
35 | 
36 |     <div class="wrapper">
37 |       <h1>Menu with multiple callbacks</h1>
38 | 
39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
42 | 
43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
44 | 
45 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
46 | 
47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
48 | 
49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
50 |     </div>
51 | 
52 |     <!-- Include the Sidr JS -->
53 |     <script src="../../dist/sidr.js"></script>
54 | 
55 |     <!-- Your code -->
56 |     <script>
57 |       (function(sidr) {
58 |         "use strict"
59 | 
60 |         sidr.new('#simple-menu', {
61 |           speed: 700,
62 |           onOpen: function () {
63 |             document.body.style.background = 'red';
64 |           },
65 |           onClose: function () {
66 |             document.body.style.background = 'green'
67 |           },
68 |           onOpenEnd: function () {
69 |             document.body.style.background = 'grey'
70 |           },
71 |           onCloseEnd: function () {
72 |             document.body.style.background = ''
73 |           }
74 |         });
75 | 
76 |         window.onresize = function() {
77 |           sidr.close('sidr');
78 |         };
79 | 
80 |       })(window.sidr);
81 | 
82 |     </script>
83 | 
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/examples/vanilla/multiple-menus.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Multiple Menus with different sources - Sidr Example</title>
  8 |     <!-- Include Sidr bundled CSS theme -->
  9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
 10 |     <!-- Your CSS -->
 11 |     <link rel="stylesheet" href="../style.css">
 12 |   </head>
 13 |   <body>
 14 | 
 15 |     <nav id="sidr-right-bottom">
 16 |       <h1>Sidr Right Bottom</h1>
 17 |       <ul>
 18 |         <li><a href="index.html">All Examples</a></li>
 19 |         <li class="active"><a href="#">Dummy 2</a></li>
 20 |         <li><a href="#">Dummy 3</a></li>
 21 |       </ul>
 22 |     </nav>
 23 | 
 24 |     <a id="sidr-left-top-button" class="menu-button" href="#sidr-left-top">Toggle menu</a>
 25 |     <a id="sidr-left-bottom-button" class="menu-button bottom" href="#sidr-left-bottom">Toggle menu</a>
 26 |     <a id="sidr-right-top-button" class="menu-button right" href="#sidr-right-top">Toggle menu</a>
 27 |     <a id="sidr-right-bottom-button" class="menu-button bottom right" href="#sidr-right-bottom">Toggle menu</a>
 28 | 
 29 |     <div class="wrapper">
 30 |       <h1>Sidr Multiple Menus with different sources Example</h1>
 31 | 
 32 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 33 | 
 34 |       <nav class="nav-sample">
 35 |         <h4>This content will be inside</h4>
 36 |         <ul id="isSample" class="classSample">
 37 |           <li><a href="index.html">All Examples</a></li>
 38 |           <li class="active"><a href="#">Dummy 2</a></li>
 39 |           <li><a href="#">Dummy 3</a></li>
 40 |         </ul>
 41 |       </nav>
 42 | 
 43 |       <div id="sample2">
 44 |         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 45 | 
 46 |         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 47 |       </div>
 48 | 
 49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 50 | 
 51 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 52 | 
 53 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 54 |     </div>
 55 | 
 56 |     <!-- Include the Sidr JS -->
 57 |     <script src="../../dist/sidr.js"></script>
 58 | 
 59 |     <!-- Your code -->
 60 |     <script>
 61 | 
 62 |       (function(sidr) {
 63 |         "use strict"
 64 | 
 65 |         sidr.new('#sidr-left-top-button', {
 66 |           name: 'sidr-left-top',
 67 |           timing: 'ease-in-out',
 68 |           speed: 500,
 69 |           source: '.nav-sample, #sample2'
 70 |         });
 71 | 
 72 |         sidr.new('#sidr-left-bottom-button', {
 73 |           name: 'sidr-left-bottom',
 74 |           speed: 300,
 75 |           source: '.nav-sample',
 76 |           renaming: false
 77 |         });
 78 | 
 79 |         sidr.new('#sidr-right-top-button', {
 80 |           name: 'sidr-right-top',
 81 |           speed: 800,
 82 |           side: 'right',
 83 |           source: function () {
 84 |             return '<p>This is the Sidr content generated with a callback</p>';
 85 |           }
 86 |         });
 87 | 
 88 |         sidr.new('#sidr-right-bottom-button', {
 89 |           name: 'sidr-right-bottom',
 90 |           speed: 400,
 91 |           side: 'right',
 92 |           source: 'http://localhost:9000/examples/remote-content.html'
 93 |         });
 94 | 
 95 |         window.onresize = function() {
 96 |           sidr.close('sidr-left-top');
 97 |           sidr.close('sidr-left-bottom');
 98 |           sidr.close('sidr-right-top');
 99 |           sidr.close('sidr-right-bottom');
100 |         };
101 | 
102 |       })(window.sidr);
103 | 
104 |     </script>
105 | 
106 |   </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/examples/vanilla/nodisplaced-menu-with-close-options.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple No Displaced Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr">
16 |       <ul>
17 |         <li><a href="index.html">All Examples</a></li>
18 |         <li class="active"><a href="#">Dummy 2</a></li>
19 |         <li><a href="#">Dummy 3</a></li>
20 |         <li><a id="close-menu-button" href="#">Close menu</a></li>
21 |       </ul>
22 |     </div>
23 | 
24 |     <div id="overlay"></div>
25 | 
26 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
27 | 
28 |     <div class="wrapper">
29 |       <h1>Sidr Simple No Displaced Menu Example</h1>
30 | 
31 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
32 | 
33 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
34 | 
35 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
36 | 
37 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
38 | 
39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
42 |     </div>
43 | 
44 |     <!-- Include the Sidr JS -->
45 |     <script src="../../dist/sidr.js"></script>
46 | 
47 |     <!-- Your code -->
48 |     <script>
49 |       (function(sidr) {
50 |         "use strict"
51 | 
52 |         sidr.new('#simple-menu', {
53 |           displace: false
54 |         });
55 | 
56 |         document.getElementById('overlay').addEventListener('click', function () {
57 |           sidr.close('sidr');
58 |         }, false);
59 | 
60 |         document.getElementById('close-menu-button').addEventListener('click', function () {
61 |           sidr.close('sidr');
62 |         }, false);
63 | 
64 |       })(window.sidr);
65 |     </script>
66 | 
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/examples/vanilla/only-touch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Only Touch - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="other-name">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |     </div>
33 | 
34 |     <a id="only-click" class="menu-button" href="#sidr">Toggle menu</a>
35 | 
36 |     <div class="wrapper">
37 |       <h1>Sidr Only Touch Example</h1>
38 | 
39 |       <h2>Needs to be tested on a touch device or with the browser dev tools and emulation enabled</h2>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
42 | 
43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
44 | 
45 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
46 | 
47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
48 | 
49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
50 | 
51 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
52 |     </div>
53 | 
54 |     <!-- Include the Sidr JS -->
55 |     <script src="../../dist/sidr.js"></script>
56 | 
57 |     <!-- Your code -->
58 |     <script>
59 |       (function(sidr) {
60 |         "use strict"
61 | 
62 |         sidr.new('#only-click', {
63 |           name: 'other-name',
64 |           bind: 'touchstart',
65 |           onOpen: function () {
66 |             console.log(sidr.status());
67 |           },
68 |           onClose: function () {
69 |             console.log(sidr.status());
70 |           },
71 |           onOpenEnd: function () {
72 |             console.log(sidr.status());
73 |           },
74 |           onCloseEnd: function () {
75 |             console.log(sidr.status());
76 |           }
77 |         });
78 | 
79 |         window.onresize = function() {
80 |           sidr.close('other-name');
81 |         };
82 | 
83 |       })(window.sidr);
84 | 
85 |     </script>
86 | 
87 |   </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/examples/vanilla/reload-content.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
16 | 
17 |     <div class="wrapper">
18 |       <h1>Reload Content Example</h1>
19 | 
20 |       <p>This will be the menu content:</p>
21 |       <div class="sample-content">
22 |         <ul>
23 |             <li><a href="index.html">All Examples</a></li>
24 |             <li><a id="link1" href="index.html">Random Link 1</a></li>
25 |             <li><a id="link2" href="index.html">Random Link 2</a></li>
26 |             <li><a id="link3" href="index.html">Random Link 3</a></li>
27 |         </ul>
28 | 
29 |         <p></p>
30 |       </div>
31 | 
32 |       <p>Click this button to change above content and look how it changes also the menu content:</p>
33 | 
34 |       <button id="content-changer">Change content</button>
35 |     </div>
36 | 
37 |     <!-- Include the Sidr JS -->
38 |     <script src="../../dist/sidr.js"></script>
39 | 
40 |     <!-- Your code -->
41 |     <script>
42 |       (function(sidr) {
43 |         "use strict"
44 | 
45 |         sidr.new('#simple-menu', {
46 |           name: 'changing-menu',
47 |           timing: 'ease-in-out',
48 |           speed: 500,
49 |           source: '.sample-content'
50 |         });
51 | 
52 |         window.onresize = function() {
53 |           sidr.close('changing-menu');
54 |         };
55 | 
56 |         document.getElementById('content-changer').addEventListener('click', function () {
57 |           document.getElementById('link1').innerHTML = randomWord()
58 |           document.getElementById('link2').innerHTML = randomWord()
59 |           document.getElementById('link3').innerHTML = randomWord()
60 |           sidr.reload('changing-menu');
61 |         }, false)
62 | 
63 |         function randomWord() {
64 |           var things = ['Rock', 'Paper', 'Scissor', 'Piedra', 'Papel', 'Tijera'];
65 |           return things[Math.floor(Math.random()*things.length)];
66 |         }
67 | 
68 |       })(window.sidr);
69 |     </script>
70 | 
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/examples/vanilla/simple-menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Simple Menu - Sidr Example</title>
 8 |     <!-- Include Sidr bundled CSS theme -->
 9 |     <link rel="stylesheet" href="../../dist/stylesheets/sidr.dark.css">
10 |     <!-- Your CSS -->
11 |     <link rel="stylesheet" href="../style.css">
12 |   </head>
13 |   <body>
14 | 
15 |     <div id="sidr">
16 |       <ul>
17 |           <li><a href="index.html">All Examples</a></li>
18 |           <li>
19 |               <a href="#">Sample link 2</a>
20 |               <ul>
21 |                   <li><a href="#">Child link 1</a></li>
22 |                   <li><a href="#">Child link 2</a></li>
23 |               </ul>
24 |           </li>
25 |           <li><a href="#">Sample link 3</a></li>
26 |       </ul>
27 |       <form>
28 |           <input type="text" placeholder="Search..." />
29 |       </form>
30 |       <h2>Sample heading</h2>
31 |       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis sapien non nisi sodales pulvinar. Curabitur odio velit, porta sit amet lobortis sit amet, volutpat ut justo.</p>
32 |     </div>
33 | 
34 |     <a id="simple-menu" class="menu-button" href="#sidr">Toggle menu</a>
35 | 
36 |     <div class="wrapper">
37 |       <h1>Sidr Simple Menu Example</h1>
38 | 
39 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
40 | 
41 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
42 | 
43 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
44 | 
45 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
46 | 
47 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
48 | 
49 |       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
50 |     </div>
51 | 
52 |     <!-- Include the Sidr JS -->
53 |     <script src="../../dist/sidr.js"></script>
54 | 
55 |     <!-- Your code -->
56 |     <script>
57 |       (function(sidr) {
58 |         "use strict"
59 | 
60 |         sidr.new('#simple-menu', {
61 |           timing: 'ease-in-out',
62 |           speed: 500
63 |         });
64 | 
65 |         window.onresize = function() {
66 |           sidr.close('sidr');
67 |         };
68 | 
69 |       })(window.sidr);
70 |     </script>
71 | 
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | /* eslint global-require:0 */
 2 | let babelrc = require('babelrc-rollup').default
 3 | let babel = require('rollup-plugin-babel')
 4 | let istanbul = require('rollup-plugin-istanbul')
 5 | 
 6 | process.env.CHROME_BIN = require('puppeteer').executablePath()
 7 | 
 8 | module.exports = function (config) {
 9 |   config.set({
10 | 
11 |     basePath: './',
12 | 
13 |     frameworks: ['mocha', 'chai', 'sinon-chai', 'jquery-1.8.3'],
14 | 
15 |     files: [
16 |       { pattern: 'spec/**/*.spec.js', watched: false }
17 |     ],
18 | 
19 |     preprocessors: {
20 |       'spec/**/*.spec.js': ['rollup']
21 |     },
22 | 
23 |     reporters: ['mocha', 'coverage'],
24 | 
25 |     port: 9876,
26 |     colors: true,
27 |     autoWatch: false,
28 |     singleRun: true,
29 | 
30 |     // level of logging
31 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
32 |     logLevel: config.LOG_INFO,
33 | 
34 |     browsers: ['ChromeHeadless'],
35 | 
36 |     rollupPreprocessor: {
37 |       plugins: [
38 |         istanbul({
39 |           exclude: ['spec/**/*.spec.js']
40 |         }),
41 |         babel(babelrc())
42 |       ],
43 |       format: 'iife',
44 |       name: 'sidr',
45 |       sourcemap: 'inline'
46 |     },
47 | 
48 |     coverageReporter: {
49 |       dir: 'coverage',
50 |       includeAllSources: true,
51 |       reporters: [
52 |         {'type': 'text'},
53 |         {'type': 'html', subdir: 'html'},
54 |         {'type': 'lcov', subdir: './'}
55 |       ]
56 |     }
57 |   })
58 | }
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "sidr",
  3 |   "description": "jQuery plugin for creating side menus and the easiest way for doing your menu responsive",
  4 |   "version": "3.0.0",
  5 |   "homepage": "http://www.berriart.com/sidr/",
  6 |   "author": {
  7 |     "name": "Alberto Varela",
  8 |     "email": "alberto@berriart.com",
  9 |     "url": "http://www.berriart.com"
 10 |   },
 11 |   "repository": {
 12 |     "type": "git",
 13 |     "url": "https://github.com/artberri/sidr"
 14 |   },
 15 |   "bugs": "https://github.com/artberri/sidr/issues",
 16 |   "license": "MIT",
 17 |   "engines": {
 18 |     "node": ">= 0.6.0"
 19 |   },
 20 |   "scripts": {
 21 |     "clean": "rm -rf dist/* && mkdir -p ./dist",
 22 |     "copy:deps": "mkdir -p ./dist/vendor && cp ./node_modules/jquery/dist/jquery.js ./dist/vendor",
 23 |     "copy:cssmin": "cp dist/stylesheets/sidr.bare.css dist/stylesheets/sidr.bare.min.css && cp dist/stylesheets/sidr.dark.css dist/stylesheets/sidr.dark.min.css && cp dist/stylesheets/sidr.light.css dist/stylesheets/sidr.light.min.css",
 24 |     "test": "karma start",
 25 |     "lint": "eslint 'src/**/*.js' 'spec/**/*.js'",
 26 |     "qa": "npm run lint && npm run test",
 27 |     "css:minify": "cross-env NODE_ENV=minify postcss -c -r dist/stylesheets/*.min.css",
 28 |     "css:compile": "postcss -c -d dist/stylesheets src/css/*.css",
 29 |     "build:js": "rollup -c",
 30 |     "build:css": "npm run css:compile && npm run copy:cssmin && npm run css:minify",
 31 |     "build": "npm run build:css && npm run build:js",
 32 |     "watch:css": "postcss -c -d dist/stylesheets src/css/*.css -w",
 33 |     "watch:js": "rollup -c -w",
 34 |     "watch": "npm run watch:css | npm run watch:js",
 35 |     "serve": "http-server ./ -p 9000 -o http://127.0.0.1:9000/examples/index.html",
 36 |     "dev": "npm run clean && npm run build && npm run copy:deps && (npm run serve | npm run watch)",
 37 |     "dist": "npm run clean && npm run qa && npm run build"
 38 |   },
 39 |   "dependencies": {
 40 |     "jquery": ">1.12.4"
 41 |   },
 42 |   "devDependencies": {
 43 |     "autoprefixer": "^7.2.1",
 44 |     "babel-cli": "^6.26.0",
 45 |     "babel-plugin-external-helpers": "^6.22.0",
 46 |     "babel-preset-env": "^1.6.1",
 47 |     "babelify": "^8.0.0",
 48 |     "babelrc-rollup": "^3.0.0",
 49 |     "chai": "^4.1.2",
 50 |     "cross-env": "^5.1.1",
 51 |     "cssnano": "^3.10.0",
 52 |     "eslint": "^4.12.1",
 53 |     "eslint-config-standard": "^10.2.1",
 54 |     "eslint-plugin-import": "^2.8.0",
 55 |     "eslint-plugin-node": "^5.2.1",
 56 |     "eslint-plugin-promise": "^3.6.0",
 57 |     "eslint-plugin-standard": "^3.0.1",
 58 |     "http-server": "^0.10.0",
 59 |     "karma": "^1.7.1",
 60 |     "karma-chai": "^0.1.0",
 61 |     "karma-chrome-launcher": "^2.2.0",
 62 |     "karma-coverage": "^1.1.1",
 63 |     "karma-jquery": "^0.2.2",
 64 |     "karma-mocha": "^1.3.0",
 65 |     "karma-mocha-reporter": "^2.2.5",
 66 |     "karma-rollup-preprocessor": "^5.0.2",
 67 |     "karma-sinon-chai": "^1.3.3",
 68 |     "mocha": "^4.0.1",
 69 |     "postcss": "^6.0.14",
 70 |     "postcss-cli": "^4.1.1",
 71 |     "postcss-cssnext": "^3.0.2",
 72 |     "postcss-import": "^11.0.0",
 73 |     "puppeteer": "^0.13.0",
 74 |     "rollup": "^0.52.1",
 75 |     "rollup-plugin-babel": "^3.0.2",
 76 |     "rollup-plugin-istanbul": "^2.0.0",
 77 |     "rollup-plugin-uglify": "^2.0.1",
 78 |     "rollup-watch": "^4.3.1",
 79 |     "sinon": "^4.1.2",
 80 |     "sinon-chai": "^2.14.0",
 81 |     "stylelint": "^8.3.1",
 82 |     "stylelint-config-standard": "^18.0.0"
 83 |   },
 84 |   "keywords": [
 85 |     "menu",
 86 |     "responsive",
 87 |     "navigation",
 88 |     "jquery-plugin",
 89 |     "ecosystem:jquery",
 90 |     "jquery",
 91 |     "plugin",
 92 |     "rwd"
 93 |   ],
 94 |   "nyc": {
 95 |     "require": [
 96 |       "babel-register"
 97 |     ],
 98 |     "sourceMap": false,
 99 |     "instrument": false
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = (ctx) => ({
 2 |   plugins: {
 3 |     stylelint: ctx.env !== 'minify' ? {} : false,
 4 |     'postcss-import': ctx.env !== 'minify' ? {
 5 |       root: 'src/css'
 6 |     } : false,
 7 |     'postcss-cssnext': ctx.env !== 'minify' ? {
 8 |       browsers: ['last 2 versions', 'IE >= 10', 'Safari >= 6', 'iOS >= 5', '> 1%', 'Android >= 3']
 9 |     } : false,
10 |     'cssnano': ctx.env === 'minify' ? {
11 |       preset: ['default', {
12 |         discardComments: {
13 |           removeAll: true
14 |         }
15 |       }]
16 |     } : false
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel'
 2 | import babelrc from 'babelrc-rollup'
 3 | import uglify from 'rollup-plugin-uglify'
 4 | import pkg from './package.json'
 5 | 
 6 | let today = new Date()
 7 | let month = (today.getMonth() + 1).toString().padStart(2, '0')
 8 | let day = today.getDate().toString().padStart(2, '0')
 9 | let year = today.getFullYear()
10 | let banner = `/*! ${pkg.title || pkg.name} - v${pkg.version} - ${year}-${month}-${day}
11 |   ${pkg.homepage}
12 |   * Copyright (c) 2013-${year} ${pkg.author.name}; Licensed ${pkg.license} */`
13 | 
14 | export default [{
15 |   banner,
16 |   input: 'src/jquery.sidr.js',
17 |   globals: {
18 |     jquery: 'jQuery'
19 |   },
20 |   output: {
21 |     format: 'iife',
22 |     file: './dist/jquery.sidr.js'
23 |   },
24 |   plugins: [
25 |     babel(babelrc())
26 |   ]
27 | }, {
28 |   banner,
29 |   input: 'src/jquery.sidr.js',
30 |   globals: {
31 |     jquery: 'jQuery'
32 |   },
33 |   output: {
34 |     format: 'iife',
35 |     file: './dist/jquery.sidr.min.js'
36 |   },
37 |   plugins: [
38 |     babel(babelrc()),
39 |     uglify({
40 |       output: {
41 |         comments: /^!/
42 |       }
43 |     })
44 |   ]
45 | }, {
46 |   banner,
47 |   input: 'src/sidr.js',
48 |   output: {
49 |     format: 'iife',
50 |     file: './dist/sidr.js'
51 |   },
52 |   plugins: [
53 |     babel(babelrc())
54 |   ]
55 | }, {
56 |   banner,
57 |   input: 'src/sidr.js',
58 |   output: {
59 |     format: 'iife',
60 |     file: './dist/sidr.min.js'
61 |   },
62 |   plugins: [
63 |     babel(babelrc()),
64 |     uglify({
65 |       output: {
66 |         comments: /^!/
67 |       }
68 |     })
69 |   ]
70 | }]
71 | 


--------------------------------------------------------------------------------
/spec/default.options.spec.js:
--------------------------------------------------------------------------------
 1 | import options from '../src/js/default.options.js'
 2 | 
 3 | describe('default.options.js', () => {
 4 |   describe('#name property', () => {
 5 |     it('should exist the name property and equal sidr', () => {
 6 |       options.name.should.equal('sidr')
 7 |     })
 8 |   })
 9 |   describe('#speed property', () => {
10 |     it('should exist the speed property and equal 200', () => {
11 |       options.speed.should.equal(200)
12 |     })
13 |   })
14 |   describe('#side property', () => {
15 |     it('should exist the side property and equal left', () => {
16 |       options.side.should.equal('left')
17 |     })
18 |   })
19 |   describe('#renaming property', () => {
20 |     it('should exist the renaming property and equal true', () => {
21 |       options.renaming.should.equal(true)
22 |     })
23 |   })
24 |   describe('#body property', () => {
25 |     it('should exist the body property and equal body', () => {
26 |       options.body.should.equal('body')
27 |     })
28 |   })
29 |   describe('#displace property', () => {
30 |     it('should exist the displace property and equal true', () => {
31 |       options.displace.should.equal(true)
32 |     })
33 |   })
34 |   describe('#timing property', () => {
35 |     it('should exist the timing property and equal ease', () => {
36 |       options.timing.should.equal('ease')
37 |     })
38 |   })
39 |   describe('#method property', () => {
40 |     it('should exist the method property and equal toggle', () => {
41 |       options.method.should.equal('toggle')
42 |     })
43 |   })
44 |   describe('#bind property', () => {
45 |     it('should exist the bind property and equal click', () => {
46 |       options.bind.should.equal('click')
47 |     })
48 |   })
49 | })
50 | 


--------------------------------------------------------------------------------
/spec/fnSidr.spec.js:
--------------------------------------------------------------------------------
 1 | import fnSidr from '../src/js/jquery.fnSidr'
 2 | import store from '../src/js/menu.store'
 3 | import Menu from '../src/js/models/menu'
 4 | import Button from '../src/js/models/button'
 5 | 
 6 | describe('fnSidr.js', () => {
 7 |   describe('#fnSidr()', () => {
 8 |     let sandbox = sinon.sandbox.create()
 9 |     let items = []
10 | 
11 |     beforeEach(() => {
12 |       sandbox.stub(Menu.prototype, 'init')
13 |     })
14 | 
15 |     afterEach(() => {
16 |       sandbox.restore()
17 |       items = []
18 |       document.body.innerHTML = ''
19 |       document.body.style = ''
20 |     })
21 | 
22 |     it('should add the new Menu to the menu store', () => {
23 |       sandbox.stub(Button.prototype, 'init')
24 |       let addStub = sandbox.stub(store, 'add').callsFake((name, menu) => {
25 |         items.push(menu)
26 |       })
27 | 
28 |       fnSidr.apply({
29 |         each: () => {}
30 |       }, {
31 |         name: 'acme'
32 |       })
33 | 
34 |       sandbox.assert.calledOnce(addStub)
35 |       items.length.should.equal(1)
36 |     })
37 | 
38 |     it('should create a button for each jquery element', (done) => {
39 |       sandbox.stub(store, 'add')
40 |       let buttonStub = sandbox.stub(Button.prototype, 'init')
41 | 
42 |       fnSidr.apply({
43 |         each: (callback) => {
44 |           callback()
45 |           done()
46 |         }
47 |       }, {
48 |         name: 'acme'
49 |       })
50 | 
51 |       sandbox.assert.calledOnce(buttonStub)
52 |     })
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/spec/menu.store.spec.js:
--------------------------------------------------------------------------------
 1 | import store from '../src/js/menu.store'
 2 | 
 3 | describe('menu.store.js', () => {
 4 |   describe('#add()', () => {
 5 |     it('should allow adding items', () => {
 6 |       store.add('test-key', 'test-value')
 7 |       store.get('test-key').should.equal('test-value')
 8 |     })
 9 |   })
10 |   describe('#get()', () => {
11 |     it('should allow getting existing elements', () => {
12 |       store.add('test-key2', 'test-value2')
13 |       store.get('test-key2').should.equal('test-value2')
14 |     })
15 |     it('should return undefined if the element does not exist', () => {
16 |       should.not.exist(store.get('test-key3'))
17 |     })
18 |   })
19 | })
20 | 


--------------------------------------------------------------------------------
/spec/models/base.element.spec.js:
--------------------------------------------------------------------------------
  1 | import BaseElement from '../../src/js/models/base.element'
  2 | 
  3 | function triggerEvent (el, eventName) {
  4 |   let event
  5 |   if (window.CustomEvent) {
  6 |     event = new CustomEvent(eventName)
  7 |   } else {
  8 |     event = document.createEvent('CustomEvent')
  9 |     event.initCustomEvent(eventName, true, true)
 10 |   }
 11 |   el.dispatchEvent(event)
 12 | }
 13 | 
 14 | describe('dom.js', () => {
 15 |   let sandbox = sinon.sandbox.create()
 16 |   let baseElement
 17 | 
 18 |   beforeEach(() => {
 19 |     document.body.innerHTML = ''
 20 |     document.body.style = ''
 21 |     let elem = document.createElement('div')
 22 |     document.body.appendChild(elem)
 23 |     baseElement = new BaseElement(elem)
 24 |   })
 25 | 
 26 |   afterEach(() => {
 27 |     sandbox.restore()
 28 |     document.body.innerHTML = ''
 29 |     document.body.style = ''
 30 |   })
 31 | 
 32 |   describe('#bind()', () => {
 33 |     it('should allow binding callbacks events', () => {
 34 |       let spy = sandbox.spy()
 35 |       baseElement.bind('click', spy)
 36 | 
 37 |       triggerEvent(baseElement.element, 'click')
 38 | 
 39 |       sandbox.assert.calledOnce(spy)
 40 |     })
 41 |   })
 42 | 
 43 |   describe('#unbind()', () => {
 44 |     it('should allow unbinding callbacks events', () => {
 45 |       let spy = sandbox.spy()
 46 |       baseElement.element.addEventListener('click', spy, false)
 47 | 
 48 |       baseElement.unbind('click', spy)
 49 | 
 50 |       triggerEvent(baseElement.element, 'click')
 51 | 
 52 |       sandbox.assert.neverCalledWith(spy)
 53 |     })
 54 |   })
 55 | 
 56 |   describe('#style()', () => {
 57 |     describe('when it is called with two arguments', () => {
 58 |       it('should set the provided style property', () => {
 59 |         baseElement.element.style.width = '100px'
 60 | 
 61 |         baseElement.style('width', '200px')
 62 | 
 63 |         baseElement.element.style.width.should.equal('200px')
 64 |       })
 65 |     })
 66 |     describe('when it is called with one argument', () => {
 67 |       it('should set the provided style based on the key-value object', () => {
 68 |         baseElement.element.style.width = '100px'
 69 |         baseElement.element.style.height = '100px'
 70 | 
 71 |         baseElement.style({
 72 |           width: '200px',
 73 |           height: '200px'
 74 |         })
 75 | 
 76 |         baseElement.element.style.width.should.equal('200px')
 77 |         baseElement.element.style.height.should.equal('200px')
 78 |       })
 79 |     })
 80 |   })
 81 | 
 82 |   describe('#addClass()', () => {
 83 |     it('should add classes to the element', () => {
 84 |       baseElement.element.setAttribute('class', 'previous')
 85 | 
 86 |       baseElement.addClass('class1 class2')
 87 | 
 88 |       baseElement.element.getAttribute('class').should.equal('previous class1 class2')
 89 |     })
 90 |   })
 91 | 
 92 |   describe('#removeClass()', () => {
 93 |     it('should remove classes from the element', () => {
 94 |       baseElement.element.setAttribute('class', 'class1 previous class2')
 95 | 
 96 |       baseElement.removeClass('class1 class2')
 97 | 
 98 |       baseElement.element.getAttribute('class').should.equal('previous')
 99 |     })
100 |   })
101 | 
102 |   describe('#html()', () => {
103 |     describe('when it is called with one argument', () => {
104 |       it('should replace the html of the element', () => {
105 |         baseElement.element.innerHTML = 'old'
106 | 
107 |         baseElement.html('new')
108 | 
109 |         baseElement.element.innerHTML.should.equal('new')
110 |       })
111 |     })
112 | 
113 |     describe('when it is called without arguments', () => {
114 |       it('should retrieve the html of the element', () => {
115 |         baseElement.element.innerHTML = 'old'
116 | 
117 |         let html = baseElement.html()
118 | 
119 |         html.should.equal('old')
120 |       })
121 |     })
122 |   })
123 | 
124 |   describe('#offsetWidth()', () => {
125 |     it('should retrieve the offsetWidth of the element', () => {
126 |       baseElement.element.style.width = '600px'
127 | 
128 |       let offsetWidth = baseElement.offsetWidth()
129 | 
130 |       offsetWidth.should.equal(600)
131 |     })
132 |   })
133 | })
134 | 


--------------------------------------------------------------------------------
/spec/models/menu.spec.js:
--------------------------------------------------------------------------------
  1 | import Menu from '../../src/js/models/menu'
  2 | import status from '../../src/js/status'
  3 | 
  4 | var $ = jQuery
  5 | 
  6 | describe.skip('menu.js', () => {
  7 |   var m
  8 | 
  9 |   describe('#constructor()', () => {
 10 |     before(() => {
 11 |       $('body').html('')
 12 |       $('<div />')
 13 |         .attr('id', 'sidr')
 14 |         .data('speed', 'speed')
 15 |         .data('side', 'side')
 16 |         .data('displace', 'displace')
 17 |         .data('timing', 'timing')
 18 |         .data('method', 'method')
 19 |         .data('onOpen', 'onOpen')
 20 |         .data('onClose', 'onClose')
 21 |         .data('onOpenEnd', 'onOpenEnd')
 22 |         .data('onCloseEnd', 'onCloseEnd')
 23 |         .data('body', 'body')
 24 |         .width(200)
 25 |         .appendTo($('body'))
 26 |     })
 27 | 
 28 |     it('should set the name property with the parameter passed', () => {
 29 |       m = new Menu('sidr')
 30 | 
 31 |       m.name.should.equal('sidr')
 32 |     })
 33 |     it('should set the item property with the jQuery element with id equals name', () => {
 34 |       m = new Menu('sidr')
 35 | 
 36 |       m.item.attr('id').should.be.equal('sidr')
 37 |     })
 38 |     it('should set the sidr open class that will be added to body', () => {
 39 |       m = new Menu('sidr')
 40 | 
 41 |       m.openClass.should.be.equal('sidr-open')
 42 |     })
 43 |     it('should set the menuWidth property with the other width of the menu element', () => {
 44 |       m = new Menu('sidr')
 45 | 
 46 |       m.menuWidth.should.be.equal(200)
 47 |     })
 48 |     it('should set the speed property with the speed data property of the menu element', () => {
 49 |       m = new Menu('sidr')
 50 | 
 51 |       m.speed.should.be.equal('speed')
 52 |     })
 53 |     it('should set the side property with the side data property of the menu element', () => {
 54 |       m = new Menu('sidr')
 55 | 
 56 |       m.side.should.be.equal('side')
 57 |     })
 58 |     it('should set the displace property with the displace data property of the menu element', () => {
 59 |       m = new Menu('sidr')
 60 | 
 61 |       m.displace.should.be.equal('displace')
 62 |     })
 63 |     it('should set the timing property with the timing data property of the menu element', () => {
 64 |       m = new Menu('sidr')
 65 | 
 66 |       m.timing.should.be.equal('timing')
 67 |     })
 68 |     it('should set the method property with the method data property of the menu element', () => {
 69 |       m = new Menu('sidr')
 70 | 
 71 |       m.method.should.be.equal('method')
 72 |     })
 73 |     it('should set the onOpen property with the onOpen data property of the menu element', () => {
 74 |       m = new Menu('sidr')
 75 | 
 76 |       m.onOpenCallback.should.be.equal('onOpen')
 77 |     })
 78 |     it('should set the onClose property with the onClose data property of the menu element', () => {
 79 |       m = new Menu('sidr')
 80 | 
 81 |       m.onCloseCallback.should.be.equal('onClose')
 82 |     })
 83 |     it('should set the onOpenEnd property with the onOpen data property of the menu element', () => {
 84 |       m = new Menu('sidr')
 85 | 
 86 |       m.onOpenEndCallback.should.be.equal('onOpenEnd')
 87 |     })
 88 |     it('should set the onCloseEnd property with the onClose data property of the menu element', () => {
 89 |       m = new Menu('sidr')
 90 | 
 91 |       m.onCloseEndCallback.should.be.equal('onCloseEnd')
 92 |     })
 93 |     it('should set the body property with the jquery element using the body data property of the menu element as selector', () => {
 94 |       m = new Menu('sidr')
 95 | 
 96 |       m.body.prop('tagName').should.be.equal('BODY')
 97 |     })
 98 | 
 99 |     describe('when the name is not "sidr"', () => {
100 |       before(() => {
101 |         $('#sidr')
102 |           .attr('id', 'nosidr')
103 |       })
104 | 
105 |       it('should set the sidr open class that will be added to body', () => {
106 |         m = new Menu('nosidr')
107 | 
108 |         m.openClass.should.be.equal('sidr-open nosidr-open')
109 |       })
110 |     })
111 |   })
112 | 
113 |   describe.skip('#getAnimation()', () => {
114 |     var animation,
115 |       element
116 | 
117 |     beforeEach(() => {
118 |       m = new Menu('sidr')
119 |       m.menuWidth = 200
120 |     })
121 | 
122 |     describe('when is a left menu', () => {
123 |       beforeEach(() => {
124 |         m.side = 'left'
125 |       })
126 | 
127 |       describe('and the element is the menu', () => {
128 |         before(() => {
129 |           element = 'menu'
130 |         })
131 | 
132 |         it('should set left property to 0 when open', () => {
133 |           animation = m.getAnimation('open', element)
134 | 
135 |           animation.should.deep.equal({
136 |             left: 0
137 |           })
138 |         })
139 |         it('should set left property to the menuWidth when close', () => {
140 |           animation = m.getAnimation('close', element)
141 | 
142 |           animation.should.deep.equal({
143 |             left: '-200px'
144 |           })
145 |         })
146 |       })
147 | 
148 |       describe('and the element is the body', () => {
149 |         before(() => {
150 |           element = 'body'
151 |         })
152 | 
153 |         it('should set left property to the menuWidth when open', () => {
154 |           animation = m.getAnimation('open', element)
155 | 
156 |           animation.should.deep.equal({
157 |             left: '200px'
158 |           })
159 |         })
160 |         it('should set left property to 0 when close', () => {
161 |           animation = m.getAnimation('close', element)
162 | 
163 |           animation.should.deep.equal({
164 |             left: 0
165 |           })
166 |         })
167 |       })
168 |     })
169 | 
170 |     describe('when is a right menu', () => {
171 |       beforeEach(() => {
172 |         m.side = 'right'
173 |       })
174 | 
175 |       describe('and the element is the menu', () => {
176 |         before(() => {
177 |           element = 'menu'
178 |         })
179 | 
180 |         it('should set right property to 0 when open', () => {
181 |           animation = m.getAnimation('open', element)
182 | 
183 |           animation.should.deep.equal({
184 |             right: 0
185 |           })
186 |         })
187 |         it('should set right property to the menuWidth when close', () => {
188 |           animation = m.getAnimation('close', element)
189 | 
190 |           animation.should.deep.equal({
191 |             right: '-200px'
192 |           })
193 |         })
194 |       })
195 | 
196 |       describe('and the element is the body', () => {
197 |         before(() => {
198 |           element = 'body'
199 |         })
200 | 
201 |         it('should set right property to the menuWidth when open', () => {
202 |           animation = m.getAnimation('open', element)
203 | 
204 |           animation.should.deep.equal({
205 |             right: '200px'
206 |           })
207 |         })
208 |         it('should set right property to 0 when close', () => {
209 |           animation = m.getAnimation('close', element)
210 | 
211 |           animation.should.deep.equal({
212 |             right: 0
213 |           })
214 |         })
215 |       })
216 |     })
217 |   })
218 | 
219 |   describe('#prepareBody()', () => {
220 |     var type
221 | 
222 |     beforeEach(() => {
223 |       m = new Menu('sidr')
224 |     })
225 | 
226 |     describe('when the menu container is not body', () => {
227 |       beforeEach(() => {
228 |         m.body = $('<div />')
229 |       })
230 | 
231 |       it('should do nothing', () => {
232 |         m.prepareBody()
233 | 
234 |         $('html').css('overflow-x').should.equal('visible')
235 |       })
236 |     })
237 | 
238 |     describe('when the menu container is the body', () => {
239 |       beforeEach(() => {
240 |         m.body = $('body')
241 |       })
242 | 
243 |       describe('and the menu is opening', () => {
244 |         beforeEach(() => {
245 |           type = 'open'
246 |         })
247 | 
248 |         it('should hide overflow-x', () => {
249 |           m.prepareBody(type)
250 | 
251 |           $('html').css('overflow-x').should.equal('hidden')
252 |         })
253 |       })
254 | 
255 |       describe('and the menu is closing', () => {
256 |         beforeEach(() => {
257 |           type = 'close'
258 |         })
259 | 
260 |         it('should restore overflow-x', () => {
261 |           m.prepareBody(type)
262 | 
263 |           $('html').css('overflow-x').should.equal('visible')
264 |         })
265 |       })
266 |     })
267 |   })
268 | 
269 |   describe('#move()', () => {
270 |     var prepareBodyStub,
271 |       moveBodyStub,
272 |       moveMenuStub
273 | 
274 |     beforeEach(() => {
275 |       m = new Menu('sidr')
276 |       status.moving = false
277 |       prepareBodyStub = sinon.stub(m, 'prepareBody')
278 |       moveBodyStub = sinon.stub(m, 'moveBody')
279 |       moveMenuStub = sinon.stub(m, 'moveMenu')
280 |     })
281 | 
282 |     afterEach(() => {
283 |       m.prepareBody.restore()
284 |       m.moveBody.restore()
285 |       m.moveMenu.restore()
286 |     })
287 | 
288 |     it('should set the status to moving', () => {
289 |       m.move('action', 'callback')
290 | 
291 |       status.moving.should.equal(true)
292 |     })
293 | 
294 |     it('should prepare the body', () => {
295 |       m.move('action', 'callback')
296 | 
297 |       prepareBodyStub.should.be.calledWith('action')
298 |     })
299 | 
300 |     it('should move the body', () => {
301 |       m.move('action', 'callback')
302 | 
303 |       moveBodyStub.should.be.calledWith('action')
304 |     })
305 | 
306 |     it('should move the menu', () => {
307 |       m.move('action', 'callback')
308 | 
309 |       moveMenuStub.should.be.calledWith('action', 'callback')
310 |     })
311 |   })
312 | 
313 |   describe('#open()', () => {
314 |     var moveStub
315 | 
316 |     beforeEach(() => {
317 |       m = new Menu('sidr')
318 |       m.onOpenCallback = sinon.spy()
319 |       moveStub = sinon.stub(m, 'move')
320 |     })
321 | 
322 |     describe('when the menu is already moving', () => {
323 |       beforeEach(() => {
324 |         status.moving = true
325 |         m.item = $('<div />')
326 |           .appendTo($('body'))
327 |       })
328 | 
329 |       it('should not move the menu', () => {
330 |         m.open('callback')
331 | 
332 |         moveStub.notCalled.should.equal(true)
333 |       })
334 |       it('should not call the onOpen callback', () => {
335 |         m.open('callback')
336 | 
337 |         m.onOpenCallback.notCalled.should.equal(true)
338 |       })
339 |     })
340 | 
341 |     describe('when the menu is not moving', () => {
342 |       beforeEach(() => {
343 |         status.moving = false
344 |       })
345 | 
346 |       describe('but is already opened', () => {
347 |         beforeEach(() => {
348 |           status.opened = 'sidr'
349 |         })
350 | 
351 |         it('should not move the menu', () => {
352 |           m.open('callback')
353 | 
354 |           moveStub.notCalled.should.equal(true)
355 |         })
356 |         it('should not call the onOpen callback', () => {
357 |           m.open('callback')
358 | 
359 |           m.onOpenCallback.notCalled.should.equal(true)
360 |         })
361 |       })
362 | 
363 |       describe('and another menu is opened', () => {
364 |         var onCloseSpy
365 | 
366 |         beforeEach(() => {
367 |           onCloseSpy = sinon.spy()
368 |           status.opened = 'other'
369 |           $('<div />')
370 |             .attr('id', status.opened)
371 |             .data({
372 |               side: 'right',
373 |               onClose: onCloseSpy
374 |             })
375 |             .appendTo($('body'))
376 |         })
377 | 
378 |         it('should not move the menu', () => {
379 |           m.open('callback')
380 | 
381 |           moveStub.notCalled.should.equal(true)
382 |         })
383 |         it('should not call the onOpen callback', () => {
384 |           m.open('callback')
385 | 
386 |           m.onOpenCallback.notCalled.should.equal(true)
387 |         })
388 |       })
389 | 
390 |       describe('and there is not another menu opened', () => {
391 |         beforeEach(() => {
392 |           status.opened = false
393 |         })
394 | 
395 |         describe('and the menu is hidden', () => {
396 |           beforeEach(() => {
397 |             m.item = $('<div />')
398 |               .css('display', 'none')
399 |               .appendTo($('body'))
400 |           })
401 |           it('should open the menu', () => {
402 |             m.open('callback')
403 | 
404 |             moveStub.should.be.calledWith('open', 'callback')
405 |           })
406 |           it('should call the onOpen callback', () => {
407 |             m.open('callback')
408 | 
409 |             m.onOpenCallback.called.should.equal(true)
410 |           })
411 |         })
412 |       })
413 |     })
414 |   })
415 | 
416 |   describe('#close()', () => {
417 |     var moveStub
418 | 
419 |     beforeEach(() => {
420 |       m = new Menu('sidr')
421 |       m.onCloseCallback = sinon.spy()
422 |       moveStub = sinon.stub(m, 'move')
423 |     })
424 | 
425 |     describe('when the menu is already moving', () => {
426 |       beforeEach(() => {
427 |         status.moving = true
428 |         m.item = $('<div />')
429 |           .appendTo($('body'))
430 |       })
431 | 
432 |       it('should not move the menu', () => {
433 |         m.close('callback')
434 | 
435 |         moveStub.notCalled.should.equal(true)
436 |       })
437 |       it('should not call the onClose callback', () => {
438 |         m.close('callback')
439 | 
440 |         m.onCloseCallback.notCalled.should.equal(true)
441 |       })
442 |     })
443 | 
444 |     describe('when the menu is not moving', () => {
445 |       beforeEach(() => {
446 |         status.moving = false
447 |       })
448 | 
449 |       describe('and the menu is already closed', () => {
450 |         beforeEach(() => {
451 |           status.opened = false
452 |           m.item = $('<div />')
453 |             .appendTo($('body'))
454 |         })
455 |         it('should not move the menu', () => {
456 |           m.close('callback')
457 | 
458 |           moveStub.notCalled.should.equal(true)
459 |         })
460 |         it('should not call the onClose callback', () => {
461 |           m.close('callback')
462 | 
463 |           m.onCloseCallback.notCalled.should.equal(true)
464 |         })
465 |       })
466 | 
467 |       describe('and the menu is visible', () => {
468 |         beforeEach(() => {
469 |           status.opened = 'sidr'
470 |           m.item = $('<div />')
471 |             .appendTo($('body'))
472 |         })
473 |         it('should close the menu', () => {
474 |           m.close('callback')
475 | 
476 |           moveStub.should.be.calledWith('close', 'callback')
477 |         })
478 |         it('should call the onClose callback', () => {
479 |           m.close('callback')
480 | 
481 |           m.onCloseCallback.called.should.equal(true)
482 |         })
483 |       })
484 |     })
485 |   })
486 | 
487 |   describe('#toggle()', () => {
488 |     var closeStub,
489 |       openStub
490 | 
491 |     beforeEach(() => {
492 |       m = new Menu('sidr')
493 |       closeStub = sinon.stub(m, 'close')
494 |       openStub = sinon.stub(m, 'open')
495 |     })
496 | 
497 |     afterEach(() => {
498 |       m.close.restore()
499 |       m.open.restore()
500 |     })
501 | 
502 |     describe('when the menu is closed', () => {
503 |       beforeEach(() => {
504 |         status.opened = false
505 |         m.item = $('<div />')
506 |           .appendTo($('body'))
507 |       })
508 | 
509 |       it('should open the menu', () => {
510 |         m.toggle('callback')
511 | 
512 |         openStub.should.be.calledWith('callback')
513 |       })
514 |       it('should not close the menu', () => {
515 |         m.toggle('callback')
516 | 
517 |         closeStub.notCalled.should.equal(true)
518 |       })
519 |     })
520 | 
521 |     describe('when the menu is opened', () => {
522 |       beforeEach(() => {
523 |         status.opened = 'sidr'
524 |         m.item = $('<div />')
525 |           .appendTo($('body'))
526 |       })
527 | 
528 |       it('should close the menu', () => {
529 |         m.toggle('callback')
530 | 
531 |         closeStub.should.be.calledWith('callback')
532 |       })
533 |       it('should not open the menu', () => {
534 |         m.toggle('callback')
535 | 
536 |         openStub.notCalled.should.equal(true)
537 |       })
538 |     })
539 |   })
540 | })
541 | 


--------------------------------------------------------------------------------
/spec/runner.spec.js:
--------------------------------------------------------------------------------
  1 | import store from '../src/js/menu.store'
  2 | import runner from '../src/js/runner'
  3 | 
  4 | describe('runner.js', () => {
  5 |   let sandbox = sinon.sandbox.create()
  6 | 
  7 |   afterEach(() => {
  8 |     sandbox.restore()
  9 |     document.body.innerHTML = ''
 10 |     document.body.style = ''
 11 |   })
 12 | 
 13 |   describe('status method', () => {
 14 |     it('should get the proper status', () => {
 15 |       let status = runner('status')
 16 | 
 17 |       status.moving.should.equal(false)
 18 |     })
 19 |   })
 20 | 
 21 |   describe('open method', () => {
 22 |     describe('when providing all parameters', () => {
 23 |       it('should run the open method with provided callback', (done) => {
 24 |         sandbox.stub(store, 'get').returns({
 25 |           open (callback) {
 26 |             callback.should.equal('acme')
 27 |             done()
 28 |           }
 29 |         })
 30 | 
 31 |         runner('open', 'sidr', 'acme')
 32 |       })
 33 |     })
 34 | 
 35 |     describe('when providing only the callback', () => {
 36 |       it('should run the open method with provided callback and default sidr menu', (done) => {
 37 |         let getStub = sandbox.stub(store, 'get').returns({
 38 |           open (callback) {
 39 |             callback()
 40 |             sandbox.assert.calledWith(getStub, 'sidr')
 41 |             sandbox.assert.calledOnce(sampleCallback)
 42 |             done()
 43 |           }
 44 |         })
 45 | 
 46 |         let sampleCallback = sandbox.spy()
 47 | 
 48 |         runner('open', sampleCallback)
 49 |       })
 50 |     })
 51 | 
 52 |     describe('whithout providing callback or menu name', () => {
 53 |       it('should run the open method with default sidr menu', (done) => {
 54 |         let getStub = sandbox.stub(store, 'get').returns({
 55 |           open () {
 56 |             done()
 57 |           }
 58 |         })
 59 | 
 60 |         runner('open')
 61 |         sandbox.assert.calledWith(getStub, 'sidr')
 62 |       })
 63 |     })
 64 |   })
 65 | 
 66 |   describe('close method', () => {
 67 |     it('should run the close method with provided callback', (done) => {
 68 |       sandbox.stub(store, 'get').returns({
 69 |         close (callback) {
 70 |           callback.should.equal('acme')
 71 |           done()
 72 |         }
 73 |       })
 74 | 
 75 |       runner('close', 'sidr', 'acme')
 76 |     })
 77 |   })
 78 | 
 79 |   describe('toggle method', () => {
 80 |     it('should run the toggle method with provided callback', (done) => {
 81 |       sandbox.stub(store, 'get').returns({
 82 |         toggle (callback) {
 83 |           callback.should.equal('acme')
 84 |           done()
 85 |         }
 86 |       })
 87 | 
 88 |       runner('toggle', 'sidr', 'acme')
 89 |     })
 90 |   })
 91 | 
 92 |   describe('reload method', () => {
 93 |     it('should run the reload method with provided callback', (done) => {
 94 |       sandbox.stub(store, 'get').returns({
 95 |         reload (callback) {
 96 |           callback.should.equal('acme')
 97 |           done()
 98 |         }
 99 |       })
100 | 
101 |       runner('reload', 'sidr', 'acme')
102 |     })
103 |   })
104 | 
105 |   describe('when only callback provided and not method provided', () => {
106 |     it('should run the toggle method with provided callback in default sidr menu', (done) => {
107 |       let getStub = sandbox.stub(store, 'get').returns({
108 |         toggle (callback) {
109 |           callback()
110 |           sandbox.assert.calledWith(getStub, 'sidr')
111 |           sandbox.assert.calledOnce(sampleCallback)
112 |           done()
113 |         }
114 |       })
115 | 
116 |       let sampleCallback = sandbox.spy()
117 | 
118 |       runner(sampleCallback)
119 |     })
120 |   })
121 | 
122 |   describe('when nothing passed', () => {
123 |     it('should run the toggle method in sidr menu', (done) => {
124 |       let getStub = sandbox.stub(store, 'get').returns({
125 |         toggle () {
126 |           sandbox.assert.calledWith(getStub, 'sidr')
127 |           done()
128 |         }
129 |       })
130 | 
131 |       runner()
132 |     })
133 |   })
134 | 
135 |   describe('when unknown arg passed', () => {
136 |     it('should console an error', () => {
137 |       let consoleSpy = sandbox.spy(console, 'error')
138 |       sandbox.stub(store, 'get').returns({
139 |         toggle () {}
140 |       })
141 | 
142 |       runner([])
143 |       sandbox.assert.calledOnce(consoleSpy)
144 |     })
145 |   })
146 | })
147 | 


--------------------------------------------------------------------------------
/spec/status.spec.js:
--------------------------------------------------------------------------------
 1 | import status from '../src/js/status'
 2 | 
 3 | describe('status.js', () => {
 4 |   describe('#moving property', () => {
 5 |     it('should exist the moving property', () => {
 6 |       should.exist(status.moving)
 7 |     })
 8 |   })
 9 |   describe('#opened property', () => {
10 |     it('should exist the opened property', () => {
11 |       should.exist(status.opened)
12 |     })
13 |   })
14 | })
15 | 


--------------------------------------------------------------------------------
/spec/utils/dom.spec.js:
--------------------------------------------------------------------------------
  1 | import dom from '../../src/js/utils/dom'
  2 | 
  3 | describe('dom.js', () => {
  4 |   describe('#createElement()', () => {
  5 |     beforeEach(() => {
  6 |       document.body.innerHTML = ''
  7 |     })
  8 | 
  9 |     afterEach(() => {
 10 |       document.body.innerHTML = ''
 11 |     })
 12 | 
 13 |     it('should create a new div at the end of the body', () => {
 14 |       dom.createElement('myid').should.equal(document.body.lastElementChild)
 15 |     })
 16 | 
 17 |     it('should create a new div with the given id', () => {
 18 |       dom.createElement('myid').id.should.equal('myid')
 19 |     })
 20 |   })
 21 | 
 22 |   describe('#getHTMLContent()', () => {
 23 |     beforeEach(() => {
 24 |       document.body.innerHTML = `
 25 |         <div class="hello">Hola1</div>
 26 |         <div class="hello">Hola2</div>
 27 |         <div class="hello">Hola3</div>
 28 |         <div id="bye">Bye</div>
 29 |         <div id="hola"><p class="bye">Hello</p></div>
 30 |         <div>
 31 |           <p>Paragraph1</p>
 32 |           <p>Paragraph2</p>
 33 |         </div>
 34 |       `
 35 |     })
 36 |     afterEach(() => {
 37 |       document.body.innerHTML = ''
 38 |     })
 39 | 
 40 |     it('should get multiple items matching same selector', () => {
 41 |       dom.getHTMLContent('.hello')
 42 |         .should.equal('<div class="sidr-inner">Hola1</div><div class="sidr-inner">Hola2</div><div class="sidr-inner">Hola3</div>')
 43 |     })
 44 |     it('should allow multiple selectors', () => {
 45 |       dom.getHTMLContent('#hola, p')
 46 |         .should.equal('<div class="sidr-inner"><p class="bye">Hello</p></div><div class="sidr-inner">Hello</div><div class="sidr-inner">Paragraph1</div><div class="sidr-inner">Paragraph2</div>')
 47 |     })
 48 |   })
 49 | 
 50 |   describe('#addPrefixes()', () => {
 51 |     it('should replace the id attribute', () => {
 52 |       dom.addPrefixes('<div id="hola"></div>')
 53 |         .should.equal('<div id="sidr-id-hola"></div>')
 54 |     })
 55 |     it('should replace the class attribute', () => {
 56 |       dom.addPrefixes('<ul class="hola adios"><span class="halo"></span></ul>')
 57 |         .should.equal('<ul class="sidr-class-hola sidr-class-adios"><span class="sidr-class-halo"></span></ul>')
 58 |     })
 59 |     it('should remove the style attribute', () => {
 60 |       dom.addPrefixes('<p style="text-align: center;"></p>')
 61 |         .should.equal('<p></p>')
 62 |     })
 63 |     it('should not change the sidr-inner class', () => {
 64 |       dom.addPrefixes('<div class="sidr-inner"></div>')
 65 |         .should.equal('<div class="sidr-inner"></div>')
 66 |     })
 67 |     it('should do all previous things together', () => {
 68 |       dom.addPrefixes(`
 69 |         <div class="sidr-inner">
 70 |           <div id="myid">
 71 |             <ul class="hello bye">
 72 |               <li>Hola</li>
 73 |               <li style="font-weight: bold;">Adios</li>
 74 |             </ul>
 75 |           </div>
 76 |         </div>
 77 |       `).should.equal(`
 78 |         <div class="sidr-inner">
 79 |           <div id="sidr-id-myid">
 80 |             <ul class="sidr-class-hello sidr-class-bye">
 81 |               <li>Hola</li>
 82 |               <li>Adios</li>
 83 |             </ul>
 84 |           </div>
 85 |         </div>
 86 |       `)
 87 |     })
 88 |   })
 89 | 
 90 |   describe('#transitions', () => {
 91 |     it('should return the browser transition capabilities', () => {
 92 |       dom.transitions.should.eql({
 93 |         cssProperty: 'transition',
 94 |         supported: true,
 95 |         property: 'transition',
 96 |         event: 'transitionend'
 97 |       })
 98 |     })
 99 |   })
100 | })
101 | 


--------------------------------------------------------------------------------
/spec/utils/utils.spec.js:
--------------------------------------------------------------------------------
 1 | import utils from '../../src/js/utils/utils'
 2 | 
 3 | describe('utils.js', () => {
 4 |   describe('#isUrl()', () => {
 5 |     it('should not identify a number as a URL', () => {
 6 |       utils.isUrl(4).should.equal(false)
 7 |     })
 8 |     it('should not identify a non-URL string as a URL', () => {
 9 |       utils.isUrl('http:whatever.com/yeah').should.equal(false)
10 |     })
11 |     it('should not identify an object as a URL', () => {
12 |       utils.isUrl({
13 |         foo: 'bar'
14 |       }).should.equal(false)
15 |     })
16 |     it('should not identify an array as a URL', () => {
17 |       utils.isUrl([1, 2]).should.equal(false)
18 |     })
19 |     it('should identify a URL with only a domain', () => {
20 |       utils.isUrl('http://whatever.com').should.equal(true)
21 |     })
22 |     it('should identify a https URL', () => {
23 |       utils.isUrl('https://whatever.info').should.equal(true)
24 |     })
25 |     it('should identify a URL with a long path', () => {
26 |       utils.isUrl('http://whatever.eus/foo/bar/hey').should.equal(true)
27 |     })
28 |     it('should identify a URL with a long path and query params', () => {
29 |       utils.isUrl('http://whatever.com/foo/bar/hey.html?hey=ho&me&you=ok').should.equal(true)
30 |     })
31 |     it('should identify a URL with a long path and query params and the port', () => {
32 |       utils.isUrl('http://whatever.com:9000/foo/bar/hey.html?hey=ho&me&you=ok').should.equal(true)
33 |     })
34 |   })
35 | 
36 |   describe('#extend()', () => {
37 |     it('should merge properties from the second object into the first one', () => {
38 |       utils.extend({
39 |         test: 1,
40 |         acme: 'what'
41 |       }, {
42 |         acme: 'where',
43 |         other: 'why'
44 |       }).should.eql({
45 |         test: 1,
46 |         acme: 'where',
47 |         other: 'why'
48 |       })
49 |     })
50 |     it('should keep the default options if empty object is passed', () => {
51 |       utils.extend({test: 1}, {}).should.eql({test: 1})
52 |     })
53 |     it('should keep the options object if empty default options passed', () => {
54 |       utils.extend({}, {test: 1}).should.eql({test: 1})
55 |     })
56 |   })
57 | 
58 |   describe('#fetch()', () => {
59 |     let xhr
60 |     let requests
61 | 
62 |     beforeEach(() => {
63 |       xhr = sinon.useFakeXMLHttpRequest()
64 | 
65 |       requests = []
66 |       xhr.onCreate = (xhr) => {
67 |         requests.push(xhr)
68 |       }
69 |     })
70 | 
71 |     afterEach(() => {
72 |       xhr.restore()
73 |     })
74 | 
75 |     it('should make a get AJAX request and execute callback with the given content', (done) => {
76 |       utils.fetch('http://www.google.com/', (data) => {
77 |         data.should.equal('{"hola":"adios"}')
78 |         done()
79 |       })
80 | 
81 |       requests[0].respond(200, { 'Content-Type': 'text/json' }, '{"hola":"adios"}')
82 |     })
83 |   })
84 | })
85 | 


--------------------------------------------------------------------------------
/src/css/common/base.css:
--------------------------------------------------------------------------------
  1 | .sidr {
  2 |     /* Default Settings */
  3 |     display: block;
  4 |     position: fixed;
  5 |     top: 0;
  6 |     height: 100%;
  7 |     z-index: 999999;
  8 |     width: var(--sidrSidebarWidth);
  9 |     overflow-x: hidden;
 10 |     overflow-y: auto;
 11 | 
 12 |     & .sidr-inner {
 13 |         padding: 0 0 15px;
 14 | 
 15 |         & > p {
 16 |             margin-left: 15px;
 17 |             margin-right: 15px;
 18 |         }
 19 |     }
 20 | 
 21 |     &.sidr-right {
 22 |         left: auto;
 23 |         right: -var(--sidrSidebarWidth);
 24 |     }
 25 | 
 26 |     &.sidr-left {
 27 |         left: -var(--sidrSidebarWidth);
 28 |         right: auto;
 29 |     }
 30 | 
 31 |     /* Theme Settings */
 32 |     font-family: var(--sidrFontFamily);
 33 |     font-size: var(--sidrFontSize);
 34 |     background: var(--sidrBackground);
 35 |     color: var(--sidrTextColor);
 36 |     box-shadow: 0 0 5px 5px var(--sidrBackgroundShadowColor) inset;
 37 | 
 38 |     & h1,
 39 |     & h2,
 40 |     & h3,
 41 |     & h4,
 42 |     & h5,
 43 |     & h6 {
 44 |         font-size: var(--sidrFontSize) - 4;
 45 |         font-weight: normal;
 46 |         padding: 0 15px;
 47 |         margin: 0 0 5px;
 48 |         color: var(--sidrTextColor);
 49 |         line-height: 24px;
 50 |         box-shadow: 0 5px 5px 3px rgba(var(--sidrBoxShadowColor), .2);
 51 |     }
 52 | 
 53 |     & p {
 54 |         font-size: var(--sidrFontSize) - 2;
 55 |         margin: 0 0 12px;
 56 | 
 57 |         & a {
 58 |             color: rgba(var(--sidrTextColor), .9);
 59 |         }
 60 |     }
 61 | 
 62 |     & > p {
 63 |         margin-left: 15px;
 64 |         margin-right: 15px;
 65 |     }
 66 | 
 67 |     & ul {
 68 |         display: block;
 69 |         margin: 0 0 15px;
 70 |         padding: 0;
 71 |         border-top: 1px solid darken(var(--sidrBackground), 10%);
 72 |         border-bottom: 1px solid lighten(var(--sidrBackground), 10%);
 73 | 
 74 |         & li {
 75 |             display: block;
 76 |             margin: 0;
 77 |             line-height: 48px;
 78 |             border-top: 1px solid lighten(var(--sidrBackground), 10%);
 79 |             border-bottom: 1px solid darken(var(--sidrBackground), 10%);
 80 | 
 81 |             &:hover,
 82 |             &.active,
 83 |             &.sidr-class-active {
 84 |                 border-top: 0;
 85 |                 line-height: 49px;
 86 | 
 87 |                 & > a,
 88 |                 & > span {
 89 |                     box-shadow: 0 0 15px 3px var(--sidrBackgroundShadowColor) inset;
 90 |                 }
 91 |             }
 92 | 
 93 |             & a,
 94 |             & span {
 95 |                 padding: 0 15px;
 96 |                 display: block;
 97 |                 text-decoration: none;
 98 |                 color: var(--sidrTextColor);
 99 |             }
100 | 
101 |             & ul {
102 |                 border-bottom: 0;
103 |                 margin: 0;
104 | 
105 |                 & li {
106 |                     line-height: 40px;
107 |                     font-size: var(--sidrFontSize) - 2;
108 | 
109 |                     &:last-child {
110 |                         border-bottom: 0;
111 |                     }
112 | 
113 |                     &:hover,
114 |                     &.active,
115 |                     &.sidr-class-active {
116 |                         border-top: 0;
117 |                         line-height: 41px;
118 | 
119 |                         & > a,
120 |                         & > span {
121 |                             box-shadow: 0 0 15px 3px var(--sidrBackgroundShadowColor) inset;
122 |                         }
123 |                     }
124 | 
125 |                     & a,
126 |                     & span {
127 |                         color: rgba(var(--sidrTextColor), .8);
128 |                         padding-left: 30px;
129 |                     }
130 |                 }
131 |             }
132 |         }
133 |     }
134 | 
135 |     & form {
136 |         margin: 0 15px;
137 |     }
138 | 
139 |     & label {
140 |         font-size: var(--sidrFontSize) - 2;
141 |     }
142 | 
143 |     & input[type="text"],
144 |     & input[type="password"],
145 |     & input[type="date"],
146 |     & input[type="datetime"],
147 |     & input[type="email"],
148 |     & input[type="number"],
149 |     & input[type="search"],
150 |     & input[type="tel"],
151 |     & input[type="time"],
152 |     & input[type="url"],
153 |     & textarea,
154 |     & select {
155 |         width: 100%;
156 |         font-size: var(--sidrFontSize) - 2;
157 |         padding: 5px;
158 |         box-sizing: border-box;
159 |         margin: 0 0 10px;
160 |         border-radius: 2px;
161 |         border: 0;
162 |         background: rgba(var(--sidrInputBackgroundColor), .1);
163 |         color: rgba(var(--sidrTextColor), .6);
164 |         display: block;
165 |         clear: both;
166 |     }
167 | 
168 |     & input[type=checkbox] {
169 |         width: auto;
170 |         display: inline;
171 |         clear: none;
172 |     }
173 | 
174 |     & input[type=button],
175 |     & input[type=submit] {
176 |         color: var(--sidrBackground);
177 |         background: var(--sidrTextColor);
178 | 
179 |         &:hover {
180 |             background: rgba(var(--sidrTextColor), .9);
181 |         }
182 |     }
183 | }
184 | 


--------------------------------------------------------------------------------
/src/css/common/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 |   --sidrSidebarWidth: 260px;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/css/sidr.bare.css:
--------------------------------------------------------------------------------
 1 | @import 'common/variables';
 2 | 
 3 | .sidr {
 4 |     display: block;
 5 |     position: fixed;
 6 |     top: 0;
 7 |     height: 100%;
 8 |     z-index: 999999;
 9 |     width: var(--sidrSidebarWidth);
10 |     overflow-x: hidden;
11 |     overflow-y: auto;
12 | 
13 |     &.sidr-right {
14 |         left: auto;
15 |         right: -var(--sidrSidebarWidth);
16 |     }
17 | 
18 |     &.sidr-left {
19 |         left: -var(--sidrSidebarWidth);
20 |         right: auto;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/css/sidr.dark.css:
--------------------------------------------------------------------------------
1 | @import 'themes/dark';
2 | @import 'common/base';
3 | 


--------------------------------------------------------------------------------
/src/css/sidr.light.css:
--------------------------------------------------------------------------------
1 | @import 'themes/light';
2 | @import 'common/base';
3 | 


--------------------------------------------------------------------------------
/src/css/themes/dark.css:
--------------------------------------------------------------------------------
 1 | @import '../common/variables';
 2 | 
 3 | :root {
 4 |   --sidrFontFamily: 'lucida grande', tahoma, verdana, arial, sans-serif;
 5 |   --sidrFontSize: 15px;
 6 | 
 7 |   --sidrBackground: #333;
 8 |   --sidrBackgroundShadowColor: #222;
 9 |   --sidrTextColor: #fff;
10 |   --sidrBoxShadowColor: #000;
11 |   --sidrInputBackgroundColor: #000;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/css/themes/light.css:
--------------------------------------------------------------------------------
 1 | @import '../common/variables';
 2 | 
 3 | :root {
 4 |   --sidrFontFamily: 'lucida grande', tahoma, verdana, arial, sans-serif;
 5 |   --sidrFontSize: 15px;
 6 | 
 7 |   --sidrBackground: #f8f8f8;
 8 |   --sidrBackgroundShadowColor: #ebebeb;
 9 |   --sidrTextColor: #333;
10 |   --sidrBoxShadowColor: #000;
11 |   --sidrInputBackgroundColor: #000;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/jquery.sidr.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Sidr
 3 |  * https://github.com/artberri/sidr
 4 |  *
 5 |  * Copyright (c) 2013-2017 Alberto Varela
 6 |  * Licensed under the MIT license.
 7 |  */
 8 | 
 9 | import runner from './js/runner'
10 | import fnSidr from './js/jquery.fnSidr'
11 | 
12 | jQuery.sidr = runner
13 | jQuery.fn.sidr = fnSidr
14 | 


--------------------------------------------------------------------------------
/src/js/default.options.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   name: 'sidr', // Name for the 'sidr'
 3 |   speed: 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
 4 |   side: 'left', // Accepts 'left' or 'right'
 5 |   source: null, // Override the source of the content.
 6 |   renaming: true, // The ids and classes will be prepended with a prefix when loading existent content
 7 |   body: 'body', // Page container selector,
 8 |   displace: true, // Displace the body content or not
 9 |   timing: 'ease', // Timing function for CSS transitions
10 |   method: 'toggle', // The method to call when element is clicked
11 |   bind: 'click', // The event to trigger the menu
12 |   onOpen () { }, // Callback when sidr start opening
13 |   onClose () { }, // Callback when sidr start closing
14 |   onOpenEnd () { }, // Callback when sidr end opening
15 |   onCloseEnd () { } // Callback when sidr end closing
16 | }
17 | 


--------------------------------------------------------------------------------
/src/js/jquery.fnSidr.js:
--------------------------------------------------------------------------------
 1 | import utils from './utils/utils'
 2 | import Menu from './models/menu'
 3 | import Button from './models/button'
 4 | import store from './menu.store'
 5 | import defaultOptions from './default.options'
 6 | 
 7 | function fnSidr (options) {
 8 |   let settings = utils.extend(defaultOptions, options)
 9 |   store.add(settings.name, new Menu(settings))
10 | 
11 |   return this.each(function () {
12 |     new Button(this, settings)
13 |   })
14 | }
15 | 
16 | export default fnSidr
17 | 


--------------------------------------------------------------------------------
/src/js/menu.store.js:
--------------------------------------------------------------------------------
 1 | let store = {}
 2 | 
 3 | export default {
 4 |   add (key, value) {
 5 |     store[key] = value
 6 |   },
 7 | 
 8 |   get (key) {
 9 |     return store[key]
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/js/models/base.element.js:
--------------------------------------------------------------------------------
 1 | function changeClasses (element, action, classes) {
 2 |   let classesArray = classes.split(' ')
 3 |   for (let i = 0; i < classesArray.length; i++) {
 4 |     let newClass = classesArray[i].trim()
 5 |     element.classList[action](newClass)
 6 |   }
 7 | }
 8 | 
 9 | function setProperty (element, prop, value) {
10 |   element[prop] = value
11 | }
12 | 
13 | function getProperty (element, prop, value) {
14 |   return element[prop]
15 | }
16 | 
17 | class BaseElement {
18 |   constructor (element) {
19 |     this.element = element
20 |   }
21 | 
22 |   bind (event, callback) {
23 |     this.element.addEventListener(event, callback, false)
24 |   }
25 | 
26 |   unbind (event, callback) {
27 |     this.element.removeEventListener(event, callback, false)
28 |   }
29 | 
30 |   style (property, value) {
31 |     if (typeof property === 'string') {
32 |       this.element.style[property] = value
33 |     } else {
34 |       for (let key in property) {
35 |         if (property.hasOwnProperty(key)) {
36 |           this.element.style[key] = property[key]
37 |         }
38 |       }
39 |     }
40 |   }
41 | 
42 |   addClass (classes) {
43 |     changeClasses(this.element, 'add', classes)
44 |   }
45 | 
46 |   removeClass (classes) {
47 |     changeClasses(this.element, 'remove', classes)
48 |   }
49 | 
50 |   html (value) {
51 |     if (value) {
52 |       setProperty(this.element, 'innerHTML', value)
53 |     } else {
54 |       return getProperty(this.element, 'innerHTML')
55 |     }
56 |   }
57 | 
58 |   scrollTop (value) {
59 |     if (value) {
60 |       setProperty(this.element, 'scrollTop', value)
61 |     } else {
62 |       return getProperty(this.element, 'scrollTop')
63 |     }
64 |   }
65 | 
66 |   offsetWidth () {
67 |     return this.element.offsetWidth
68 |   }
69 | }
70 | 
71 | export default BaseElement
72 | 


--------------------------------------------------------------------------------
/src/js/models/body.js:
--------------------------------------------------------------------------------
  1 | import dom from '../utils/dom'
  2 | import BaseElement from './base.element'
  3 | 
  4 | const bodyAnimationClass = 'sidr-animating'
  5 | const openAction = 'open'
  6 | 
  7 | function isBody (element) {
  8 |   return element.tagName === 'BODY'
  9 | }
 10 | 
 11 | function openClasses (name) {
 12 |   let classes = 'sidr-open'
 13 | 
 14 |   if (name !== 'sidr') {
 15 |     classes += ' ' + name + '-open'
 16 |   }
 17 | 
 18 |   return classes
 19 | }
 20 | 
 21 | class Body extends BaseElement {
 22 |   constructor (settings, menuWidth) {
 23 |     super(dom.qs(settings.body))
 24 | 
 25 |     this.name = settings.name
 26 |     this.side = settings.side
 27 |     this.speed = settings.speed
 28 |     this.timing = settings.timing
 29 |     this.displace = settings.displace
 30 |     this.menuWidth = menuWidth
 31 |   }
 32 | 
 33 |   prepare (action) {
 34 |     var prop = (action === openAction) ? 'hidden' : ''
 35 | 
 36 |     // Prepare page if container is body
 37 |     if (isBody(this.element)) {
 38 |       let html = new BaseElement(dom.qs('html'))
 39 |       let scrollTop = html.scrollTop()
 40 |       html.style('overflowX', prop)
 41 |       html.scrollTop(scrollTop)
 42 |     }
 43 |   }
 44 | 
 45 |   unprepare () {
 46 |     if (isBody(this.element)) {
 47 |       let html = new BaseElement(dom.qs('html'))
 48 |       html.style('overflowX', '')
 49 |     }
 50 |   }
 51 | 
 52 |   move (action) {
 53 |     this.addClass(bodyAnimationClass)
 54 |     if (action === openAction) {
 55 |       this.open()
 56 |     } else {
 57 |       this.close()
 58 |     }
 59 |   }
 60 | 
 61 |   open () {
 62 |     if (this.displace) {
 63 |       let transitions = dom.transitions
 64 |       let styles = {
 65 |         width: this.offsetWidth() + 'px',
 66 |         position: 'absolute'
 67 |       }
 68 |       this.style(this.side, '0')
 69 |       this.style(transitions.cssProperty, this.side + ' ' + (this.speed / 1000) + 's ' + this.timing)
 70 |       this.style(styles)
 71 |       setTimeout(() => this.style(this.side, this.menuWidth + 'px'), 1)
 72 |     }
 73 |   }
 74 | 
 75 |   onClose () {
 76 |     let transitions = dom.transitions
 77 |     let styles = {
 78 |       width: '',
 79 |       position: '',
 80 |       right: '',
 81 |       left: ''
 82 |     }
 83 | 
 84 |     styles[transitions.cssProperty] = ''
 85 |     this.style(styles)
 86 |     this.unbind(transitions.event, this.temporalCallback)
 87 |   }
 88 | 
 89 |   close () {
 90 |     if (this.displace) {
 91 |       let transitions = dom.transitions
 92 | 
 93 |       this.style(this.side, 0)
 94 |       let self = this
 95 |       this.temporalCallback = () => {
 96 |         self.onClose()
 97 |       }
 98 |       this.bind(transitions.event, this.temporalCallback)
 99 |     }
100 |   }
101 | 
102 |   removeAnimationClass () {
103 |     this.removeClass(bodyAnimationClass)
104 |   }
105 | 
106 |   removeOpenClass () {
107 |     this.removeClass(openClasses(this.name))
108 |   }
109 | 
110 |   addOpenClass () {
111 |     this.addClass(openClasses(this.name))
112 |   }
113 | }
114 | 
115 | export default Body
116 | 


--------------------------------------------------------------------------------
/src/js/models/button.js:
--------------------------------------------------------------------------------
 1 | import runner from '../runner'
 2 | import BaseElement from './base.element'
 3 | 
 4 | class Button extends BaseElement {
 5 |   constructor (element, settings) {
 6 |     super(element)
 7 |     this.init(settings)
 8 |   }
 9 | 
10 |   init (settings) {
11 |     let data = this.element.getAttribute('data-sidr')
12 | 
13 |     // If the plugin hasn't been initialized yet
14 |     if (!data) {
15 |       let name = settings.name
16 |       let method = settings.method
17 |       let bind = settings.bind
18 | 
19 |       this.element.setAttribute('data-sidr', name)
20 |       this.bind(bind, function (event) {
21 |         event.preventDefault()
22 | 
23 |         runner(method, name)
24 |       })
25 |     }
26 |   }
27 | }
28 | 
29 | export default Button
30 | 


--------------------------------------------------------------------------------
/src/js/models/menu.js:
--------------------------------------------------------------------------------
  1 | import Body from './body'
  2 | import dom from '../utils/dom'
  3 | import utils from '../utils/utils'
  4 | import status from '../status'
  5 | import store from '../menu.store'
  6 | import BaseElement from './base.element'
  7 | 
  8 | class Menu extends BaseElement {
  9 |   constructor (settings) {
 10 |     super(dom.id(settings.name))
 11 | 
 12 |     this.name = settings.name
 13 |     this.speed = settings.speed
 14 |     this.side = settings.side
 15 |     this.displace = settings.displace
 16 |     this.source = settings.source
 17 |     this.timing = settings.timing
 18 |     this.method = settings.method
 19 |     this.renaming = settings.renaming
 20 |     this.onOpenCallback = settings.onOpen
 21 |     this.onCloseCallback = settings.onClose
 22 |     this.onOpenEndCallback = settings.onOpenEnd
 23 |     this.onCloseEndCallback = settings.onCloseEnd
 24 | 
 25 |     this.init(settings)
 26 |   }
 27 | 
 28 |   init (settings) {
 29 |     // If the side menu do not exist create it
 30 |     if (!this.element) {
 31 |       this.element = dom.createElement(this.name)
 32 |     }
 33 | 
 34 |     this.style(dom.transitions.cssProperty, this.side + ' ' + (this.speed / 1000) + 's ' + this.timing)
 35 |     this.addClass('sidr sidr-' + this.side)
 36 |     this.body = new Body(settings, this.offsetWidth())
 37 | 
 38 |     this.reload()
 39 |   }
 40 | 
 41 |   reload () {
 42 |     if (typeof this.source === 'function') {
 43 |       let newContent = this.source(name)
 44 |       this.html(newContent)
 45 |     } else if (typeof this.source === 'string' && utils.isUrl(this.source)) {
 46 |       utils.fetch(this.source, (newContent) => {
 47 |         this.html(newContent)
 48 |       })
 49 |     } else if (typeof this.source === 'string') {
 50 |       let htmlContent = dom.getHTMLContent(this.source)
 51 | 
 52 |       if (this.renaming) {
 53 |         htmlContent = dom.addPrefixes(htmlContent)
 54 |       }
 55 | 
 56 |       this.html(htmlContent)
 57 |     } else if (this.source !== null) {
 58 |       console.error('Invalid Sidr Source')
 59 |     }
 60 |   }
 61 | 
 62 |   move (action, callback) {
 63 |     // Lock sidr
 64 |     status.moving = true
 65 | 
 66 |     this.body.prepare(action)
 67 |     this.body.move(action)
 68 |     this.moveMenu(action, callback)
 69 |   }
 70 | 
 71 |   open (callback) {
 72 |     // Check if is already opened or moving
 73 |     if (status.opened === this.name || status.moving) {
 74 |       return
 75 |     }
 76 | 
 77 |     // If another menu opened close first
 78 |     if (status.opened !== false) {
 79 |       let alreadyOpenedMenu = store.get(status.opened)
 80 | 
 81 |       alreadyOpenedMenu.close(() => {
 82 |         this.open(callback)
 83 |       })
 84 | 
 85 |       return
 86 |     }
 87 | 
 88 |     this.move('open', callback)
 89 |     this.onOpenCallback()
 90 |   }
 91 | 
 92 |   close (callback) {
 93 |     // Check if is already closed or moving
 94 |     if (status.opened !== this.name || status.moving) {
 95 |       return
 96 |     }
 97 | 
 98 |     this.move('close', callback)
 99 |     this.onCloseCallback()
100 |   }
101 | 
102 |   toggle (callback) {
103 |     if (status.opened === this.name) {
104 |       this.close(callback)
105 |     } else {
106 |       this.open(callback)
107 |     }
108 |   }
109 | 
110 |   onOpenMenu (callback) {
111 |     let name = this.name
112 | 
113 |     status.moving = false
114 |     status.opened = name
115 | 
116 |     this.unbind(dom.transitions.event, this.temporalOpenMenuCallback)
117 |     this.body.removeAnimationClass()
118 |     this.body.addOpenClass()
119 |     this.onOpenEndCallback()
120 | 
121 |     if (typeof callback === 'function') {
122 |       callback(name)
123 |     }
124 |   }
125 | 
126 |   openMenu (callback) {
127 |     let self = this
128 | 
129 |     this.style(this.side, 0)
130 |     this.temporalOpenMenuCallback = () => {
131 |       self.onOpenMenu(callback)
132 |     }
133 |     this.bind(dom.transitions.event, this.temporalOpenMenuCallback)
134 |   }
135 | 
136 |   onCloseMenu (callback) {
137 |     this.unbind(dom.transitions.event, this.temporalCloseMenuCallback)
138 |     this.style({
139 |       left: '',
140 |       right: ''
141 |     })
142 |     this.body.unprepare()
143 | 
144 |     status.moving = false
145 |     status.opened = false
146 | 
147 |     this.body.removeAnimationClass()
148 |     this.body.removeOpenClass()
149 |     this.onCloseEndCallback()
150 |     if (typeof callback === 'function') {
151 |       callback(name)
152 |     }
153 |   }
154 | 
155 |   closeMenu (callback) {
156 |     let self = this
157 | 
158 |     this.style(this.side, '')
159 |     this.temporalCloseMenuCallback = () => {
160 |       self.onCloseMenu(callback)
161 |     }
162 |     this.bind(dom.transitions.event, this.temporalCloseMenuCallback)
163 |   }
164 | 
165 |   moveMenu (action, callback) {
166 |     if (action === 'open') {
167 |       this.openMenu(callback)
168 |     } else {
169 |       this.closeMenu(callback)
170 |     }
171 |   }
172 | }
173 | 
174 | export default Menu
175 | 


--------------------------------------------------------------------------------
/src/js/runner.js:
--------------------------------------------------------------------------------
 1 | import status from './status'
 2 | import store from './menu.store'
 3 | 
 4 | let getMethod = function (methodName) {
 5 |   return function (name, callback) {
 6 |     // Check arguments
 7 |     if (typeof name === 'function') {
 8 |       callback = name
 9 |       name = 'sidr'
10 |     } else if (!name) {
11 |       name = 'sidr'
12 |     }
13 | 
14 |     let menu = store.get(name)
15 |     menu[methodName](callback)
16 |   }
17 | }
18 | 
19 | let methods = {}
20 | let publicMethods = ['open', 'close', 'toggle', 'reload']
21 | for (let i = 0; i < publicMethods.length; i++) {
22 |   let methodName = publicMethods[i]
23 |   methods[methodName] = getMethod(methodName)
24 | }
25 | 
26 | function runner (method) {
27 |   if (method === 'status') {
28 |     return status
29 |   } else if (methods[method]) {
30 |     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1))
31 |   } else if (typeof method === 'function' || typeof method === 'string' || !method) {
32 |     return methods.toggle.apply(this, arguments)
33 |   } else {
34 |     console.error('Method ' + method + ' does not exist on sidr')
35 |   }
36 | }
37 | 
38 | export default runner
39 | 


--------------------------------------------------------------------------------
/src/js/sidr.js:
--------------------------------------------------------------------------------
 1 | import defaultOptions from './default.options'
 2 | import store from './menu.store'
 3 | import utils from './utils/utils'
 4 | import Menu from './models/menu'
 5 | import Button from './models/button'
 6 | import runner from './runner'
 7 | import dom from './utils/dom'
 8 | 
 9 | export default {
10 |   new (selector, options) {
11 |     let settings = utils.extend(defaultOptions, options)
12 |     let buttons = dom.qsa(selector)
13 | 
14 |     store.add(settings.name, new Menu(settings))
15 |     for (let i = 0; i < buttons.length; i++) {
16 |       new Button(buttons[i], settings)
17 |     }
18 |   },
19 | 
20 |   status () {
21 |     return runner('status', ...arguments)
22 |   },
23 | 
24 |   reload () {
25 |     return runner('reload', ...arguments)
26 |   },
27 | 
28 |   close () {
29 |     return runner('close', ...arguments)
30 |   },
31 | 
32 |   open () {
33 |     return runner('open', ...arguments)
34 |   },
35 | 
36 |   toggle () {
37 |     return runner('toggle', ...arguments)
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/js/status.js:
--------------------------------------------------------------------------------
1 | var sidrStatus = {
2 |   moving: false,
3 |   opened: false
4 | }
5 | 
6 | export default sidrStatus
7 | 


--------------------------------------------------------------------------------
/src/js/utils/dom.js:
--------------------------------------------------------------------------------
 1 | function addPrefix (item, attribute) {
 2 |   let toReplace = item.getAttribute(attribute)
 3 | 
 4 |   if (typeof toReplace === 'string' && toReplace !== '' && toReplace !== 'sidr-inner') {
 5 |     item.setAttribute(attribute, toReplace.replace(/([A-Za-z0-9_.-]+)/g, 'sidr-' + attribute + '-$1'))
 6 |   }
 7 | }
 8 | 
 9 | function getTransitionPrefix (property, style) {
10 |   let prefix
11 |   let prefixes = ['moz', 'webkit', 'o', 'ms']
12 |   for (let i = 0; i < prefixes.length; i++) {
13 |     prefix = prefixes[i]
14 |     if ((prefix + property) in style) {
15 |       return prefix
16 |     }
17 |   }
18 | 
19 |   return false
20 | }
21 | 
22 | export default {
23 |   id (elementId) {
24 |     return document.getElementById(elementId)
25 |   },
26 | 
27 |   qs (selector) {
28 |     return document.querySelector(selector)
29 |   },
30 | 
31 |   qsa (selectors) {
32 |     return document.querySelectorAll(selectors)
33 |   },
34 | 
35 |   createElement (elementId) {
36 |     var elem = document.createElement('div')
37 |     elem.id = elementId
38 |     document.body.appendChild(elem)
39 | 
40 |     return elem
41 |   },
42 | 
43 |   getHTMLContent (selectors) {
44 |     let htmlContent = ''
45 |     let items = this.qsa(selectors)
46 | 
47 |     for (let i = 0; i < items.length; i++) {
48 |       htmlContent += '<div class="sidr-inner">' + items[i].innerHTML + '</div>'
49 |     }
50 | 
51 |     return htmlContent
52 |   },
53 | 
54 |   addPrefixes (htmlContent) {
55 |     let elem = document.createElement('div')
56 |     elem.innerHTML = htmlContent
57 | 
58 |     let items = elem.querySelectorAll('*')
59 |     for (let i = 0; i < items.length; i++) {
60 |       addPrefix(items[i], 'id')
61 |       addPrefix(items[i], 'class')
62 |       items[i].removeAttribute('style')
63 |     }
64 | 
65 |     return elem.innerHTML
66 |   },
67 | 
68 |   transitions: (function () {
69 |     let body = document.body || document.documentElement
70 |     let style = body.style
71 |     let supported = false
72 |     let property = 'transition'
73 |     let cssProperty = 'transition'
74 |     let event = 'transitionend'
75 | 
76 |     if (property in style) {
77 |       supported = true
78 |     } else {
79 |       property = property.charAt(0).toUpperCase() + property.substr(1)
80 |       let prefix = getTransitionPrefix(property, style)
81 |       supported = !!prefix
82 |       cssProperty = supported ? prefix + property : null
83 |       property = supported ? '-' + prefix + '-' + property.toLowerCase() : null
84 |       if (prefix === 'webkit') {
85 |         event = 'webkitTransitionEnd'
86 |       } else if (prefix === '0') {
87 |         event = 'oTransitionEnd'
88 |       }
89 |     }
90 | 
91 |     return { cssProperty, supported, property, event }
92 |   }())
93 | }
94 | 


--------------------------------------------------------------------------------
/src/js/utils/utils.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Check for valids urls
 3 |   // From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url
 4 |   isUrl (str) {
 5 |     let pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
 6 |       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
 7 |       '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
 8 |       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
 9 |       '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
10 |       '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
11 | 
12 |     if (pattern.test(str)) {
13 |       return true
14 |     } else {
15 |       return false
16 |     }
17 |   },
18 | 
19 |   extend (a, b) {
20 |     for (let key in b) {
21 |       if (b.hasOwnProperty(key)) {
22 |         a[key] = b[key]
23 |       }
24 |     }
25 | 
26 |     return a
27 |   },
28 | 
29 |   fetch (url, callback) {
30 |     let xmlhttp = new XMLHttpRequest()
31 |     xmlhttp.onreadystatechange = function () {
32 |       if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
33 |         callback(xmlhttp.responseText)
34 |       }
35 |     }
36 |     xmlhttp.open('GET', url, true)
37 |     xmlhttp.send()
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/sidr.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Sidr
 3 |  * https://github.com/artberri/sidr
 4 |  *
 5 |  * Copyright (c) 2013-2017 Alberto Varela
 6 |  * Licensed under the MIT license.
 7 |  */
 8 | 
 9 | import sidr from './js/sidr'
10 | 
11 | window.sidr = sidr
12 | 


--------------------------------------------------------------------------------