From a0f367aaf9d4efe0cc20f8b312342fb2fc5eed86 Mon Sep 17 00:00:00 2001 From: Thomas Parisot Date: Mon, 24 Feb 2014 17:38:26 +0000 Subject: [PATCH] Refactoring demos. - moved them in a single folder - made a separate `npm install` thing - removed Grunt from Imager dependencies --- .gitignore | 1 - Demo - Grunt/index.html | 44 --------- demos/.gitignore | 2 + Gruntfile.js => demos/Gruntfile.js | 21 ++--- demos/README.md | 88 ++++++++++-------- .../default}/Assets/Styles/base.css | 0 {Demo => demos/default}/index.html | 8 +- .../grunt}/Assets/Images/A.jpg | Bin .../grunt}/Assets/Images/B.jpg | Bin .../grunt}/Assets/Images/C.jpg | Bin {Demo => demos/grunt}/Assets/Styles/base.css | 0 demos/grunt/index.html | 25 +++++ .../lazyload}/Assets/Images/A.jpg | Bin .../lazyload}/Assets/Images/B.jpg | Bin .../lazyload}/Assets/Images/C.jpg | Bin .../lazyload}/Assets/Images/D.jpg | Bin .../lazyload}/Assets/Images/E.jpg | Bin .../lazyload}/Assets/Images/F.jpg | Bin .../lazyload}/Assets/Images/G.jpg | Bin .../lazyload}/Assets/Images/H.jpg | Bin .../lazyload}/Assets/Images/I.jpg | Bin .../lazyload}/Assets/Images/J.jpg | Bin .../lazyload}/Assets/Styles/base.css | 0 .../lazyload}/index.html | 52 ++++------- demos/package.json | 23 +++++ package.json | 4 +- 26 files changed, 130 insertions(+), 138 deletions(-) delete mode 100644 Demo - Grunt/index.html create mode 100644 demos/.gitignore rename Gruntfile.js => demos/Gruntfile.js (53%) rename {Demo - Grunt => demos/default}/Assets/Styles/base.css (100%) rename {Demo => demos/default}/index.html (87%) rename {Demo - Grunt => demos/grunt}/Assets/Images/A.jpg (100%) rename {Demo - Grunt => demos/grunt}/Assets/Images/B.jpg (100%) rename {Demo - Grunt => demos/grunt}/Assets/Images/C.jpg (100%) rename {Demo => demos/grunt}/Assets/Styles/base.css (100%) create mode 100644 demos/grunt/index.html rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/A.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/B.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/C.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/D.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/E.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/F.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/G.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/H.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/I.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Images/J.jpg (100%) rename {Demo - Lazy Load => demos/lazyload}/Assets/Styles/base.css (100%) rename {Demo - Lazy Load => demos/lazyload}/index.html (52%) create mode 100644 demos/package.json diff --git a/.gitignore b/.gitignore index 94ce883..e641137 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,4 @@ node_modules .jpg .png .gif -Generated .DS_Store diff --git a/Demo - Grunt/index.html b/Demo - Grunt/index.html deleted file mode 100644 index dd73c01..0000000 --- a/Demo - Grunt/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - Imager.js - - - -

Imager.js

-

Here we're using Grunt to generate a list of image sizes for us.

-

We then pass those sizes into Imager

