diff --git a/examples/javascript/README.md b/examples/javascript/README.md index d4ece3a..1d39fb8 100644 --- a/examples/javascript/README.md +++ b/examples/javascript/README.md @@ -1,13 +1,17 @@ # JavaScript -> This is a medium-zoom example using vanilla JavaScript. +> This is a *medium-zoom* example using vanilla JavaScript. ## Production -Open [`index.html`](index.html) which contains the [production version](https://unpkg.com/medium-zoom@0/dist/medium-zoom.min.js) of medium-zoom. +The root [`index.html`](index.html) is the demo file. It contains the [production version](https://unpkg.com/medium-zoom@0/dist/medium-zoom.min.js) of library. The *medium-zoom* code is in [`demo.js`](demo.js). ## Development -Open [`development.html`](development.html) which contains the [development version](../../dist/medium-zoom.min.js) of medium-zoom. +If you're developing, you want to open [`development/index.html`](development/index.html), which contains the [development version](../../dist/medium-zoom.min.js) of medium-zoom (which is updated with `npm run dev`). -[See dev instructions](../../README.md#dev). +To learn more about how to contribute, please [see the dev instructions](../../README.md#dev). + +## Preview + +The preview folder gets the [library](preview/medium-zoom.min.js) overriden with a build version on deploy. This process is automated with [Netlify](https://www.netlify.com/) to check if pull requests work as expected. You shouldn't need to access to the [preview version](preview/index.html) of the demo by yourself. diff --git a/examples/javascript/development/index.html b/examples/javascript/development/index.html new file mode 100644 index 0000000..9eaec7c --- /dev/null +++ b/examples/javascript/development/index.html @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + Medium Zoom | Demo + + + +
+

Medium Zoom

+
Medium zoom on your pictures in vanilla JavaScript
+ +
+ View on GitHub + Read the article +
+
+ +
+
+ Zoom with default options +
Zoom with default options
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Tempora praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias pariatur atque amet, + dicta, similique beatae optio quos! Hic necessitatibus dicta magni, tempore. + Atque illo voluptatibus fugiat id pariatur cum quasi vel ut repellendus iure quaerat, + doloremque sit voluptatum odio maiores provident consequuntur accusantium saepe. +

+ +
+ Zoom with margin +
Zoom with margin
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Ea dolores quaerat, quis modi nostrum sequi adipisci ratione esse + blanditiis error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus! +

+ +
+ Zoom with background color +
Zoom with background color
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos magnam illo, + quam iusto, autem ratione commodi deleniti vero magni fuga consectetur expedita, + voluptatum enim quidem? Rem, minima laboriosam hic! Id. +

+ +
+ Zoom without scroll effect +
Zoom without scroll offset
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cum nulla + eligendi recusandae at quae odio, harum nesciunt ut temporibus vitae, laudantium minus. + Iste officia aliquid, laborum ratione maxime beatae. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores totam fugiat + repellendus laboriosam accusantium, possimus similique quos repellat molestias excepturi + ad perspiciatis beatae! Qui repellat numquam incidunt, accusamus autem. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni + reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut + temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae. +

+ +
+ Zoom without meta click +
Zoom without meta click
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut + temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni + reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Corporis veritatis cupiditate iure velit laboriosam eius nesciunt officiis + odit cumque deleniti assumenda esse exercitationem ducimus, accusantium eligendi itaque dolorem molestias saepe! +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut + temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae. +

+ +
+ Zoom to trigger +
+ +
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni + reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos. +

+ +
+ Zoom detached after 5 seconds +
Zoom detached after 5 seconds
+
+ +

Journal

+ +
+

In this journal appears the history of the images zoomed.

+
+ +
+ + + + + + + + + diff --git a/examples/javascript/development.html b/examples/javascript/preview/index.html similarity index 91% rename from examples/javascript/development.html rename to examples/javascript/preview/index.html index e8fb42a..4893404 100644 --- a/examples/javascript/development.html +++ b/examples/javascript/preview/index.html @@ -5,11 +5,11 @@ - + - - + + Medium Zoom | Demo @@ -29,7 +29,7 @@

Medium Zoom

Zoom with default options
Zoom with default options
@@ -46,7 +46,7 @@

Medium Zoom

Zoom with margin
Zoom with margin
@@ -61,7 +61,7 @@

Medium Zoom

Zoom with background color
Zoom with background color
@@ -76,7 +76,7 @@

Medium Zoom

Zoom without scroll effect
Zoom without scroll offset
@@ -109,7 +109,7 @@

Medium Zoom

Zoom without meta click
Zoom without meta click
@@ -142,7 +142,7 @@

Medium Zoom

Zoom to trigger
@@ -159,7 +159,7 @@

Medium Zoom

Zoom detached after 5 seconds
Zoom detached after 5 seconds
@@ -186,7 +186,10 @@

Journal

Back to top

- - + + + diff --git a/examples/javascript/preview/medium-zoom.min.js b/examples/javascript/preview/medium-zoom.min.js new file mode 100644 index 0000000..941c01b --- /dev/null +++ b/examples/javascript/preview/medium-zoom.min.js @@ -0,0 +1,4 @@ +// This is the default file that gets filled on deploy. +window.mediumZoom = function () { + throw new Error('You\'re either viewing this page locally or the deployment didn\'t go well.') +} diff --git a/package.json b/package.json index f17a7c8..37f6bb4 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "clean": "rimraf ./dist && mkdir dist", "prebuild": "npm run lint && npm run test && npm run clean", "build": "webpack --progress --colors", - "dev": "webpack -d --progress --colors --watch" + "dev": "webpack -d --progress --colors --watch", + "preview": "npm run build && cp ./dist/* ./examples/javascript/preview/" }, "lint-staged": { "src/**/*.js": [