├── .bowerrc
├── src
├── assets
│ └── inner-header-bg.jpg
├── css
│ ├── touch-menu-la.min.css
│ ├── touch-menu-la.css
│ └── sample.css
└── js
│ ├── touch-menu-la.min.js
│ ├── touch-menu-la.min.js.map
│ └── touch-menu-la.js
├── lib
└── hammerjs
│ ├── bower.json
│ ├── .bower.json
│ ├── LICENSE.md
│ ├── README.md
│ ├── CONTRIBUTING.md
│ ├── changelog.js
│ ├── CHANGELOG.md
│ ├── hammer.min.js
│ ├── hammer.min.map
│ └── hammer.js
├── bower.json
├── package.json
├── sample.html
└── README.md
/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 | "directory":"lib"
3 | }
--------------------------------------------------------------------------------
/src/assets/inner-header-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ericktatsui/Touch-Menu-Like-Android/HEAD/src/assets/inner-header-bg.jpg
--------------------------------------------------------------------------------
/lib/hammerjs/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hammerjs",
3 | "main": "hammer.js",
4 | "ignore": [
5 | "tests",
6 | "src",
7 | ".bowerrc",
8 | ".gitignore",
9 | ".jscsrc",
10 | ".jshintrc",
11 | ".travis.yml",
12 | "component.json",
13 | "Gruntfile.coffee",
14 | "package.json"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/src/css/touch-menu-la.min.css:
--------------------------------------------------------------------------------
1 | .tmla-mask,.touch-menu-la,.touch-menu-la .tmla-handle{height:100%;position:absolute;top:0}.touch-menu-la{width:280px;left:-280px;background-color:#FFF}.touch-menu-la.opened{transition:all .3s ease!important;-webkit-transition:all .3s ease!important;-moz-transition:all .3s ease!important}.touch-menu-la.closed{transition:all .3s ease!important;-webkit-transition:all .3s ease!important;-moz-transition:all .3s ease!important;transform:translate3d(0,0,0)!important;-webkit-transform:translate3d(0,0,0)!important;-moz-transform:translate3d(0,0,0)!important}.tmla-mask{width:100%;left:0;background-color:#000;opacity:0;z-index:-1}
--------------------------------------------------------------------------------
/lib/hammerjs/.bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hammerjs",
3 | "main": "hammer.js",
4 | "ignore": [
5 | "tests",
6 | "src",
7 | ".bowerrc",
8 | ".gitignore",
9 | ".jscsrc",
10 | ".jshintrc",
11 | ".travis.yml",
12 | "component.json",
13 | "Gruntfile.coffee",
14 | "package.json"
15 | ],
16 | "homepage": "https://github.com/hammerjs/hammer.js",
17 | "version": "2.0.6",
18 | "_release": "2.0.6",
19 | "_resolution": {
20 | "type": "version",
21 | "tag": "v2.0.6",
22 | "commit": "05f0872c6130daf537bad27a393310cd5833c9a1"
23 | },
24 | "_source": "git://github.com/hammerjs/hammer.js.git",
25 | "_target": "^2.0.6",
26 | "_originalSource": "hammer.js"
27 | }
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "touch-menu-la",
3 | "description": "A touch menu like Navigation Drawer of Android.",
4 | "main": "sample.hmtl",
5 | "authors": [
6 | "Erick Tatsui"
7 | ],
8 | "license": "MIT",
9 | "keywords": [
10 | "menu",
11 | "slide",
12 | "menu",
13 | "like",
14 | "android",
15 | "navigator",
16 | "drawer",
17 | "html5",
18 | "javascript",
19 | "plugin",
20 | "touch",
21 | "menu",
22 | "cordova",
23 | "ionic",
24 | "like android"
25 | ],
26 | "homepage": "https://github.com/ericktatsui/Touch-Menu-Like-Android",
27 | "moduleType": [],
28 | "ignore": [
29 | "**/.*",
30 | "node_modules",
31 | "bower_components",
32 | "test",
33 | "tests"
34 | ],
35 | "dependencies": {
36 | "hammerjs": "hammer.js#^2.0.6"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "touch-menu-la",
3 | "version": "0.5.0",
4 | "description": "A touch menu like Navigation Drawer of Android.",
5 | "main": "sample.hmtl",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/ericktatsui/Touch-Menu-Like-Android.git"
12 | },
13 | "keywords": [
14 | "menu",
15 | "slide",
16 | "menu",
17 | "like",
18 | "android",
19 | "navigator",
20 | "drawer",
21 | "html5",
22 | "javascript",
23 | "plugin",
24 | "touch",
25 | "menu",
26 | "cordova",
27 | "ionic",
28 | "like android"
29 | ],
30 | "author": "Erick Tatsui",
31 | "license": "MIT",
32 | "bugs": {
33 | "url": "https://github.com/ericktatsui/Touch-Menu-Like-Android/issues"
34 | },
35 | "homepage": "https://github.com/ericktatsui/Touch-Menu-Like-Android#readme"
36 | }
37 |
--------------------------------------------------------------------------------
/src/css/touch-menu-la.css:
--------------------------------------------------------------------------------
1 | .touch-menu-la {
2 | width: 280px;
3 | height: 100%;
4 | position: absolute;
5 | top: 0;
6 | left: -280px;
7 | background-color: #FFF;
8 | }
9 |
10 | .touch-menu-la .tmla-handle {
11 | position: absolute;
12 | /* right: -20px; */
13 | top: 0;
14 | /* width: 20px; */
15 | height: 100%;
16 | }
17 |
18 | .touch-menu-la.opened {
19 | transition: all 0.3s ease-out !important;
20 | -webkit-transition: all 0.3s ease-out !important;
21 | -moz-transition: all 0.3s ease-out !important;
22 | }
23 |
24 | .touch-menu-la.closed {
25 | transition: all 0.3s ease-out !important;
26 | -webkit-transition: all 0.3s ease-out !important;
27 | -moz-transition: all 0.3s ease-out !important;
28 | transform: none !important;
29 | -webkit-transform: none !important;
30 | -moz-transform: none !important;
31 | }
32 |
33 | .tmla-mask {
34 | width: 100%;
35 | height: 100%;
36 | position: absolute;
37 | top: 0;
38 | left: 0;
39 | background-color: #000;
40 | opacity: 0.0;
41 | z-index: -1;
42 | }
43 |
--------------------------------------------------------------------------------
/lib/hammerjs/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (C) 2011-2014 by Jorik Tangelder (Eight Media)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/lib/hammerjs/README.md:
--------------------------------------------------------------------------------
1 | # Hammer.js 2.0.6
2 |
3 | [](https://travis-ci.org/hammerjs/hammer.js)
4 |
5 | ## Support, Questions, and Collaboration
6 |
7 | [](https://hammerjs.herokuapp.com/)
8 |
9 | ## Documentation
10 |
11 | Visit [hammerjs.github.io](http://hammerjs.github.io) for detailed documentation.
12 |
13 | ```js
14 | // get a reference to an element
15 | var stage = document.getElementById('stage');
16 |
17 | // create a manager for that element
18 | var mc = new Hammer.Manager(stage);
19 |
20 | // create a recognizer
21 | var Rotate = new Hammer.Rotate();
22 |
23 | // add the recognizer
24 | mc.add(Rotate);
25 |
26 | // subscribe to events
27 | mc.on('rotate', function(e) {
28 | // do something cool
29 | var rotation = Math.round(e.rotation);
30 | stage.style.transform = 'rotate('+rotation+'deg)';
31 | });
32 | ```
33 |
34 |
35 | ## Contributing
36 |
37 | Read the [contributing guidelines](./CONTRIBUTING.md).
38 |
39 | For PRs.
40 |
41 | - Use [Angular Style commit messages](https://github.com/angular/angular.js/blob/v1.4.8/CONTRIBUTING.md#commit)
42 | - Rebase your PR branch when necessary
43 | - If you add a feature or fix a bug, please add or fix any necessary tests.
44 | - If a new feature, open a docs PR to go with.
45 |
46 | ## Building
47 |
48 | You can get the pre-build versions from the Hammer.js website, or do this by yourself running
49 | `npm install -g grunt-cli && npm install && grunt build`
50 |
--------------------------------------------------------------------------------
/lib/hammerjs/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Hammer.js
2 |
3 | Looking to contribute something to Hammer.js? **Here's how you can help.**
4 |
5 |
6 | ## Reporting issues
7 |
8 | We only accept issues that are bug reports or feature requests. Bugs must be
9 | isolated and reproducible problems that can be fixed within the Hammer.js.
10 | Please read the following guidelines before opening any issue.
11 |
12 | 1. [**Read the documentation**](https://hammerjs.github.io)
13 |
14 | 2. **Search for existing issues.** We get a lot of duplicate issues, and you'd
15 | help us out a lot by first checking if someone else has reported the same issue.
16 | Moreover, the issue may have already been resolved with a fix available. Also
17 | take a look if your problem is explained at the Wiki.
18 |
19 | 3. **Create an isolated and reproducible test case.** Be sure the problem exists
20 | in Hammer's code with a reduced test case that should be included in each bug
21 | report.
22 |
23 | 4. **Include a live example.** Make use of jsFiddle or jsBin to share your
24 | isolated test cases. Also, a screen capture would work, with tools like LICEcap.
25 |
26 | 5. **Share as much information as possible.** Include operating system and
27 | version, browser and version, version of Hammer.js, customized or vanilla build,
28 | etc. where appropriate. Also include steps to reproduce the bug.
29 |
30 | ## Pull requests
31 |
32 | 1. Changes must be done in `/src` files, never just the compiled files. Also, don't
33 | commit the compiled files.
34 |
35 | 2. Try not to pollute your pull request with unintended changes. Keep them simple
36 | and small
37 |
38 | 3. Try to share which browsers your code has been tested in before submitting a
39 | pull request
40 |
41 | 4. Write tests for your code, these can be found in `/tests`.
42 |
--------------------------------------------------------------------------------
/lib/hammerjs/changelog.js:
--------------------------------------------------------------------------------
1 | var changelog = require( "changelogplease" );
2 | var gittags = require( "git-tags" ).get( function( error, tags ) {
3 | if ( error ) {
4 | throw error
5 | }
6 | console.log( tags[ 1 ] + ".." + tags[ 0 ] );
7 | var exclude = [ "Merge", "Whitespace", "Fixup", "Cleanup", "Formatting", "Ignore" ];
8 | changelog( {
9 | ticketUrl: "https://github.com/hammerjs/hammer.js/issues/{id}",
10 | commitUrl: "https://github.com/hammerjs/hammerjs/commit/{id}",
11 | sort: false,
12 | repo: "./",
13 | committish: tags[ 1 ] + ".." + tags[ 0 ]
14 | }, function( error, log ) {
15 | if ( error ) {
16 | throw error;
17 | }
18 | log = parseLog( log );
19 | console.log( log );
20 | } );
21 | function parseLog( log ) {
22 | var lines = log.split( "\n" );
23 | var newLog = [];
24 | var log = [];
25 | var currentComponent;
26 |
27 |
28 | lines.shift();
29 | lines.forEach( function( line ) {
30 | var newLine = parseLine( line );
31 | if ( newLine ) {
32 | log.push( line );
33 | }
34 | } );
35 | var log = log.join( "\n" );
36 | return log.replace( /\*/g, "-" ).replace( /__TICKETREF__,/g, "" );
37 | }
38 | function parseLine( line ) {
39 | var parts = getParts( line );
40 |
41 | if ( exclude.indexOf( parts.component ) > -1 ) {
42 | return false;
43 | }
44 | return parts;
45 | }
46 | function getParts( line ) {
47 | var parts = line.split( ":" );
48 | var component = "";
49 | var message;
50 | var commits = line.match( /\{\{([A-Za-z0-9 ]){0,99}\}\}/ )
51 |
52 | if ( parts.length > 1 && parts[ 0 ].length <= 20 ) {
53 | component = parts[ 0 ];
54 | parts.shift();
55 | message = parts.join( ":" );
56 | } else {
57 | parts = line.split( " " );
58 | component = parts[ 1 ];
59 | parts.shift();
60 | message = parts.join( " " );
61 | }
62 |
63 | if ( component ) {
64 | component = component.replace( /\* |,/, "" );
65 | }
66 | return {
67 | component: component,
68 | message: message
69 | };
70 | }
71 | } );
72 |
--------------------------------------------------------------------------------
/src/css/sample.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background: #ECEFF1;
4 | font-family: Roboto;
5 | }
6 |
7 | header {
8 | width: 100%;
9 | height: 56px;
10 | background: #3F51B5;
11 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
12 | }
13 | header i.fa, header i.material-icons {
14 | height: 56px;
15 | width: 56px;
16 | line-height: 56px;
17 | text-align: center;
18 | color: #FFF;
19 | float: left;
20 | cursor: pointer;
21 | }
22 |
23 | header span.title {
24 | height: 56px;
25 | color: #FFF;
26 | float: left;
27 | line-height: 56px;
28 | }
29 |
30 | i {
31 | font-size: 22px !important;
32 | }
33 |
34 | .touch-menu-la .inner-header {
35 | width: 100%;
36 | height: 100px;
37 | background-image: url(../../src/assets/inner-header-bg.jpg);
38 | font-size: 26px;
39 | font-weight: 300;
40 | text-align: center;
41 | color: #FFF;
42 | padding: 20px 0;
43 | box-sizing: border-box;
44 | }
45 |
46 | .touch-menu-la .inner-header span {
47 | display: block;
48 | font-size: 16px;
49 | }
50 |
51 | .menu-items {
52 | list-style: none;
53 | margin: 16px 0;
54 | padding: 0;
55 | }
56 |
57 | .menu-items li a {
58 | padding: 0 16px;
59 | height: 48px;
60 | line-height: 48px;
61 | display: inline-block;
62 | width: 100%;
63 | box-sizing: border-box;
64 | text-decoration: none;
65 | color: #000;
66 | }
67 |
68 | .menu-items li:hover a {
69 | background: #F3F3F3;
70 | cursor: pointer;
71 | }
72 |
73 | .menu-items li i {
74 | width: 24px;
75 | height: 24px;
76 | float: left;
77 | margin-top: 12px;
78 | margin-right: 32px;
79 | }
80 |
81 | .inner-footer {
82 | padding: 16px;
83 | font-size: 14px;
84 | }
85 |
86 | .center-icon {
87 | height: 56px;
88 | width: 100%;
89 | position: absolute;
90 | top: 50%;
91 | left: 0;
92 | z-index: 0;
93 | margin-top: -28px;
94 | color: #CCC;
95 | pointer-events: none;
96 | }
97 | .center-icon i {
98 | font-size: 56px !important;
99 | color: #CCC;
100 | margin-left: 10px;
101 | float: left;
102 | }
103 |
104 | .center-icon i.arrow{
105 | font-size: 20px;
106 | margin-top: 20px;
107 | margin-left: 20px;
108 | }
109 |
110 | .center-icon .text {
111 | height: 56px;
112 | line-height: 70px;
113 | margin-left: 20px;
114 | float: left;
115 | font-size: 25px;
116 | }
--------------------------------------------------------------------------------
/sample.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Sample - Touch Menu Like Android
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Touch Menu L.A.
17 |
18 |
19 |
20 |
keyboard_backspace
21 |
touch_app
22 |
Drag
23 |