Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Restructuring repo

  • Loading branch information...
commit 5447696da4b77fc4e6329c9aa487e9ee26a054bd 1 parent c6452ac
@darsain authored
View
9 .editorconfig
@@ -0,0 +1,9 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
View
51 .jshintrc
@@ -0,0 +1,51 @@
+{
+ "predef" : [
+ "jQuery"
+ ],
+
+ "bitwise": false,
+ "camelcase": false,
+ "curly": true,
+ "eqeqeq": true,
+ "forin": false,
+ "immed": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "noempty": true,
+ "nonew": false,
+ "plusplus": false,
+ "quotmark": false,
+ "regexp": false,
+ "undef": true,
+ "unused": true,
+ "strict": true,
+ "trailing": true,
+
+ "asi": false,
+ "boss": false,
+ "debug": false,
+ "eqnull": true,
+ "es5": false,
+ "esnext": false,
+ "evil": false,
+ "expr": false,
+ "funcscope": false,
+ "globalstrict": false,
+ "iterator": false,
+ "lastsemic": false,
+ "laxbreak": false,
+ "laxcomma": true,
+ "loopfunc": false,
+ "multistr": false,
+ "onecase": true,
+ "proto": false,
+ "regexdash": false,
+ "scripturl": false,
+ "smarttabs": true,
+ "shadow": false,
+ "sub": false,
+ "supernew": false,
+
+ "browser": true
+}
View
33 CONTRIBUTING.md
@@ -0,0 +1,33 @@
+## Submitting an issue
+
+When reporting a bug, please describe it thoroughly, with attached code showcasing how are you using the library. The
+best way how to make it easy for developers, and ensure that your issue will be looked at, is to replicate it on
+[jsfiddle](http://jsfiddle.net/) or a similar service.
+
+## Contributions
+
+Contributions are welcome! But please, follow these few simple rules:
+
+**Maintain the coding style** used throughout the project, and defined in the `.editorconfig` file. You can use the
+[Editorconfig](http://editorconfig.org) plugin for your editor of choice:
+
+- [Sublime Text 2](https://github.com/sindresorhus/editorconfig-sublime)
+- [Textmate](https://github.com/Mr0grog/editorconfig-textmate)
+- [Notepad++](https://github.com/editorconfig/editorconfig-notepad-plus-plus)
+- [Emacs](https://github.com/editorconfig/editorconfig-emacs)
+- [Vim](https://github.com/editorconfig/editorconfig-vim)
+- [Visual Studio](https://github.com/editorconfig/editorconfig-visualstudio)
+- [... other editors](http://editorconfig.org/#download)
+
+---
+
+**Code has to pass JSHint** with options defined in the `.jshintrc` file. You can use `grunt jshint` task to lint
+manually, or again, there are amazing plugins for a lot of popular editors consuming this file and linting as you code:
+
+- [Sublim Text 2](https://github.com/SublimeLinter/SublimeLinter)
+- [TextMate](http://rondevera.github.com/jslintmate/), or [alternative](http://fgnass.posterous.com/jslint-in-textmate)
+- [Notepad++](http://sourceforge.net/projects/jslintnpp/)
+- [Emacs](https://github.com/daleharvey/jshint-mode)
+- [Vim](https://github.com/walm/jshint.vim)
+- [Visual Studio](https://github.com/jamietre/SharpLinter), or [alternative](http://jslint4vs2010.codeplex.com/)
+- [... other editors](http://www.jshint.com/platforms/)
View
115 Gruntfile.js
@@ -0,0 +1,115 @@
+/*jshint node:true */
+module.exports = function(grunt) {
+ 'use strict';
+
+ // Override environment based line endings enforced by Grunt
+ grunt.util.linefeed = '\n';
+
+ // Grunt configuration
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('component.json'),
+ meta: {
+ banner: '/*!\n' +
+ ' * <%= pkg.name %> <%= pkg.version %> - <%= grunt.template.today("dS mmm yyyy") %>\n' +
+ ' * <%= pkg.homepage %>\n' +
+ ' *\n' +
+ ' * Licensed under the <%= pkg.licenses[0].type %> license.\n' +
+ ' * <%= pkg.licenses[0].url %>\n' +
+ ' */\n',
+ bannerLight: '/*! <%= pkg.name %> <%= pkg.version %>' +
+ ' - <%= grunt.template.today("dS mmm yyyy") %> | <%= pkg.homepage %> */'
+ },
+
+ // JSHint the code.
+ jshint: {
+ options: {
+ jshintrc: '.jshintrc'
+ },
+ all: ['src/*.js']
+ },
+
+ // Clean folders.
+ clean: {
+ dist: ['dist/**', '!dist']
+ },
+
+ // Concatenate files.
+ concat: {
+ options: {
+ banner: '<%= meta.banner %>'
+ },
+ vanilla: {
+ src: 'src/<%= pkg.name %>.js',
+ dest: 'dist/<%= pkg.name %>.js'
+ },
+ jquery: {
+ src: ['src/<%= pkg.name %>.js', 'src/jquery.js'],
+ dest: 'dist/jquery.<%= pkg.name %>.js'
+ }
+ },
+
+ // Minify with Google Closure Compiler.
+ gcc: {
+ options: {
+ banner: '<%= meta.bannerLight %>'
+ },
+ vanilla: {
+ src: 'src/<%= pkg.name %>.js',
+ dest: 'dist/<%= pkg.name %>.min.js'
+ },
+ jquery: {
+ src: ['src/<%= pkg.name %>.js', 'src/jquery.js'],
+ dest: 'dist/jquery.<%= pkg.name %>.min.js'
+ }
+ },
+
+ // Compress files.
+ compress: {
+ options: {
+ mode: 'gzip'
+ },
+ vanilla: {
+ src: 'dist/<%= pkg.name %>.min.js',
+ dest: 'dist/<%= pkg.name %>.min.js.gz'
+ },
+ jquery: {
+ src: 'dist/<%= pkg.name %>.jquery.min.js',
+ dest: 'dist/<%= pkg.name %>.jquery.min.js.gz'
+ }
+ },
+
+ // Bump up fields in JSON files.
+ bumpup: ['component.json', '<%= pkg.name %>.jquery.json'],
+
+ // Commit changes and tag the latest commit with a version from JSON file.
+ tagrelease: ['component.json']
+ });
+
+ // These plugins provide necessary tasks.
+ grunt.loadNpmTasks('grunt-contrib-compress');
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-contrib-clean');
+ grunt.loadNpmTasks('grunt-tagrelease');
+ grunt.loadNpmTasks('grunt-bumpup');
+ grunt.loadNpmTasks('grunt-gcc');
+
+ // Build task.
+ grunt.registerTask('build', function () {
+ grunt.task.run('jshint');
+ grunt.task.run('clean');
+ grunt.task.run('concat');
+ grunt.task.run('gcc');
+ });
+
+ // Release task.
+ grunt.registerTask('release', function (type) {
+ type = type ? type : 'patch';
+ grunt.task.run('build');
+ grunt.task.run('bumpup:' + type);
+ grunt.task.run('tagrelease');
+ });
+
+ // Default task.
+ grunt.registerTask('default', ['jshint']);
+};
View
48 compress.sh
@@ -1,48 +0,0 @@
-#/bin/sh
-#
-# @description : BASH script for minifying javascript files
-# @requirements : curl
-
-# Format for minifying multiple files:
-# IN=( file1.js file2.js file3.js )
-IN=jquery.motio.js
-OUT=jquery.motio.min.js
-
-# Compiler settings
-API_URL=http://closure-compiler.appspot.com/compile
-COMPILATION_LEVEL=SIMPLE_OPTIMIZATIONS
-
-# Check if curl is installed
-if [ -z "$(which curl)" ]
-then
- echo 'Please install curl to proceed.'
- exit
-fi
-
-# Itearate through all files
-for f in ${IN[@]}
-do
- if [ -r ${f} ]
- then
- code="${code} --data-urlencode js_code@${f}"
- else
- echo "File ${f} does not exist or is not readable. Skipped."
- fi
-done
-
-# If there is no code, terminate
-if [ -z "${code}" ]
-then
- echo 'Nothing to compile.'
- exit
-fi
-
-# Compile & save new file
-`curl \
- --url ${API_URL} \
- --header 'Content-type: application/x-www-form-urlencoded' \
- ${code} \
- --data output_format=text \
- --data output_info=compiled_code \
- --data compilation_level=${COMPILATION_LEVEL} \
- --output ${OUT}`
View
655 css/style.css
@@ -1,655 +0,0 @@
-/* =============================================================================
- HTML5 display definitions
- ========================================================================== */
-
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
-audio:not([controls]) { display: none; }
-[hidden] { display: none; }
-
-
-/* =============================================================================
- Base
- ========================================================================== */
-
-html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-html, button, input, select, textarea { font-family: sans-serif; color: #222; -webkit-tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; }
-body { margin: 0; font-size: 14px; line-height: 1.4; overflow-y: scroll; background: url('../img/texture.png') #404040; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
-
-::-moz-selection { background: #333; color: #fff; text-shadow: -1px -1px 0 #000 !important; }
-::selection { background: #333; color: #fff; text-shadow: -1px -1px 0 #000 !important; }
-
-
-/* =============================================================================
- Links
- ========================================================================== */
-
-a { color: #a6a6a6; text-decoration: none; }
-a:hover { color: #fff; }
-a:focus { outline: thin dotted; }
-a:hover, a:active { outline: 0; }
-
-
-/* =============================================================================
- Typography
- ========================================================================== */
-
-abbr[title] { border-bottom: 1px dotted; }
-
-b, strong { font-weight: bold; }
-
-blockquote { margin: 1em 40px; }
-
-dfn { font-style: italic; }
-
-hr { display: block; height: 1px; border: 0; border-top: 1px solid; border-color: #ccc; border-color: rgba(0,0,0,0.2); background: rgba(255,255,255,0.3); margin: 1em 0; padding: 0; }
-
-ins { background: #ff9; color: #000; text-decoration: none; }
-
-mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
-
-pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
-
-pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 0.8em; background: #f8f8f8; border: 1px solid #ccc; }
-
-code { padding: 3px 4px; background-color: #f7f7f9; border: 1px solid #e1e1e8; border-radius: 4px; }
-
-q { quotes: none; }
-q:before, q:after { content: ""; content: none; }
-
-small { font-size: 85%; opacity: 0.6; }
-
-sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
-sup { top: -0.5em; }
-sub { bottom: -0.25em; }
-
-
-/* =============================================================================
- Lists
- ========================================================================== */
-
-ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
-dd { margin: 0 0 0 40px; }
-nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
-
-
-/* =============================================================================
- Embedded content
- ========================================================================== */
-
-img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
-
-svg:not(:root) { overflow: hidden; }
-
-
-/* =============================================================================
- Figures
- ========================================================================== */
-
-figure { margin: 0; }
-
-
-/* =============================================================================
- Forms
- ========================================================================== */
-
-form { margin: 0; }
-fieldset { border: 0; margin: 0; padding: 0; }
-
-label { cursor: pointer; }
-
-legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
-
-button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
-
-button, input { line-height: normal; }
-
-button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
-
-button[disabled], input[disabled] { cursor: default; }
-
-input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
-input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
-
-button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
-
-textarea { overflow: auto; vertical-align: top; resize: vertical; }
-
-input:valid, textarea:valid { }
-input:invalid, textarea:invalid { background-color: #f0dddd; }
-
-
-/* =============================================================================
- Headlines
- ========================================================================== */
-
-h6 { margin: 0; font-size: 0.85em; text-transform: uppercase; color: #888; }
-
-
-/* =============================================================================
- Tables
- ========================================================================== */
-
-table { border-collapse: collapse; border-spacing: 0; }
-td { vertical-align: top; }
-
-
-/* =============================================================================
- Elements
- ========================================================================== */
-
-/* Message bubbles */
-.info-bubble { margin: 1em 0; padding: 1px 1em; color: #3a87ad; background: #d9edf7; border: 1px solid #bce8f1; }
-.info-bubble p { margin: 1em 0; }
-
-/* Buttons */
-.btn { display: inline-block; padding: 5px 10px 5px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center; text-decoration: none;
- vertical-align: middle; background-color: #f5f5f5; text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.75);
- background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
- background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
- background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
- background-image: -o-linear-gradient(top, #fff, #e6e6e6);
- background-image: linear-gradient(top, #fff, #e6e6e6);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#333', GradientType=0);
- border: 1px solid;
- border-color: #333 #333 #bfbfbf;
- border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.3);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
- -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
- box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.15);
- cursor: pointer;
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
- *margin-left: .3em;
-}
-.btn:hover,
-.btn:active,
-.btn.active,
-.btn.disabled,
-.btn[disabled] { background-color: #e6e6e6; }
-.btn:active, .btn.active { background-color: #cccccc \9; }
-.btn:first-child { *margin-left: 0; }
-.btn:hover {
- color: #333333;
- text-decoration: none;
- background-color: #e6e6e6;
- background-position: 0 -15px;
- -webkit-transition: background-position 0.1s linear;
- -moz-transition: background-position 0.1s linear;
- -ms-transition: background-position 0.1s linear;
- -o-transition: background-position 0.1s linear;
- transition: background-position 0.1s linear;
-}
-.btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
-.btn.active, .btn:active {
- background-image: none;
- -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
- -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
- background-color: #e6e6e6;
- background-color: #d9d9d9 \9;
- outline: 0;
-}
-.btn.disabled, .btn[disabled] { cursor: default; background-image: none; background-color: #e6e6e6; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none;
- -moz-box-shadow: none; box-shadow: none;
-}
-.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
-.btn-large [class^="icon-"] { margin-top: 1px; }
-.btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px; }
-.btn-small [class^="icon-"] { margin-top: -1px; }
-.btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px; }
-
-.btn-blue,
-.btn-blue:hover,
-.btn-orange,
-.btn-orange:hover,
-.btn-red,
-.btn-red:hover,
-.btn-green,
-.btn-green:hover,
-.btn-black,
-.btn-black:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); color: #ffffff; }
-
-.btn-blue,
-.btn-orange,
-.btn-red,
-.btn-green,
-.btn-black {
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
-}
-.btn-blue.active,
-.btn-orange.active,
-.btn-red.active,
-.btn-green.active { color: rgba(255, 255, 255, 0.75); }
-
-.btn-blue {
- background-color: #006dcc;
- background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
- background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
- background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
- background-image: -o-linear-gradient(top, #0088cc, #0044cc);
- background-image: linear-gradient(top, #0088cc, #0044cc);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
- border-color: #0044cc #0044cc #002a80;
- border-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.5);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-}
-.btn-blue:hover,
-.btn-blue:active,
-.btn-blue.active,
-.btn-blue.disabled,
-.btn-blue[disabled] { background-color: #0044cc; }
-.btn-blue:active, .btn-blue.active { background-color: #003399 \9; }
-
-.btn-orange {
- background-color: #faa732;
- background-image: -moz-linear-gradient(top, #fbb450, #f89406);
- background-image: -ms-linear-gradient(top, #fbb450, #f89406);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
- background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
- background-image: -o-linear-gradient(top, #fbb450, #f89406);
- background-image: linear-gradient(top, #fbb450, #f89406);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
- border-color: #f89406 #f89406 #ad6704;
- border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-}
-.btn-orange:hover,
-.btn-orange:active,
-.btn-orange.active,
-.btn-orange.disabled,
-.btn-orange[disabled] { background-color: #f89406; }
-.btn-orange:active, .btn-orange.active { background-color: #c67605 \9; }
-
-.btn-red {
- background-color: #da4f49;
- background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
- background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
- background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
- background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
- background-image: linear-gradient(top, #ee5f5b, #bd362f);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);
- border-color: #bd362f #bd362f #802420;
- border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.4);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-}
-.btn-red:hover,
-.btn-red:active,
-.btn-red.active,
-.btn-red.disabled,
-.btn-red[disabled] { background-color: #bd362f; }
-.btn-red:active, .btn-red.active { background-color: #942a25 \9; }
-
-.btn-green {
- background-color: #5bb75b;
- background-image: -moz-linear-gradient(top, #62c462, #51a351);
- background-image: -ms-linear-gradient(top, #62c462, #51a351);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
- background-image: -webkit-linear-gradient(top, #62c462, #51a351);
- background-image: -o-linear-gradient(top, #62c462, #51a351);
- background-image: linear-gradient(top, #62c462, #51a351);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
- border-color: #51a351 #51a351 #387038;
- border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-}
-.btn-green:hover,
-.btn-green:active,
-.btn-green.active,
-.btn-green.disabled,
-.btn-green[disabled] { background-color: #51a351; }
-.btn-green:active, .btn-green.active { background-color: #408140 \9; }
-
-.btn-black {
- background-color: #393939;
- background-image: -moz-linear-gradient(top, #454545, #262626);
- background-image: -ms-linear-gradient(top, #454545, #262626);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
- background-image: -webkit-linear-gradient(top, #454545, #262626);
- background-image: -o-linear-gradient(top, #454545, #262626);
- background-image: linear-gradient(top, #454545, #262626);
- background-repeat: repeat-x;
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.3);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.3);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
- border-color: #222 #222 #000;
- border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.7);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-}
-.btn-black:hover,
-.btn-black:active,
-.btn-black.active,
-.btn-black.disabled,
-.btn-black[disabled] { background-color: #222; }
-.btn-black:active, .btn-black.active { background-color: #0c0c0c \9; }
-
-button.btn, input[type="submit"].btn { *padding-top: 2px; *padding-bottom: 2px; }
-button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0; }
-button.btn.large, input[type="submit"].btn.large { *padding-top: 7px; *padding-bottom: 7px; }
-button.btn.small, input[type="submit"].btn.small { *padding-top: 3px; *padding-bottom: 3px; }
-
-.btn-group { position: relative; *zoom: 1; *margin-left: .3em; }
-.btn-group:before, .btn-group:after { display: table; content: ""; }
-.btn-group:after { clear: both; }
-.btn-group:first-child { *margin-left: 0; }
-.btn-group + .btn-group { margin-left: 5px; }
-.btn-toolbar { }
-.btn-toolbar .btn-group { display: inline-block; *display: inline; *zoom: 1; }
-.btn-group .btn { position: relative; float: left; margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-.btn-group .btn:first-child {
- margin-left: 0;
- -webkit-border-top-left-radius: 2px;
- -moz-border-radius-topleft: 2px;
- border-top-left-radius: 2px;
- -webkit-border-bottom-left-radius: 2px;
- -moz-border-radius-bottomleft: 2px;
- border-bottom-left-radius: 2px;
-}
-.btn-group .btn:last-child, .btn-group .dropdown-toggle {
- -webkit-border-top-right-radius: 2px;
- -moz-border-radius-topright: 2px;
- border-top-right-radius: 2px;
- -webkit-border-bottom-right-radius: 2px;
- -moz-border-radius-bottomright: 2px;
- border-bottom-right-radius: 2px;
-}
-.btn-group .btn.large:first-child {
- margin-left: 0;
- -webkit-border-top-left-radius: 2px;
- -moz-border-radius-topleft: 2px;
- border-top-left-radius: 2px;
- -webkit-border-bottom-left-radius: 2px;
- -moz-border-radius-bottomleft: 2px;
- border-bottom-left-radius: 2px;
-}
-.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle {
- -webkit-border-top-right-radius: 2px;
- -moz-border-radius-topright: 2px;
- border-top-right-radius: 2px;
- -webkit-border-bottom-right-radius: 2px;
- -moz-border-radius-bottomright: 2px;
- border-bottom-right-radius: 2px;
-}
-
-/* Labels */
-.label { padding: 2px 4px 2px; font-size: 12px; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.50); background-color: #666;
- -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-bottom: 1px solid #333;
-}
-.label-important { background-color: #b94a48; }
-.label-warning { background-color: #f89406; }
-.label-success { background-color: #468847; }
-.label-info { background-color: #3a87ad; }
-
-/* Progress */
-.progress {
- overflow: hidden;
- height: 18px;
- background-color: #f7f7f7;
- background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
- background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
- background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
- background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
- background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-.progress .bar {
- width: 0%;
- height: 18px;
- float: left;
- color: #ffffff;
- font-size: 12px;
- text-align: center;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- background-color: #5eb95e;
- background-image: -moz-linear-gradient(top, #62c462, #57a957);
- background-image: -ms-linear-gradient(top, #62c462, #57a957);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
- background-image: -webkit-linear-gradient(top, #62c462, #57a957);
- background-image: -o-linear-gradient(top, #62c462, #57a957);
- background-image: linear-gradient(top, #62c462, #57a957);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
- -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
- -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
- box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-transition: width 0.3s ease;
- -moz-transition: width 0.3s ease;
- -ms-transition: width 0.3s ease;
- -o-transition: width 0.3s ease;
- transition: width 0.3s ease;
-}
-
-
-/* ==========================================================================
- Example page boilerplate styles
- ========================================================================== */
-
-body { border: 2px solid #555; border-color: rgba(255,255,255,.1); border-left: 0; border-right: 0; margin: 5px 0; outline: 5px solid #222; }
-
-.container { width: 940px; margin: 0 auto; }
-
-/* Header */
-#header { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
-#header .container { position: relative; height: 190px; }
-#header h1 { margin: 0; padding: 40px 0 0 0; font-family: Exo, sans-serif; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
-#header p { margin: 0; color: #999; font-style: italic; }
-
-#header .download { position: absolute; top: 20px; right: 160px; width: 210px; height: 75px; background: url('../img/download.png') no-repeat right 0; }
-#header .download h4 { margin: 9px 28px 0 0; font: bold 16px/1 Exo, sans-serif; text-align: right; color: #bbb; }
-#header .download a { position: absolute; bottom: 0; height: 100%; text-align: center; }
-#header .download a.left { left: 0; width: 110px; }
-#header .download a.right { right: 0; width: 100px; }
-#header .download a span { display: block; margin-top: 39px; height: 32px; line-height: 32px; }
-#header .download a.left span { border-right: 1px solid #333; }
-#header .download a.right span { border-left: 1px solid #555; }
-#header .download:hover { background-position: right -75px; }
-#header .download:hover h4 { color: #fff; }
-#header .download:hover a.right span { border-color: #888; }
-#header .download a:hover span { background: #5a5a5a; background: rgba(255,255,255,.1); }
-
-#header a.repo { position: absolute; top: -3px; right: 0; width: 120px; height: 130px; background: url('../img/repo.png') no-repeat center top; }
-
-/* Navigation */
-#nav { position: absolute; bottom: -3px; margin: 0; padding: 0; list-style: none; }
-#nav li { display: block; float: left; width: 200px; margin-right: 1px; text-align: center; font-weight: bold; }
-#nav li a { display: block; padding: 15px 0; text-transform: uppercase; border-radius: 0; text-decoration: none; color: #ccc;
- background: #4a4a4a; background: rgba(255,255,255,.04); -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
-}
-#nav li a:hover { color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5); background: #4a4a4a; background: rgba(255,255,255,.1); }
-#nav li a.active { color: #424242; text-shadow: none; background: #f5f5f5;
- background: -moz-linear-gradient(top, #ffffff 32%, #f5f5f5 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* IE10+ */
- background: linear-gradient(top, #ffffff 32%,#f5f5f5 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
- box-shadow: 0 -3px 0 rgba(0,0,0,.5);
-}
-
-/* Content */
-#content { background: #f5f5f5; padding: 10px; text-shadow: 1px 1px 0 rgba(255,255,255,.1); background-clip: padding-box;
- border-top: 3px solid; border-bottom: 3px solid; border-color: rgba(0,0,0,.5);
-}
-#content a { color: #0088cc; }
-#content a:hover { color: #005580; }
-
-/* Footer */
-#footer { font-size: 0.85em; padding: 2.5em 0; color: #fff; text-transform: uppercase; }
-#footer p { margin: 3px 0; }
-
-
-/* ==========================================================================
- Page styles
- ========================================================================== */
-
-/* motio examples */
-.motiowrap { position: relative; margin: 20px 0; padding: 10px; border-radius: 3px;
- background: #fff; border: 1px solid #ddd; border-bottom-color: #ccc;
-}
-.motiowrap .motio { position: relative; float: right; }
-.motiowrap pre { margin-top: 0; width: 450px; background: rgba(255,255,255,.3); border: 0; border-left: 3px solid #eee; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
-
-#pan { height: 170px; background: url('../img/clouds.jpg') 0 0; -webkit-translate: transformZ(0); }
-#pan pre { float: right; margin: 0; width: 200px; border-color: rgba(255,255,255,.5); }
-#fire { width: 192px; height: 192px; background: url('../img/fire2.jpg') 0 0; }
-#fire2 { width: 120px; height: 120px; margin: 10px; background: url('../img/fire.jpg') 0 0; }
-#walk { width: 50px; height: 110px; margin: 20px; background: url('../img/sailormars_walk.png') 0 0; }
-#kick { width: 120px; height: 150px; background: url('../img/sailormars.gif') 0 -600px; }
-
-.optionblock { display: inline-block; margin: 15px 5px 0 0; position: relative; height: 28px; padding: 0 30px 0 10px;
- text-shadow: 1px 1px 0 rgba(255,255,255,.5); vertical-align: middle;
- background: #f8f8f8; background: rgba(240, 240, 240, 0.5); border-radius: 3px;
- -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
- -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
- -ms-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
- -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .2);
-}
-.optionblock > * { display: block; float: left; height: 28px; line-height: 28px; }
-.optionblock .divider { width: 1px; height: 100%; margin: 0 8px; background: #222; background: rgba(0,0,0,.1); background-clip: padding-box;
- border-right: 1px solid #fff; border-color: rgba(255,255,255,.6);
-}
-.optionblock .slider { width: 150px; margin-top: 2px; }
-.optionblock .range { position: absolute; right: 0; top: 0; padding: 0; width: 40px; text-align: center; background: transparent; border: 0; }
-.optionblock,
-.optionblock .range { color: #444; color: rgba(0,0,0,.5); }
-
-#pan,
-#game { border: 0;
- -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
- -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
- -ms-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
- -o-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
-}
-
-/* Minigame styles */
-#minigame { margin: 10px 0; }
-#minigame .keys { line-height: 25px; height: 25px; color: #666; }
-#minigame .key { display: inline-block; height: 25px; padding: 0 10px; font-weight: bold; font-family: Consolas, monospace; text-shadow: 1px 1px 0 white;
- background: #f8f8f8; border-radius: 3px; border: 1px solid;
- border-color: #ccc; border-color: rgba(0,0,0,.1); border-bottom-color: rgba(0,0,0,.2);
-}
-
-#game { position: relative; clear: both; margin: 10px 0; width: 100%; height: 240px; background: url('../img/minigame_bg.png') no-repeat center 0; }
-#game div { position: absolute; }
-
-#game .char { width: 120px; height: 150px; left: 410px; bottom: 0; }
-#game .char div { width: 100%; height: 100%; background: url('../img/sailormars.gif') no-repeat left top; }
-#game .char .stand { background-position: 0 0; }
-#game .char .stand_left { background-position: 0 -150px; }
-#game .char .run { background-position: 0 -300px; }
-#game .char .run_left { background-position: 0 -450px; }
-#game .char .jump { background-position: 0 -600px; }
-#game .char .jump_left { background-position: 0 -750px; }
-#game .char .kick { background-position: 0 -900px; }
-#game .char .kick_left { background-position: 0 -1050px; }
-
-#game .overlay { width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; z-index: 2;
- background: url('../img/minigame_bg.png') no-repeat center -240px;
-}
-
-
-/* ==========================================================================
- Non-semantic helper classes
- ========================================================================== */
-
-/* For image replacement */
-.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
-.ir br { display: none; }
-
-/* Floats */
-.fleft { float: left; }
-.fright { float: right; }
-
-/* Hide from both screenreaders and browsers: h5bp.com/u */
-.hidden { display: none !important; visibility: hidden; }
-
-/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
-.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-
-/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
-.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
-
-/* Hide visually and from screenreaders, but maintain layout */
-.invisible { visibility: hidden; }
-
-/* Contain floats: h5bp.com/q */
-.clearfix:before, .clearfix:after { content: ""; display: table; }
-.clearfix:after { clear: both; }
-.clearfix { *zoom: 1; }
-
-/* PrettyPrint styles */
-.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}
-.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}
-.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
-ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
-
-/* Range input */
-.slider {
- display: inline-block;
- position: relative;
- height: 25px;
- cursor: pointer;
-}
-.progress {
- background: #f5f5f5;
- background: rgba(255, 255, 255, 0.4);
- border-top: 1px solid #aaa;
- border-bottom: 1px solid #fff;
- border-top-color: rgba(0,0,0,.15);
- border-bottom-color: rgba(255,255,255,.6);
- height: 2px;
- margin-top: 11px;
- border-radius: 2px;
-}
-.handle {
- display: block;
- position: absolute;
- top: 7px;
- width: 10px;
- height: 10px;
- border-radius: 50%;
-
- background: #f2f2f2; /* Old browsers */
- background: -moz-linear-gradient(top, #f2f2f2 0%, #d8d8d8 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#d8d8d8)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* IE10+ */
- background: linear-gradient(top, #f2f2f2 0%,#d8d8d8 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */
-
- -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
- -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
- -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
- -o-box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
- box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.3);
-}
View
BIN  img/clouds.jpg
Deleted file not rendered
View
BIN  img/download.png
Deleted file not rendered
View
BIN  img/fire.jpg
Deleted file not rendered
View
BIN  img/fire2.jpg
Deleted file not rendered
View
BIN  img/minigame_bg.png
Deleted file not rendered
View
BIN  img/repo.png
Deleted file not rendered
View
BIN  img/sailormars.gif
Deleted file not rendered
View
BIN  img/sailormars_walk.png
Deleted file not rendered
View
BIN  img/texture.png
Deleted file not rendered
View
471 index.html
@@ -1,471 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Motio - jQuery plugin</title>
- <meta name="description" content="Simple sprite based animations with jQuery.">
- <meta name="viewport" content="width=device-width">
- <link href='http://fonts.googleapis.com/css?family=Exo:700' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="css/style.css">
-</head>
-<body id="top">
-
- <div id="header">
- <div class="container">
-
- <h1>Motio</h1>
- <p>jQuery plugin for simple but powerful sprite based animations and panning</p>
-
- <div class="download">
- <h4>Download latest</h4>
- <a href="//github.com/Darsain/motio/raw/master/jquery.motio.js" class="left"><span>Development</span></a>
- <a href="//github.com/Darsain/motio/raw/master/jquery.motio.min.js" class="right"><span>Production</span></a>
- </div>
-
- <a href="//github.com/Darsain/motio" class="repo ir">Repository &amp; Documentation on Github</a>
-
- <ul id="nav" class="clearfix">
- <li><a href="#examples">Examples</a></li>
- <li><a href="#minigame">Minigame</a></li>
- </ul>
-
- </div>
- </div>
-
- <div id="content">
- <div id="sections" class="container">
-
- <div id="examples" class="clearfix">
-
- <div id="pan" class="motiowrap motio clearfix" data-motio='{ "speed": -50, "bgSize": 1024, "paused": 1 }'>
-
-<pre class="prettyprint lang-js">
-$('#pan').motio({
- speed: -50,
- bgSize: 1024,
- paused: 1
-});
-</pre>
-
-
- <button class="btn" data-action="play">Play</button>
- <button class="btn" data-action="pause">Pause</button>
- <button class="btn" data-action="toggle">Toggle</button>
-
- <br>
-
- <div class="optionblock">
- <span>Speed</span> <span class="divider"></span>
- <input type="text" name="speed" min="-100" max="100" step="1" value="-50" class="range">
- <span class="divider"></span>
- </div>
- <br>
- <div class="optionblock">
- <span>FPS</span> <span class="divider"></span>
- <input type="text" name="fps" min="1" max="60" step="1" value="15" class="range">
- <span class="divider"></span>
- </div>
-
- </div>
-
- <div class="motiowrap clearfix">
-
- <div id="walk" class="motio" data-motio='{ "frames": 12, "fps": 10, "paused": 1 }'></div>
-
-<pre class="prettyprint lang-js">
-$('#walk').motio({ frames: 10, fps: 10, paused: 1 });
-</pre>
-
- <div class="nav">
- <button class="btn" data-action="play">Play</button>
- <button class="btn" data-action="pause">Pause</button>
- <button class="btn" data-action="toggle">Toggle</button>
- </div>
-
- <div class="optionblock">
- <span>FPS</span> <span class="divider"></span>
- <input type="text" name="fps" min="1" max="60" step="1" value="10" class="range">
- <span class="divider"></span>
- </div>
- </div>
-
- <div class="motiowrap clearfix">
-
- <div id="kick" class="motio" data-motio='{ "frames": 10, "fps": 10, "paused": 1 }'></div>
-
-<pre class="prettyprint lang-js">
-$('#kick').motio({ frames: 10, fps: 10, paused: 1 });
-</pre>
-
- <div class="nav">
- <button class="btn" data-action="play">Play</button>
- <button class="btn" data-action="pause">Pause</button>
- <button class="btn" data-action="toggle">Toggle</button>
- <button class="btn" data-action="toStart">ToStart</button>
- <button class="btn" data-action="toEnd">ToEnd</button>
- </div>
-
- <div class="optionblock">
- <span>FPS</span> <span class="divider"></span>
- <input type="text" name="fps" min="1" max="60" step="1" value="10" class="range">
- <span class="divider"></span>
- </div>
-
- </div>
-
- <div class="motiowrap clearfix">
-
- <div id="fire" class="motio" data-motio='{ "frames": 25, "fps": 15, "paused": 1 }'></div>
-
-<pre class="prettyprint lang-js">
-$('#fire').motio({ frames: 25, fps: 15, paused: 1 });
-</pre>
-
- <div class="nav">
- <button class="btn" data-action="toStart">ToStart</button>
- <button class="btn" data-action="toEnd">ToEnd</button>
- </div>
-
- <div class="optionblock">
- <span>FPS</span> <span class="divider"></span>
- <input type="text" name="fps" min="1" max="60" step="1" value="15" class="range">
- <span class="divider"></span>
- </div>
- </div>
-
- <div class="motiowrap clearfix">
-
- <div id="fire2" class="motio" data-motio='{ "frames": 20, "fps": 15, "paused": 1 }'></div>
-
-<pre class="prettyprint lang-js">
-$('#fire2').motio({ frames: 20, fps: 15, paused: 1 });
-</pre>
-
- <div class="nav">
- <button class="btn" data-action="toStart">ToStart</button>
- <button class="btn" data-action="toEnd">ToEnd</button>
- </div>
-
- <div class="optionblock">
- <span>FPS</span> <span class="divider"></span>
- <input type="text" name="fps" min="1" max="60" step="1" value="15" class="range">
- <span class="divider"></span>
- </div>
- </div>
-
- </div><!--end:#examples-->
-
- <div id="minigame">
-
- <div class="keys">
-
- <div class="fright">
- Available keys:
- <span class="key">&larr;</span>
- <span class="key">&rarr;</span>
- <span class="key">Space</span>
- <span class="key">B</span>
- </div>
-
- <span>Motio is not really intended for games, but I just wanted to try :)</span>
-
- </div>
-
- <div id="game">
-
- <div class="char">
-
- <div class="stand"></div>
- <div class="stand_left"></div>
- <div class="run"></div>
- <div class="run_left"></div>
- <div class="jump"></div>
- <div class="jump_left"></div>
- <div class="kick"></div>
- <div class="kick_left"></div>
-
- </div>
-
- <div class="overlay"></div>
- </div>
-
- <small class="fright">Graphics are from <a href="http://spriters-resource.com/arcade/prettysoldiersailormoon/">here</a>. Please don't sue me, anyone :)</small>
-
- <small>I've spent one whole day on this! O_o</small>
-
-<h4>HTLM</h4>
-<pre class="prettyprint lang-html">
-&lt;div id=&quot;game&quot;&gt;
-
- &lt;div class=&quot;char&quot;&gt;
-
- &lt;div class=&quot;stand&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;stand_left&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;run&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;run_left&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;jump&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;jump_left&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;kick&quot;&gt;&lt;/div&gt;
- &lt;div class=&quot;kick_left&quot;&gt;&lt;/div&gt;
-
- &lt;/div&gt;
-
- &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h4>CSS</h4>
-<pre class="prettyprint lang-css">
-#game {
- position: relative;
- clear: both;
- margin: 10px 0;
- width: 100%;
- height: 240px;
- background: url('../img/minigame_bg.png') no-repeat center 0;
-}
-#game div {
- position: absolute;
-}
-
-#game .char {
- width: 120px;
- height: 150px;
- left: 410px;
- bottom: 0;
-}
-#game .char div {
- width: 100%;
- height: 100%;
- background: url('../img/sailormars.gif') no-repeat left top;
-}
-#game .char .stand {
- background-position: 0 0;
-}
-#game .char .stand_left {
- background-position: 0 -150px;
-}
-#game .char .run {
- background-position: 0 -300px;
-}
-#game .char .run_left {
- background-position: 0 -450px;
-}
-#game .char .jump {
- background-position: 0 -600px;
-}
-#game .char .jump_left {
- background-position: 0 -750px;
-}
-#game .char .kick {
- background-position: 0 -900px;
-}
-#game .char .kick_left {
- background-position: 0 -1050px;
-}
-
-#game .overlay {
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- z-index: 2;
- background: url('../img/minigame_bg.png') no-repeat center -240px;
-}
-</pre>
-
-<h4>Javascript <small>- this is REALLY dirty and could be written a LOT smarter, buttfuckit...</small></h4>
-<pre class="prettyprint lang-js">
-var $game = $(&#039;#game&#039;),
- pos = 400,
- $char = $game.find(&#039;.char&#039;).css({ left: pos + &#039;px&#039; }),
- posMax = $game.innerWidth() - $char.innerWidth(),
- facing = &#039;right&#039;,
- moveSpeed = 300,
- moveFps = 30,
- pressed = [],
- inAction = 0,
- inRunning = 0,
- mIndex,
- listenOn = [37,39,32,66],
- $mations = $char.children().hide(),
- mations = {
- right: {
- stand: $mations.filter(&#039;.stand&#039;).motio({ frames: 8, paused: 1, fps: 10 }),
- run: $mations.filter(&#039;.run&#039; ).motio({ frames: 6, paused: 1, fps: 10 }),
- jump: $mations.filter(&#039;.jump&#039; ).motio({ frames: 10, paused: 1, fps: 15 }),
- kick: $mations.filter(&#039;.kick&#039; ).motio({ frames: 9, paused: 1, fps: 15 })
- },
- left: {
- stand: $mations.filter(&#039;.stand_left&#039;).motio({ frames: 8, paused: 1, fps: 10 }),
- run: $mations.filter(&#039;.run_left&#039; ).motio({ frames: 6, paused: 1, fps: 10 }),
- jump: $mations.filter(&#039;.jump_left&#039; ).motio({ frames: 10, paused: 1, fps: 15 }),
- kick: $mations.filter(&#039;.kick_left&#039; ).motio({ frames: 9, paused: 1, fps: 15 })
- }
- };
-
-// Start with standing animation
-mations[facing].stand.show().motio(&#039;play&#039;);
-
-// On actions end
-$mations.not(&#039;.stand,.stand_left,.run,.run_left&#039;).motio(&#039;on&#039;, &#039;end&#039;, function(){
-
- inAction = 0;
- $(this).hide();
- mations[facing][ inRunning ? &#039;run&#039; : &#039;stand&#039; ].show().motio(&#039;play&#039;);
-
-});
-
-// Keydown handlers
-$(document).on(&#039;keydown&#039;, function(event){
-
- if( $.inArray( event.which, listenOn ) === -1 || pressed[event.which] ){
-
- return;
-
- }
-
- pressed[event.which] = true;
-
- var request;
-
- switch( event.which ){
-
- // Left arrow
- case 37:
- request = &#039;run&#039;;
- facing = &#039;left&#039;;
- break;
-
- // Right arrow
- case 39:
- request = &#039;run&#039;;
- facing = &#039;right&#039;;
- break;
-
- // Spacebar
- case 32:
- request = &#039;jump&#039;;
- break;
-
- // B
- case 66:
- request = &#039;kick&#039;;
- break;
-
- }
-
- if( request === &#039;run&#039; ){
-
- inAction = 0;
- mIndex = clearTimeout( mIndex );
- inRunning = 1;
- move();
-
- } else {
-
- inAction = 1;
-
- }
-
- $mations.hide().motio(&#039;toStart&#039;, true);
- mations[facing][request].show().motio( request === &#039;run&#039; ? &#039;play&#039; : &#039;toEnd&#039; );
-
- return false;
-
-});
-
-// Keyup handlers
-$(document).on(&#039;keyup&#039;, function(event){
-
- if( $.inArray( event.which, listenOn ) === -1 ){
-
- return;
-
- }
-
- pressed[event.which] = false;
-
- var released;
-
- switch(event.which){
-
- // Left &amp; arrow
- case 37:
- released = &#039;left&#039;;
- break;
-
- // Right arrow
- case 39:
- released = &#039;right&#039;;
- break;
-
- }
-
- if( inRunning &amp;&amp; facing === released ){
-
- mations[released].run.hide().motio(&#039;toStart&#039;, true);
-
- inRunning = 0;
- mIndex = clearTimeout( mIndex );
-
- if( !inAction ){
-
- mations[&#039;left&#039;].stand.add(mations[&#039;right&#039;].stand).motio(&#039;toStart&#039;, true);
- mations[facing].stand.show().motio(&#039;play&#039;);
-
- }
-
- }
-
- return false;
-
-});
-
-// Move function
-function move(){
-
- if( pos === 0 &amp;&amp; facing === &#039;left&#039; || pos === posMax &amp;&amp; facing === &#039;right&#039; ){
- return;
- }
-
- pos += ( facing === &#039;right&#039; ? moveSpeed : -moveSpeed ) / moveFps;
-
- if( pos &lt; 0 ){
- pos = 0;
- }
- if( pos &gt; posMax ){
- pos = posMax;
- }
-
- $char[0].style.left = pos + &#039;px &#039;;
-
- mIndex = setTimeout( move, 1000 / moveFps );
-
-}
-</pre>
-
- </div><!--end:#minigame-->
-
- </div><!--end:#sections-->
- </div><!--end:#content-->
-
- <div id="footer">
- <div class="container">
- <span class="fright"><a href="#top">Back to top &uarr;</a></span>
- <p>Licensed under the <a href="http://www.opensource.org/licenses/MIT">MIT license</a>.</p>
- </div>
- </div>
-
- <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
-
- <!-- scripts -->
- <script src="jquery.motio.js"></script>
- <script src="js/vendor/plugins.js"></script>
- <script src="js/main.js"></script>
- <!-- end scripts -->
-</body>
-</html>
View
568 jquery.motio.js
@@ -1,568 +0,0 @@
-/*!
- * jQuery Motio v1.0.1
- * https://github.com/Darsain/motio
- *
- * Licensed under the MIT license.
- * http://www.opensource.org/licenses/MIT
- */
-
-/*jshint eqeqeq: true, noempty: true, strict: true, undef: true, expr: true, smarttabs: true, browser: true */
-/*global jQuery:false */
-
-;(function($, undefined){
-'use strict';
-
- var pluginName = 'motio',
- namespace = 'plugin_' + pluginName,
- cAF = window.cancelAnimationFrame || window.cancelRequestAnimationFrame,
- rAF = window.requestAnimationFrame;
-
- // Plugin "class"
- function Plugin( frame, options ){
-
- // Private global variables
- var $frame, o, isPan, tIndex, lastTime, frameSize, frames, active, originalBgPos, bgPos, affected, type, to,
- self = this,
- callbacks = !$.Callbacks ? false : {};
-
- /**
- * Pause animation
- *
- * @public
- */
- this.pause = function(){
-
- if( tIndex ){
-
- tIndex = clearTimeout( tIndex );
-
- trigger( 'pause' );
-
- }
-
- };
-
- /**
- * Play animation
- *
- * @public
- */
- this.play = function(){
-
- if( !tIndex ){
-
- render();
- trigger( 'play' );
-
- }
-
- };
-
- /**
- * Pause or Play animation, depending on its current state
- *
- * @public
- */
- this.toggle = function(){
-
- trigger( 'toggle' );
- self[ tIndex ? 'pause' : 'play' ]();
-
- };
-
- /**
- * Update one of the dynamic option properties
- *
- * Only some options can be updated:
- * speed, fps
- *
- * @public
- *
- * @param {String} option Option name
- * @param {Mixed} value New option value
- */
- this.set = function( option, value ){
-
- var updateable = [ 'speed', 'fps' ];
-
- if( $.inArray( option, updateable ) !== -1 ){
-
- o[option] = value;
-
- }
-
- };
-
- /**
- * Animate or directly set sprite to its first frame and than pause
- *
- * @public
- *
- * @param {Bool} immediate Move to start immediately without animation
- */
- this.toStart = function( immediate ){
-
- if( isPan ){
-
- return;
-
- }
-
- if( immediate || active === 0 ){
-
- type = false;
-
- trigger( 'start' );
- self.pause();
- setPos( 0 );
-
- } else {
-
- type = 'toStart';
-
- self.play();
-
- }
-
- };
-
-
- /**
- * Animate or directly set sprite to its last frame and than pause
- *
- * @public
- *
- * @param {Bool} immediate Move to end immediately without animation
- */
- this.toEnd = function( immediate ){
-
- if( isPan ){
-
- return;
-
- }
-
- if( immediate || active === frames.length - 1 ){
-
- type = 0;
-
- trigger( 'end' );
- self.pause();
- setPos( frames.length -1 );
-
- } else {
-
- type = 'toEnd';
-
- self.play();
-
- }
-
- };
-
-
- /**
- * Animate or directly set sprite to passed frame index and than pause
- *
- * @public
- *
- * @param {Int} frame Frame index starting at 0
- * @param {Bool} immediate Move to end immediately without animation
- */
- this.to = function( frame, immediate ){
-
- if( isPan || !isNumber( frame ) || frame < 0 && frame >= frames.length ){
-
- return;
-
- }
-
- if( immediate || frame === active ){
-
- type = 0;
-
- trigger( 'to', [ frame ] );
- self.pause();
- setPos( frame );
-
- } else {
-
- type = 'to';
- to = frame;
-
- self.play();
-
- }
-
- };
-
- /**
- * Binds callbacks to custom event lists using jQuery.Callbacks
- *
- * @public
- *
- * @param {String} eName Event name
- * @param {Function} fn Callback function, or array with functions
- */
- this.on = function( eName, fn ){
-
- if( callbacks && fn ){
-
- if( !callbacks[eName] ){
-
- callbacks[eName] = $.Callbacks('unique');
-
- }
-
- callbacks[eName].add( fn );
-
- }
-
- };
-
- /**
- * Remove on or all callbacks from custom event list
- *
- * @public
- *
- * @param {String} eName Event name
- * @param {Function} fn Callback function to be removed. If nothing is passed, all callbacks for 'eName' will be removed
- */
- this.off = function( eName, fn ){
-
- if( callbacks && callbacks[eName] ){
-
- if( fn ){
-
- callbacks[eName].remove( fn );
-
- } else {
-
- callbacks[eName].empty();
-
- }
-
- }
-
- };
-
- /**
- * Trigger callbacks from custom event list
- *
- * @public
- *
- * @param {String} eName Event name
- * @param {Array} args Array with arguments for callback functions
- */
- function trigger( eName, args ){
-
- if( callbacks && callbacks[eName] ){
-
- callbacks[eName].fireWith( frame, args );
-
- }
-
- $frame.trigger( pluginName + ':' + eName, args );
-
- }
-
- /**
- * Destroy plugin instance and reset backgroundPosition to its original state
- *
- * @public
- */
- this.destroy = function(){
-
- self.pause();
- $frame.css('backgroundPosition', originalBgPos);
- $.removeData( frame, namespace );
-
- };
-
- /**
- * Render animation frame
- *
- * @public
- */
- function render(){
-
- var newpos;
-
- // Call next frame
- tIndex = setTimeout( function(){
-
- rAF( render );
-
- }, 1000 / o.fps );
-
-
- if( isPan ){
-
- bgPos[affected] = bgPos[affected] + ( o.speed / o.fps );
-
- if( o.bgSize > 0 && Math.abs( bgPos[affected] ) > o.bgSize ){
-
- bgPos[affected] = bgPos[affected] % o.bgSize;
-
- }
-
- newpos = bgPos;
-
- } else {
-
- switch( type ){
-
- case 'toStart':
-
- if( --active <= 0 ){
-
- type = active = 0;
-
- self.pause();
-
- trigger( 'start' );
-
- }
-
- break;
-
- case 'toEnd':
-
- if( ++active >= frames.length -1 ){
-
- type = 0;
- active = frames.length - 1;
-
- self.pause();
-
- trigger( 'end' );
-
- }
-
- break;
-
- case 'to':
-
- if( active < to ){
-
- active++;
-
- } else if( active > to ){
-
- active--;
-
- }
-
- if( active === to ){
-
- trigger( 'to', [ frame ] );
- self.pause();
-
- }
-
- break;
-
- default:
-
- if( ++active >= frames.length ){
-
- active = 0;
-
- }
-
- }
-
- newpos = active;
-
- }
-
- // Update background position
- setPos( newpos );
-
- }
-
-
- /**
- * Set frame position
- *
- * @param {Mixed} arg Frame index in 'frames' array, or position object
- */
- function setPos( arg ){
-
- var pos = !isPan && isNumber( arg ) ? frames[arg] : typeof arg === 'object' ? arg.x + 'px ' + arg.y + 'px' : false;
-
- if( pos ){
-
- frame.style.backgroundPosition = pos;
-
- if( !isPan ){
-
- active = arg;
-
- }
-
- trigger( 'frame', isPan ? [ arg[affected], o.bgSize ] : [ arg, frames.length ] );
-
- }
-
- }
-
-
- /**
- * Check whether the value is a number
- *
- * @private
- *
- * @param {Mixed} value Value to be checked
- *
- * @return {Boolean} True if number, false if not
- */
- function isNumber( value ){
-
- return !isNaN( parseFloat( value ) ) && isFinite( value );
-
- }
-
-
- /** Construct */
- (function(){
-
- // Set variables
- $frame = $(frame);
- o = $.extend( {}, $.fn[pluginName].defaults, options );
- isPan = !o.frames;
- tIndex = 0;
- frameSize = $frame[ o.vertical ? 'innerHeight' : 'innerWidth' ]();
- affected = o.vertical ? 'y' : 'x';
- originalBgPos = $frame.css('backgroundPosition') || $frame.css('backgroundPositionX') + ' ' + $frame.css('backgroundPositionY');
-
- // Background position
- var posString = originalBgPos.replace(/left|top/g, 0).split(" ");
- bgPos = {
- x: parseInt( posString[0], 10 ),
- y: parseInt( posString[1], 10 )
- };
-
- // Build frames array
- if( !isPan ){
-
- var tmpPos = bgPos;
- frames = [];
-
- for( var i = 0; i < o.frames; i++ ){
-
- tmpPos[affected] = i * -frameSize;
-
- frames.push( tmpPos.x + 'px ' + tmpPos.y + 'px' );
-
- }
-
- active = -1;
-
- }
-
- // Start animation
- if( !o.paused ){
-
- lastTime = 0;
- render();
-
- }
-
- }());
-
- }
-
-
- // jQuery plugin extension
- $.fn[pluginName] = function( options, returnInstance ){
-
- var method = false,
- methodArgs,
- instances = [];
-
- // Basic attributes logic
- if( typeof options !== 'undefined' && !$.isPlainObject( options ) ){
- method = options === false ? 'destroy' : options;
- methodArgs = arguments;
- Array.prototype.shift.call( methodArgs );
- }
-
- // Apply requested actions on all elements
- this.each(function( i, e ){
-
- // Plugin call with prevention against multiple instantiations
- var plugin = $.data( e, namespace );
-
- if( plugin && method ){
-
- // Call plugin method
- if( plugin[method] ){
-
- plugin[method].apply( plugin, methodArgs );
-
- }
-
- } else if( !plugin && !method ){
-
- // Create a new plugin object if it doesn't exist yet
- plugin = $.data( e, namespace, new Plugin( e, options ) );
-
- }
-
- // Push plugin to instances
- instances.push( plugin );
-
- });
-
- // Return chainable jQuery object, or plugin instance(s)
- return returnInstance && !method ? instances.length > 1 ? instances : instances[0] : this;
-
- };
-
-
- // Default options
- $.fn[pluginName].defaults = {
- // global options
- fps: 15, // frames per second - bigger number means smoother animations but higher CPU load
- vertical: 0, // true for vertical sprites
- paused: 0, // whether to start motio paused
-
- // sprite based animation specific options ("frames === 0" means that you are requesting panning animation)
- frames: 0, // number of frames in sprite
-
- // pan specific options
- speed: 50, // number of pixels to move per second (use negative number to go in an opposite direction)
- bgSize: 0 // size of the background image in animated direction (width for horizontal, height for vertical)
- // it is needed so the script will know when to reset the background position to 0, and thus not overflow the JavaScript 2^53 integer limit
- // when 0 (=unknown), the position will iterate into ridiculous numbers, which might eventually result into a buggy animation later on...
- };
-
-
- // local requestAnimationFrame polyfill
- (function (w) {
- var vendors = ['ms', 'moz', 'webkit', 'o'],
- lastTime = 0;
-
- // For a more accurate WindowAnimationTiming interface implementation, ditch the native
- // requestAnimationFrame when cancelAnimationFrame is not present (older versions of Firefox)
- for(var x = 0; x < vendors.length && !cAF; ++x) {
- cAF = w[vendors[x]+'CancelAnimationFrame'] || w[vendors[x]+'CancelRequestAnimationFrame'];
- rAF = cAF && w[vendors[x]+'RequestAnimationFrame'];
- }
-
- if (!cAF) {
- rAF = function (callback) {
- var currTime = +new Date(),
- timeToCall = Math.max(0, 16 - (currTime - lastTime));
- lastTime = currTime + timeToCall;
- return w.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
- };
-
- cAF = function (id) {
- clearTimeout(id);
- };
- }
- }(window));
-
-})(jQuery);
View
6 jquery.motio.min.js
@@ -1,6 +0,0 @@
-(function(d){function C(g,p){function b(a,b){h&&h[a]&&h[a].fireWith(g,b);m.trigger(u+":"+a,b)}function q(){var a;r=setTimeout(function(){v(q)},1E3/c.fps);if(e)n[o]+=c.speed/c.fps,0<c.bgSize&&Math.abs(n[o])>c.bgSize&&(n[o]%=c.bgSize),a=n;else{switch(k){case "toStart":0>=--f&&(k=f=0,i.pause(),b("start"));break;case "toEnd":++f>=j.length-1&&(k=0,f=j.length-1,i.pause(),b("end"));break;case "to":f<w?f++:f>w&&f--;f===w&&(b("to",[g]),i.pause());break;default:++f>=j.length&&(f=0)}a=f}l(a)}function l(a){var d=
-!e&&!isNaN(parseFloat(a))&&isFinite(a)?j[a]:"object"===typeof a?a.x+"px "+a.y+"px":!1;d&&(g.style.backgroundPosition=d,e||(f=a),b("frame",e?[a[o],c.bgSize]:[a,j.length]))}var m,c,e,r,t,j,f,x,n,o,k,w,i=this,h=!d.Callbacks?!1:{};this.pause=function(){r&&(r=clearTimeout(r),b("pause"))};this.play=function(){r||(q(),b("play"))};this.toggle=function(){b("toggle");i[r?"pause":"play"]()};this.set=function(a,b){-1!==d.inArray(a,["speed","fps"])&&(c[a]=b)};this.toStart=function(a){e||(a||0===f?(k=!1,b("start"),
-i.pause(),l(0)):(k="toStart",i.play()))};this.toEnd=function(a){e||(a||f===j.length-1?(k=0,b("end"),i.pause(),l(j.length-1)):(k="toEnd",i.play()))};this.to=function(a,c){if(!e&&!(isNaN(parseFloat(a))||!isFinite(a)||0>a&&a>=j.length))c||a===f?(k=0,b("to",[a]),i.pause(),l(a)):(k="to",w=a,i.play())};this.on=function(a,b){h&&b&&(h[a]||(h[a]=d.Callbacks("unique")),h[a].add(b))};this.off=function(a,b){h&&h[a]&&(b?h[a].remove(b):h[a].empty())};this.destroy=function(){i.pause();m.css("backgroundPosition",
-x);d.removeData(g,y)};m=d(g);c=d.extend({},d.fn[u].defaults,p);e=!c.frames;r=0;t=m[c.vertical?"innerHeight":"innerWidth"]();o=c.vertical?"y":"x";x=m.css("backgroundPosition")||m.css("backgroundPositionX")+" "+m.css("backgroundPositionY");var s=x.replace(/left|top/g,0).split(" ");n={x:parseInt(s[0],10),y:parseInt(s[1],10)};if(!e){s=n;j=[];for(var z=0;z<c.frames;z++)s[o]=z*-t,j.push(s.x+"px "+s.y+"px");f=-1}c.paused||q()}var u="motio",y="plugin_"+u,v;d.fn[u]=function(g,p){var b=!1,q,l=[];"undefined"!==
-typeof g&&!d.isPlainObject(g)&&(b=!1===g?"destroy":g,q=arguments,Array.prototype.shift.call(q));this.each(function(m,c){var e=d.data(c,y);e&&b?e[b]&&e[b].apply(e,q):!e&&!b&&(e=d.data(c,y,new C(c,g)));l.push(e)});return p&&!b?1<l.length?l:l[0]:this};d.fn[u].defaults={fps:15,vertical:0,paused:0,frames:0,speed:50,bgSize:0};for(var A=0,B=["ms","moz","webkit","o"],t=0;t<B.length&&!v;++t)v=window[B[t]+"RequestAnimationFrame"];v||(v=function(d){var p=(new Date).getTime(),b=Math.max(0,16-(p-A));A=p+b;return setTimeout(function(){d(p+
-b)},b)})})(jQuery);
View
317 js/main.js
@@ -1,317 +0,0 @@
-jQuery(function($){
-
- // -----------------------------------------------------------------------------------
- // Examples
- // -----------------------------------------------------------------------------------
-
- $('#examples').find('.motiowrap').each(function(i,el){
-
- var $wrap = $(this),
- $frame = $wrap.filter('.motio').add( $wrap.find('.motio') ).eq(0),
- options = $frame.data('motio'),
- $buttons = $wrap.find('[data-action]'),
- $ranges = $wrap.find('.range'),
- stats = new Stats();
-
- // Stats
- stats.domElement.style.position = 'absolute';
- if( $frame.is('#pan') ){
-
- stats.domElement.style.right = '10px';
- stats.domElement.style.bottom = '10px';
-
- } else {
-
- stats.domElement.style.left = '-90px';
- stats.domElement.style.top = '0';
-
- }
- $frame.append( stats.domElement );
-
- function frame(){
-
- stats.begin();
- stats.end();
-
- }
-
- var inst = $frame.motio( options, true );
- inst.on('frame', frame);
-
- $buttons.on('click', function(i,event){
-
- var $button = $(this),
- action = $button.data('action'),
- prop = $button.data('property'),
- value = $button.data('value');
-
- switch( action ){
-
- case 'set':
- $frame.motio( action, prop, value );
- break;
-
- default:
- $frame.motio( action );
-
- }
-
- });
-
- $ranges.on('change', function(i,event){
-
- var $el = $(this),
- prop = $el.attr('name'),
- value = $el.val();
-
- $frame.motio( 'set', prop, value / 1 );
-
- });
-
-
- });
-
- // Minigame
- function gameInit(){
-
- var $game = $('#game'),
- pos = 400,
- $char = $game.find('.char').css({ left: pos + 'px' }),
- posMax = $game.innerWidth() - $char.innerWidth(),
- facing = 'right',
- moveSpeed = 300,
- moveFps = 30,
- pressed = [],
- inAction = 0,
- inRunning = 0,
- mIndex,
- listenOn = [37,39,32,66],
- $mations = $char.children().hide(),
- mations = {
- right: {
- stand: $mations.filter('.stand').motio({ frames: 8, paused: 1, fps: 10 }),
- run: $mations.filter('.run' ).motio({ frames: 6, paused: 1, fps: 10 }),
- jump: $mations.filter('.jump' ).motio({ frames: 10, paused: 1, fps: 15 }),
- kick: $mations.filter('.kick' ).motio({ frames: 9, paused: 1, fps: 15 })
- },
- left: {
- stand: $mations.filter('.stand_left').motio({ frames: 8, paused: 1, fps: 10 }),
- run: $mations.filter('.run_left' ).motio({ frames: 6, paused: 1, fps: 10 }),
- jump: $mations.filter('.jump_left' ).motio({ frames: 10, paused: 1, fps: 15 }),
- kick: $mations.filter('.kick_left' ).motio({ frames: 9, paused: 1, fps: 15 })
- }
- };
-
- // Start with standing animation
- mations[facing].stand.show().motio('play');
-
- // On actions end
- $mations.not('.stand,.stand_left,.run,.run_left').motio('on', 'end', function(){
-
- inAction = 0;
- $(this).hide();
- mations[facing][ inRunning ? 'run' : 'stand' ].show().motio('play');
-
- });
-
- // Keydown handlers
- $(document).on('keydown', function(event){
-
- if( $.inArray( event.which, listenOn ) === -1 || pressed[event.which] ){
-
- return;
-
- }
-
- pressed[event.which] = true;
-
- var request;
-
- switch( event.which ){
-
- // Left arrow
- case 37:
- request = 'run';
- facing = 'left';
- break;
-
- // Right arrow
- case 39:
- request = 'run';
- facing = 'right';
- break;
-
- // Spacebar
- case 32:
- request = 'jump';
- break;
-
- // B
- case 66:
- request = 'kick';
- break;
-
- }
-
- if( request === 'run' ){
-
- inAction = 0;
- mIndex = clearTimeout( mIndex );
- inRunning = 1;
- move();
-
- } else {
-
- inAction = 1;
-
- }
-
- $mations.hide().motio('toStart', true);
- mations[facing][request].show().motio( request === 'run' ? 'play' : 'toEnd' );
-
- return false;
-
- });
-
- // Keyup handlers
- $(document).on('keyup', function(event){
-
- if( $.inArray( event.which, listenOn ) === -1 ){
-
- return;
-
- }
-
- pressed[event.which] = false;
-
- var released;
-
- switch(event.which){
-
- // Left & arrow
- case 37:
- released = 'left';