- -
-
-
- - - - - \ No newline at end of file diff --git a/demos/.gitignore b/demos/.gitignore new file mode 100644 index 0000000..e121159 --- /dev/null +++ b/demos/.gitignore @@ -0,0 +1,2 @@ +Generated +node_modules \ No newline at end of file diff --git a/Gruntfile.js b/demos/Gruntfile.js similarity index 53% rename from Gruntfile.js rename to demos/Gruntfile.js index 5c5e00e..27b92f4 100644 --- a/Gruntfile.js +++ b/demos/Gruntfile.js @@ -1,24 +1,19 @@ module.exports = function (grunt) { + 'use strict'; // Project configuration. grunt.initConfig({ - // Store your Package file so you can reference its specific data whenever necessary - pkg: grunt.file.readJSON('package.json'), + wd: '<%= grunt.task.current.args[0] || "grunt" %>/Assets/Images', - imageDirectory: { - default: 'Demo - Grunt/Assets/Images/', - lazyload: 'Demo - Lazy Load/Assets/Images/' - }, - - // grunt responsive_images:dev:default + // grunt responsive_images:dev:grunt // grunt responsive_images:dev:lazyload responsive_images: { dev: { options: { sizes: [ { - width: 320, + width: 320 }, { width: 640 @@ -30,9 +25,9 @@ module.exports = function (grunt) { }, files: [{ expand: true, - cwd: '<%= imageDirectory[grunt.task.current.args[0]] %>', - src: ['*.{jpg,gif,png}'], - dest: '<%= imageDirectory[grunt.task.current.args[0]] %>Generated/' + cwd: '<%= wd %>', + src: '*.{jpg,gif,png}', + dest: '<%= wd %>/Generated' }] } } @@ -43,6 +38,6 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-responsive-images'); // Default Task - grunt.registerTask('default', ['responsive_images:dev']); + grunt.registerTask('default', ['responsive_images:dev:grunt', 'responsive_images:dev:lazyload']); }; diff --git a/demos/README.md b/demos/README.md index 92779cd..064ed5a 100644 --- a/demos/README.md +++ b/demos/README.md @@ -1,47 +1,61 @@ -# Grunt Responsive Image Demo +# Imager.js Demos -This demo requires the following commands to be run... +This folder contains several demonstrations of how to use Imager. + +Prior to run them, you need to clone or download this `git` repository: -- `npm install` (all dependencies specified in package.json) -- `brew install imagemagick` (for other installations see [http://www.imagemagick.org/script/binary-releases.php](http://www.imagemagick.org/script/binary-releases.php)) - -Review the `Gruntfile.js` and update the custom sizes that you want to use (if no sizes are specified in the Gruntfile then 320, 640, 1024 are used)... - -```js -options: { - sizes: [ - { - width: 320, - height: 240 - }, - { - name: 'large', - width: 640 - }, - { - name : 'large', - width : 1024, - suffix : '_x2', - quality: 0.6 - } - ] -} +```bash +git clone https://github.com/BBC-News/Imager.js.git +cd Imager.js/demos ``` -...be aware the names of the files need to change within your HTML... +## Standard Demo + +This example in a simple use case using [placehold.it](http://placehold.it/) to refrl the configured breakpoints. + +### Running the demo + +```bash +open default/index.html +``` + +## Generating Responsives Images with Grunt + +This example demonstrates how to use [Grunt](http://gruntjs.com/) to generate your own responsive images +and how to wire them with Imager. + +### Requirements -```html -
-
-
+This demo requires the following commands to be run... + +```bash +brew install imagemagick graphicsmagick +npm install -g grunt-cli +npm install ``` -You can then pass those image sizes through to Imager.js along with a regex for Imager to parse the information... +[Check out `graphicsmagick` install notes for other systems](http://www.graphicsmagick.org/README.html) if needed. + +You can also review the `Gruntfile.js` and update the custom sizes that you want to use [according to `grunt-responsive-images` documentation](https://github.com/andismith/grunt-responsive-images#readme)... -```js -var imager = new Imager({ - availableWidths: [320, 640, 1024] -}); +```bash +grunt +open grunt/index.html ``` -For full details of the Grunt task options see the [grunt-responsive-images](https://github.com/andismith/grunt-responsive-images/) repo on GitHub. +## Lazyloading images + +This examples demonstrates how to lazy load responsive images as the user scrolls. + +It is a proof of concept rather than a production recommendation. + +### Requirements + +Please follow the requirements of *Generating Responsives Images with Grunt*. + +### Running the demo + +```bash +grunt +open lazyload/index.html +``` \ No newline at end of file diff --git a/Demo - Grunt/Assets/Styles/base.css b/demos/default/Assets/Styles/base.css similarity index 100% rename from Demo - Grunt/Assets/Styles/base.css rename to demos/default/Assets/Styles/base.css diff --git a/Demo/index.html b/demos/default/index.html similarity index 87% rename from Demo/index.html rename to demos/default/index.html index f009039..93687c1 100644 --- a/Demo/index.html +++ b/demos/default/index.html @@ -14,11 +14,11 @@

Imager.js

Below are three <div> elements that are enhanced using Imager.js and so they will lazy-load more images (as long as JavaScript is enabled).

-
-
-
+
+
+
- + diff --git a/Demo - Grunt/Assets/Images/A.jpg b/demos/grunt/Assets/Images/A.jpg similarity index 100% rename from Demo - Grunt/Assets/Images/A.jpg rename to demos/grunt/Assets/Images/A.jpg diff --git a/Demo - Grunt/Assets/Images/B.jpg b/demos/grunt/Assets/Images/B.jpg similarity index 100% rename from Demo - Grunt/Assets/Images/B.jpg rename to demos/grunt/Assets/Images/B.jpg diff --git a/Demo - Grunt/Assets/Images/C.jpg b/demos/grunt/Assets/Images/C.jpg similarity index 100% rename from Demo - Grunt/Assets/Images/C.jpg rename to demos/grunt/Assets/Images/C.jpg diff --git a/Demo/Assets/Styles/base.css b/demos/grunt/Assets/Styles/base.css similarity index 100% rename from Demo/Assets/Styles/base.css rename to demos/grunt/Assets/Styles/base.css diff --git a/demos/grunt/index.html b/demos/grunt/index.html new file mode 100644 index 0000000..736bf90 --- /dev/null +++ b/demos/grunt/index.html @@ -0,0 +1,25 @@ + + + + + + Imager.js + + + +

Imager.js

+

Here we're using Grunt to generate a list of image sizes for us.

+

We then pass those sizes into Imager.

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/Demo - Lazy Load/Assets/Images/A.jpg b/demos/lazyload/Assets/Images/A.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/A.jpg rename to demos/lazyload/Assets/Images/A.jpg diff --git a/Demo - Lazy Load/Assets/Images/B.jpg b/demos/lazyload/Assets/Images/B.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/B.jpg rename to demos/lazyload/Assets/Images/B.jpg diff --git a/Demo - Lazy Load/Assets/Images/C.jpg b/demos/lazyload/Assets/Images/C.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/C.jpg rename to demos/lazyload/Assets/Images/C.jpg diff --git a/Demo - Lazy Load/Assets/Images/D.jpg b/demos/lazyload/Assets/Images/D.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/D.jpg rename to demos/lazyload/Assets/Images/D.jpg diff --git a/Demo - Lazy Load/Assets/Images/E.jpg b/demos/lazyload/Assets/Images/E.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/E.jpg rename to demos/lazyload/Assets/Images/E.jpg diff --git a/Demo - Lazy Load/Assets/Images/F.jpg b/demos/lazyload/Assets/Images/F.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/F.jpg rename to demos/lazyload/Assets/Images/F.jpg diff --git a/Demo - Lazy Load/Assets/Images/G.jpg b/demos/lazyload/Assets/Images/G.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/G.jpg rename to demos/lazyload/Assets/Images/G.jpg diff --git a/Demo - Lazy Load/Assets/Images/H.jpg b/demos/lazyload/Assets/Images/H.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/H.jpg rename to demos/lazyload/Assets/Images/H.jpg diff --git a/Demo - Lazy Load/Assets/Images/I.jpg b/demos/lazyload/Assets/Images/I.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/I.jpg rename to demos/lazyload/Assets/Images/I.jpg diff --git a/Demo - Lazy Load/Assets/Images/J.jpg b/demos/lazyload/Assets/Images/J.jpg similarity index 100% rename from Demo - Lazy Load/Assets/Images/J.jpg rename to demos/lazyload/Assets/Images/J.jpg diff --git a/Demo - Lazy Load/Assets/Styles/base.css b/demos/lazyload/Assets/Styles/base.css similarity index 100% rename from Demo - Lazy Load/Assets/Styles/base.css rename to demos/lazyload/Assets/Styles/base.css diff --git a/Demo - Lazy Load/index.html b/demos/lazyload/index.html similarity index 52% rename from Demo - Lazy Load/index.html rename to demos/lazyload/index.html index e13a7a7..28069af 100644 --- a/Demo - Lazy Load/index.html +++ b/demos/lazyload/index.html @@ -14,44 +14,24 @@

Imager.js

To initialise Imager press the following button

We've also set the scrollDelay (i.e. the delay between scrolling and replacing a placeholder with an image) to be very high (two seconds). This is so you can visually see the lazy-loading of images as they happen.

The default value is 250ms but you can override that to your own preference.

-
-
-
-
-
-
-
-
-
- +
+
+
+
+
+
+
+
+
+ + diff --git a/demos/package.json b/demos/package.json new file mode 100644 index 0000000..4934fce --- /dev/null +++ b/demos/package.json @@ -0,0 +1,23 @@ +{ + "name": "imager.js-demos", + "version": "0.0.0", + "private": true, + "description": "Imager.js Demos", + "main": "Gruntfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "imager", + "bbc", + "responsive", + "images", + "rwd" + ], + "author": "", + "license": "Apache-2", + "dependencies": { + "grunt": "^0.4.2", + "grunt-responsive-images": "^0.1.1" + } +} diff --git a/package.json b/package.json index a852e16..61f1a4e 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,6 @@ ], "license": "Apache-2.0", "devDependencies": { - "grunt": "~0.4.1", - "grunt-responsive-images": "~0.1.1", "karma-mocha": "~0.1.0", "mocha": "~1.17.1", "karma-phantomjs-launcher": "~0.1.0", @@ -50,6 +48,6 @@ "expect.js": "~0.2.0", "karma-expect": "~1.0.0", "sinon": "~1.8.1", - "github-changes": "0.0.5" + "github-changes": "^0.0.5" } }