├── .gitattributes ├── .gitignore ├── .travis.yml ├── demo ├── demo.js ├── index.html └── style.css ├── bower.json ├── .editorconfig ├── dist ├── bespoke-dir.min.js └── bespoke-dir.js ├── .jshintrc ├── src └── bespoke-dir.js ├── LICENSE ├── package.json ├── CONTRIBUTING.md ├── spec └── bespoke-dirSpec.js ├── README.md └── Gruntfile.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.8' 4 | - '0.10' 5 | -------------------------------------------------------------------------------- /demo/demo.js: -------------------------------------------------------------------------------- 1 | bespoke.horizontal.from('article', { 2 | dir: true 3 | }); 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bespoke-dir", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "bespoke.js": ">=0.3.0" 6 | } 7 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /dist/bespoke-dir.min.js: -------------------------------------------------------------------------------- 1 | /*! bespoke-dir v0.0.0 © 2013 Ryan Seddon, Licensed MIT */ 2 | !function(a){a.plugins.dir=function(a){function b(a){var b="bespoke-dir-",d=b+a,e=b+("next"===a?"prev":"next");c.classList.contains(d)||c.classList.add(d),c.classList.remove(e)}var c=a.parent,d=0;c.classList.add("bespoke-dir-next"),a.on("activate",function(a){d>a.index?b("prev"):b("next"),d=a.index})}}(bespoke); -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 4, 10 | "latedef": true, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "white": true 21 | } 22 | -------------------------------------------------------------------------------- /src/bespoke-dir.js: -------------------------------------------------------------------------------- 1 | (function(bespoke) { 2 | 3 | bespoke.plugins.dir = function(deck) { 4 | var parent = deck.parent, 5 | lastSlide = 0; 6 | 7 | parent.classList.add('bespoke-dir-next'); 8 | 9 | function direction(dir) { 10 | var dirClassPrefix = 'bespoke-dir-', 11 | dirClass = dirClassPrefix+dir, 12 | oppDirClass = dirClassPrefix+(dir === 'next' ? 'prev' : 'next'); 13 | 14 | if(!parent.classList.contains(dirClass)) { 15 | parent.classList.add(dirClass); 16 | } 17 | 18 | parent.classList.remove(oppDirClass); 19 | } 20 | 21 | deck.on('activate', function(e) { 22 | if(lastSlide > e.index) { 23 | direction('prev'); 24 | } else { 25 | direction('next'); 26 | } 27 | 28 | lastSlide = e.index; 29 | }); 30 | }; 31 | 32 | }(bespoke)); 33 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bespoke-dir demo 6 | 7 | 8 | 9 | 10 |

bespoke-dir

11 | 12 |
13 |
14 |

Slide 1

15 |
16 |
17 |

Slide 2

18 |
19 |
20 |

Slide 3

21 |
22 |
23 |

Slide 4

24 |
25 |
26 |

Slide 5

27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /dist/bespoke-dir.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * bespoke-dir v0.0.0 3 | * https://github.com/ryanseddon/bespoke-dir 4 | * 5 | * Copyright 2013, Ryan Seddon 6 | * This content is released under the MIT license 7 | */ 8 | 9 | (function(bespoke) { 10 | 11 | bespoke.plugins.dir = function(deck) { 12 | var parent = deck.parent, 13 | lastSlide = 0; 14 | 15 | parent.classList.add('bespoke-dir-next'); 16 | 17 | function direction(dir) { 18 | var dirClassPrefix = 'bespoke-dir-', 19 | dirClass = dirClassPrefix+dir, 20 | oppDirClass = dirClassPrefix+(dir === 'next' ? 'prev' : 'next'); 21 | 22 | if(!parent.classList.contains(dirClass)) { 23 | parent.classList.add(dirClass); 24 | } 25 | 26 | parent.classList.remove(oppDirClass); 27 | } 28 | 29 | deck.on('activate', function(e) { 30 | if(lastSlide > e.index) { 31 | direction('prev'); 32 | } else { 33 | direction('next'); 34 | } 35 | 36 | lastSlide = e.index; 37 | }); 38 | }; 39 | 40 | }(bespoke)); 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2013 Ryan Seddon 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bespoke-dir", 3 | "version": "0.0.0", 4 | "description": "Add a class to the slide parent element to let you know which direction the slides are going", 5 | "homepage": "https://github.com/ryanseddon/bespoke-dir", 6 | "bugs": "https://github.com/ryanseddon/bespoke-dir/issues", 7 | "author": { 8 | "name": "Ryan Seddon", 9 | "url": "https://github.com/ryanseddon" 10 | }, 11 | "main": "./dist/bespoke-dir.js", 12 | "repository": { 13 | "type": "git", 14 | "url": "git://github.com/ryanseddon/bespoke-dir.git" 15 | }, 16 | "scripts": { 17 | "test": "grunt" 18 | }, 19 | "peerDependencies": { 20 | "bespoke": ">=0.3.0" 21 | }, 22 | "devDependencies": { 23 | "grunt": "~0.4.1", 24 | "grunt-contrib-jshint": "~0.6.4", 25 | "grunt-contrib-jasmine": "~0.5.2", 26 | "grunt-contrib-concat": "~0.3.0", 27 | "grunt-contrib-uglify": "~0.2.4", 28 | "grunt-contrib-clean": "~0.5.0", 29 | "grunt-contrib-watch": "~0.5.3", 30 | "grunt-micro": "~0.1.0", 31 | "bespoke": ">=0.3.0" 32 | }, 33 | "engines": { 34 | "node": ">=0.8.0" 35 | }, 36 | "licenses": [ 37 | { 38 | "type": "MIT" 39 | } 40 | ], 41 | "keywords": [ 42 | "bespoke.js-plugin" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /demo/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica, arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 28px; 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | -moz-box-sizing: border-box; 10 | margin: 0; 11 | padding: 0; 12 | color: #fff; 13 | } 14 | 15 | h1 { 16 | height: 25px; 17 | width: 640px; 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | margin-left: -322px; 22 | margin-top: -290px; 23 | font-size: 32px; 24 | letter-spacing: -1px; 25 | color: #303030; 26 | } 27 | 28 | section { 29 | display: none; 30 | } 31 | 32 | .bespoke-parent { 33 | position: absolute; 34 | top: 0; 35 | bottom: 0; 36 | left: 0; 37 | right: 0; 38 | } 39 | 40 | .bespoke-slide { 41 | width: 640px; 42 | height: 480px; 43 | position: absolute; 44 | top: 50%; 45 | margin-top: -240px; 46 | left: 50%; 47 | margin-left: -320px; 48 | background: #0881B3; 49 | padding: 20px; 50 | } 51 | 52 | .bespoke-dir-prev .bespoke-slide { 53 | background: #FF7243; 54 | } 55 | 56 | section.bespoke-slide { 57 | -webkit-transition: all .3s ease; 58 | -moz-transition: all .3s ease; 59 | -ms-transition: all .3s ease; 60 | -o-transition: all .3s ease; 61 | transition: all .3s ease; 62 | display: block; 63 | } 64 | 65 | .bespoke-inactive { 66 | opacity: 0; 67 | } 68 | 69 | .bespoke-active { 70 | opacity: 1; 71 | } 72 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Important notes 4 | Please don't edit files in the `dist` subdirectory as they are generated via [Grunt](http://gruntjs.com/). You'll find source code in the `src` subdirectory! 5 | 6 | ### Code style 7 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** 8 | 9 | ## Modifying the code 10 | First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. 11 | 12 | Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started with Grunt guide](http://gruntjs.com/getting-started). 13 | 14 | 1. Fork and clone the repo. 15 | 1. Run `npm install` to install all build dependencies (including Grunt). 16 | 1. Run `grunt` to grunt this project. 17 | 18 | Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. 19 | 20 | ## Submitting pull requests 21 | 22 | 1. Create a new branch, please don't work in your `master` branch directly. 23 | 1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. 24 | 1. Fix stuff. 25 | 1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. 26 | 1. Update the documentation to reflect any changes. 27 | 1. Push to your fork and submit a pull request. 28 | -------------------------------------------------------------------------------- /spec/bespoke-dirSpec.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | describe("bespoke-dir", function() { 5 | 6 | var deck, 7 | 8 | createDeck = function() { 9 | var parent = document.createElement('article'); 10 | for (var i = 0; i < 10; i++) { 11 | parent.appendChild(document.createElement('section')); 12 | } 13 | 14 | deck = bespoke.from(parent, { 15 | dir: true 16 | }); 17 | }; 18 | 19 | createDeck(); 20 | 21 | describe("deck.init", function() { 22 | 23 | it("should initialise parent container with 'bespoke-dir-next' class", function() { 24 | expect(deck.parent.classList.contains('bespoke-dir-next')).toBe(true); 25 | expect(deck.parent.classList.contains('bespoke-dir-prev')).toBe(false); 26 | }); 27 | 28 | }); 29 | 30 | describe("deck.slide", function() { 31 | 32 | it("should keep parent container with 'bespoke-dir-next' class", function() { 33 | deck.slide(1); 34 | expect(deck.parent.classList.contains('bespoke-dir-next')).toBe(true); 35 | expect(deck.parent.classList.contains('bespoke-dir-prev')).toBe(false); 36 | }); 37 | 38 | it("should change add 'bespoke-dir-prev' class to container", function() { 39 | deck.slide(0); 40 | expect(deck.parent.classList.contains('bespoke-dir-prev')).toBe(true); 41 | expect(deck.parent.classList.contains('bespoke-dir-next')).toBe(false); 42 | }); 43 | 44 | }); 45 | 46 | }); 47 | 48 | }()); 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://secure.travis-ci.org/ryanseddon/bespoke-dir.png?branch=master)](https://travis-ci.org/ryanseddon/bespoke-dir) 2 | 3 | # bespoke-dir 4 | 5 | Add a class to the slide parent element to let you know which direction the slides are going. 6 | 7 | The bespoke parent element will initialise with `bespoke-dir-next` whenever you change slide it will update which direction you're going so you can do more advanced animations. 8 | 9 | ## Download 10 | 11 | Download the [production version][min] or the [development version][max], or use a [package manager](#package-managers). 12 | 13 | [min]: https://raw.github.com/ryanseddon/bespoke-dir/master/dist/bespoke-dir.min.js 14 | [max]: https://raw.github.com/ryanseddon/bespoke-dir/master/dist/bespoke-dir.js 15 | 16 | ## Usage 17 | 18 | First, include both `bespoke.js` and `bespoke-dir.js` in your page. 19 | 20 | Then, simply include the plugin when instantiating your presentation. 21 | 22 | ```js 23 | bespoke.horizontal.from('article', { 24 | dir: true 25 | }); 26 | ``` 27 | 28 | You can now change the style of the animation depending on which direction you're going. 29 | 30 | ### CSS 31 | 32 | The following classes are available on your parent element. 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
bespoke-dir-nextWhen you are going forwards
bespoke-dir-prevWhen you are going backwards
44 | 45 | See [demo](demo) folder for a very simple example. 46 | 47 | ## Package managers 48 | 49 | ### Bower 50 | 51 | ```bash 52 | $ bower install bespoke-dir 53 | ``` 54 | 55 | ### npm 56 | 57 | ```bash 58 | $ npm install bespoke-dir 59 | ``` 60 | 61 | The bespoke-dir npm package is designed for use with [browserify](http://browserify.org/), e.g. 62 | 63 | ```js 64 | require('bespoke'); 65 | require('bespoke-dir'); 66 | ``` 67 | 68 | ## Credits 69 | 70 | This plugin was built with [generator-bespokeplugin](https://github.com/markdalgleish/generator-bespokeplugin). 71 | 72 | ## License 73 | 74 | [MIT License](http://en.wikipedia.org/wiki/MIT_License) 75 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | // Generated on 2013-10-08 using generator-bespokeplugin v0.1.3 2 | 3 | module.exports = function(grunt) { 4 | 5 | grunt.initConfig({ 6 | pkg: grunt.file.readJSON('package.json'), 7 | meta: { 8 | banner: '/*!\n' + 9 | ' * <%= pkg.title || pkg.name %> v<%= pkg.version %>\n' + 10 | ' * <%= pkg.homepage %>\n' + 11 | ' *\n' + 12 | ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author.name %>\n' + 13 | ' * This content is released under the' + 14 | ' <%= _.pluck(pkg.licenses, "type").join(", ") %> license<%= pkg.licenses.length === 1 ? "" : "s" %>\n' + 15 | '' + 16 | ' */\n\n', 17 | microbanner: '/*! <%= pkg.title || pkg.name %> v<%= pkg.version %> ' + 18 | '© <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>, ' + 19 | 'Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n' 20 | }, 21 | clean: { 22 | files: ['dist'] 23 | }, 24 | concat: { 25 | options: { 26 | banner: '<%= meta.banner %>', 27 | stripBanners: true 28 | }, 29 | dist: { 30 | src: ['src/<%= pkg.name %>.js'], 31 | dest: 'dist/<%= pkg.name %>.js' 32 | } 33 | }, 34 | uglify: { 35 | options: { 36 | banner: '<%= meta.microbanner %>' 37 | }, 38 | dist: { 39 | src: ['<%= concat.dist.dest %>'], 40 | dest: 'dist/<%= pkg.name %>.min.js' 41 | } 42 | }, 43 | jasmine: { 44 | src: ['src/**/*.js'], 45 | options: { 46 | vendor: ['node_modules/bespoke/dist/bespoke.js'], 47 | specs: 'spec/*Spec.js', 48 | helpers: 'spec/*Helper.js' 49 | } 50 | }, 51 | jshint: { 52 | src: [ 53 | 'Gruntfile.js', 54 | 'src/**/*.js', 55 | 'spec/**/*.js', 56 | 'demo/**/*.js' 57 | ], 58 | options: { 59 | jshintrc: '.jshintrc' 60 | } 61 | }, 62 | micro: { 63 | src: '<%= uglify.dist.dest %>', 64 | options: { 65 | limit: 1024, 66 | gzip: true 67 | } 68 | }, 69 | watch: { 70 | files: '<%= jshint.src %>', 71 | tasks: ['default'] 72 | } 73 | }); 74 | 75 | grunt.loadNpmTasks('grunt-contrib-clean'); 76 | grunt.loadNpmTasks('grunt-contrib-concat'); 77 | grunt.loadNpmTasks('grunt-contrib-uglify'); 78 | grunt.loadNpmTasks('grunt-contrib-jasmine'); 79 | grunt.loadNpmTasks('grunt-contrib-jshint'); 80 | grunt.loadNpmTasks('grunt-contrib-watch'); 81 | grunt.loadNpmTasks('grunt-micro'); 82 | 83 | grunt.registerTask('default', ['clean', 'jasmine', 'concat', 'uglify', 'micro']); 84 | 85 | }; 86 | --------------------------------------------------------------------------------