diff --git a/README.md b/README.md
index 7fd5aca..23029ee 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
-Demo • Getting Started • Gallery Groups • Options • Styling • API • Custom Builds • Changelog
+Demo • Getting Started • Gallery Groups • Options • Styling • API • Changelog
## Whats new in 0.7.0?
@@ -50,8 +50,9 @@ Alternatively you can:
- Adaptive responsive images (by viewport size, pixel ratio and available internet bandwidth)
- Auto-fit images and videos (as "contain" or as "cover")
- Custom Controls
+- Fully configurable via markup
- Loading Spinner
-- Prefetch next image (background task)
+- Prefetch next image
- Custom options
- Simply customize via markup (data-attributes)
- Arrange built-in animations
@@ -234,25 +235,13 @@ You can also load modules via CDN, e.g.:
The ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.
-### Basic Setup
+## Basic Usage (Markup)
-__1. Just insert the script resource tag right after the documents head:__
+#### Anchor + Images
-> When you need to add custom styling through css class modifications it is recommended to load the library before you load the css which contains the modifications. Otherwise you have to add an _"!important"_ flag to override existing styles.
+The most simple way is the combination of img tags as preview images (thumbs) wrapped in an anchor element which points to the fully sized image. The advantage of this workaround is it fully falls back to a classical behavior. It is the universal markup language which all web tools already understand. Therefore, it may have some advantages for SEO also.
-```html
-
-
-
-
-
-
-
-
-
-```
-
-__2. Add the class ___spotlight___ to an anchor element accordingly, e.g.:__
+Just add the class ___spotlight___ to an anchor element accordingly, e.g.:
```html
@@ -266,23 +255,27 @@ __2. Add the class ___spotlight___ to an anchor element accordingly, e.g.:__
```
-This also works with dynamically loaded content. There is no need to inject listeners on new elements. Instead Spotlight make use of global event capturing.
+This also works with dynamically loaded content. There is no need to inject listeners on new elements. Instead, Spotlight make use of global event capturing.
+
+
-Alternatively you can also use the Spotlight API for programmatically use.
+#### Non-Anchor Elements
-__Usage with non-anchor elements:__
+Alternatively you can use non-anchor elements also:
```html
-
+
```
-Pretty much the same like anchors but use ___data-src___ instead of ___href___.
+Pretty much the same like anchors but uses ___data-src___ instead of ___href___.
## Gallery-Groups
+Grouping galleries is useful when you have multiple images on your page which should be separated into groups, instead of adding all images to one single gallery when opened.
+
Give one of the outer wrapping element the class ___spotlight-group___, e.g.:
```html
@@ -310,14 +303,18 @@ Give one of the outer wrapping element the class ___spotlight-group___, e.g.:
```
-
+Each of these groups now opens in its own gallery.
+
+Gallery-Groups are also useful to declare global configuration as markup just once (group options inheritance).
+
+
## Options
-Pass options as declarative via data-attributes in the HTML markup or use the Spotlight API.
+Pass options declarative via data-attributes in the HTML markup or use the Spotlight API.
-> When using markup follow these style: `data-option="value"` (change _option_ and _value_ accordingly), e.g.: ``.
+> When using markup follow these style: `data-option="value"` (change _option_ and _value_ accordingly), e.g.: ``.
-You can either apply the following data-attributes to the ___spotlight-group___ wrapper element or apply them separately to each ___spotlight___ anchor element (that also overrides group definitions).
+You can either apply the following data-attributes to the ___spotlight-group___ wrapper element or apply them separately to each ___spotlight___ anchor element (that also overrides group definition inheritance).
@@ -325,6 +322,7 @@ You can either apply the following data-attributes to the ___spotlight-group___
Option
Values
Description
+
Default
index
@@ -334,194 +332,274 @@ You can either apply the following data-attributes to the ___spotlight-group___
Sets the starting index when showing the gallery by using the Spotlight API. The index starts from 1.
-
-
-
-
onchange
-
- function(index)
-
-
- Pass a callback function which is get fired every time when a page has changed (the first parameter is equal to the new index).
- Note: The image may not have been fully loaded when the event is fired (preloading phase). The index starts from 1.
-
- Note: Could also combined as comma-separated list, e.g: data-animation="slide,fade,scale" (this is the default animation).
+ Change animation (use built-ins or custom classname)
+ Note: Markup as comma-separated list, e.g: data-animation="slide,fade,scale".
+
slide, fade, scale
control
- string
+ string
+ Array<string>
Show/hide control elements as "whitelisted" through a comma-separated list, e.g. data-control="autofit,page,fullscreen"
+
page, zoom, autofit, fullscreen, close
-
autohide
-
true / false / number
-
Enable/disable automatically hide controls when inactive, also set cooldown time
+
page
+
true / false
+
Show/hide page in the toolbar
+
true
fullscreen
true / false
-
Show/hide fullscreen button
+
Show/hide fullscreen button (automatically hides when not supported by the browser)
+
true
zoom
true / false
-
Show/hide both zoom buttons
+
Show/hide both zoom buttons in the toolbar
+
true
-
zoomin
+
zoom-in
true / false
-
Show/hide zoom-in button
+
Show/hide zoom-in button in the toolbar
+
true
-
zoomout
+
zoom-out
true / false
-
Show/hide zoom-out button
+
Show/hide zoom-out button in the toolbar
+
true
autofit
true / false
-
Show/hide autofit button
+
Show/hide autofit button in the toolbar
+
true
+
+
+
+
download
+
true / false
+
Show/hide the download icon in the toolbar
+
false
+
+
+
+
close
+
true / false
+
Show/hide the close icon in the toolbar
+
true
theme
true / false
Show/hide theme button
+
false
player
true / false / number
Show/hide player button, also set delay in seconds between each tick
+
false
autoplay
true / false
Autoplay when opening gallery (also requires the option player to be set)
+
false
progress
true / false
-
Show/hide autoplay progress bar
+
Show/hide the animated autoplay progress bar
+
true
infinite
true / false
Restart from beginning when no slides left
+
false
-
theme
-
"white" "dark"
-
Change the default theme
+
fit
+
"contain" "cover"
+
Auto-fit the media either as "contain" or as "cover"
+
contain
-
page
-
true / false
-
Show/hide page
+
autohide
+
true / false / number
+
Enable/disable automatically hide controls when inactive, also set cooldown time in seconds.
+
7
+
+
+
+
theme
+
string "white"
+
The classname of your custom theme. The theme "white" is a built-in theme.
+
null
title
string / false
-
Set image title or hide it
Note: When using image elements, this attribute will also inherit automatically from <img alt="...">. To prevent this behavior you can set data-title="false". This will hide the title regardless of any image alt-attributes.
+
Set image title or hide it Note: When using image elements, this attribute will also inherit automatically from <img alt="..."> as well as from <img title="...">. To prevent this behavior you can set data-title="false" explicitly. This will hide the title regardless of any image alt-attributes.
+
null
description
string / false
Set image description or hide it
+
null
-
preloader
+
spinner
true / false
-
Enable/disable preloading of the current image (also hides spinner)
+
Enable/disable the spinner. When disabled the image will not hide until it is fully loaded, that could be useful for progressive jpeg.
+
true
-
prefetch
+
preload
true / false
Enable/disable preloading of the next image
+
true
+
+
+
+
button
+
str
+
Enable/disable a button in the footer section, also set button text. Note: When using as markup you have to provide a click target for the button or you can assign an onclick callback via options when used programmatically.
+
null
+
+
+
+
button-href
+
str
+
When using a button as markup you can provide a click target for the button, e.g. <a button="click me" button-href="https://domain.com">.
+
null
+
+
+
+
onchange
+
+ function(index, options)
+
+
+ Pass a callback function which is get fired every time when a page/slide has changed. The first parameter holds the new page index, the second parameter provides the inherited option payload for this page.
+ Note: The image may not have been fully loaded when the event is fired (preloading phase). The index starts from 1.
+
+
null
+
+
+
+
onshow onclose
+
+ function(index)
+
+
+ These callback functions are called when opening or closing the gallery (the first parameter holds the current page index).
+
+
null
+
+
+
+
onclick
+
+ function(index, options)
+
+
+ A callback function which is getting fired when the optional button in the footer sections was clicked. The first parameter holds the current page index, the second parameter provides the inherited option payload for this page.
+
+
null
-
-##### Example:
+
+##### Group Option Inheritance
```html
-
```
-__Hint:__ The 2nd image gets the title "Untitled" from the group attributes.
-
-Control elements could also __whitelisted__ as a comma-separated list, e.g.:
+__Note:__ The 2nd image gets the title "Group title" from the group attributes, on the last image the title is explicitly set to be hidden.
-```html
-
-```
-
-> Use a whitelist to enable controls gets priority over other ambiguous options.
+Control elements and animations has to be __whitelisted__ as a comma-separated list.
-The same from above as __explicitly__:
+## Adaptive Responsive Images
-```html
-
-```
+> This feature will improve overall performance of your page/application a lot, especially for mobile devices and bad internet connections.
-> When control attributes are not specified they are automatically enabled by default.
+You can declare a set of the same image in multiple dimensions and quality. Spotlight will pick the optimal version by taking into account:
-Therefore the example above could be shortened to:
+1. The browsers max resolution
+2. The device screen pixel ration
+3. The available internet connection bandwidth
+Save your images in several sizes and resolutions and assign the __longest__ dimension of both sides (width, height) like this:
```html
-
+
+
+
```
-Since "zoom" is a shorthand for both zoom buttons, this is the same:
+When clicked on it Spotlight will pick the optimum choice.
-```html
-
-```
+This markup completely falls back to standard browser behavior when something goes wrong, also it is SEO friendly.
## Spotlight API
@@ -664,77 +742,30 @@ Spotlight.show(
);
```
-> __Note:__ You may need to perform `npm run build` initially to make pre-compiled files available.
-
## Custom Styling
To add custom styling just override CSS classes accordingly:
```css
-#spotlight {
- /* font styles, background */
-}
-```
-```css
-#spotlight .title{
- /* image title */
-}
-```
-```css
-#spotlight .description{
- /* image description */
-}
-```
-```css
-#spotlight .page{
- /* current page */
-}
-```
-```css
-#spotlight .fullscreen{
- /* button fullscreen */
-}
-```
-```css
-#spotlight .autofit{
- /* button autofit */
-}
-```
-```css
-#spotlight .zoom-out{
- /* button zoom out */
-}
-```
-```css
-#spotlight .zoom-in{
- /* button zoom in */
-}
-```
-```css
-#spotlight .theme{
- /* button theme */
-}
-```
-```css
-#spotlight .player{
- /* button autoplay */
-}
-```
-```css
-#spotlight .close{
- /* button close */
-}
-```
-```css
-#spotlight .arrow-left{
- /* button arrow left */
-}
-```
-```css
-#spotlight .arrow-right{
- /* button arrow right */
-}
+#spotlight { /* main font styles, background */ }
+.spl-page { /* current page (toolbar) */ }
+.spl-fullscreen { /* button fullscreen (toolbar) */ }
+.spl-autofit { /* button autofit (toolbar) */ }
+.spl-zoom-out { /* button zoom out (toolbar) */ }
+.spl-zoom-in { /* button zoom in (toolbar) */ }
+.spl-theme { /* button theme (toolbar) */ }
+.spl-player { /* button autoplay (toolbar) */ }
+.spl-download { /* button download (toolbar) */ }
+.spl-close { /* button close (toolbar) */ }
+.spl-arrow-left { /* button page previous */ }
+.spl-arrow-right { /* button page next */ }
+.spl-spinner { /* preloading spinner */ }
+.spl-title { /* image title */ }
+.spl-description { /* image description */ }
+.spl-button { /* button footer */ }
+.spl-header { /* the header wrapping element */ }
+.spl-footer { /* the footer wrapping element */ }
```
@@ -745,13 +776,13 @@ __Customize builtin themes__
Use the same classes as above:
```css
-#spotlight.white .title{
+#spotlight.white .spl-title{
/* image title in white theme */
}
```
```css
-#spotlight.dark{
+#spotlight{
/* main background in dark theme */
}
```
@@ -761,10 +792,10 @@ __Create New Themes__
Define styles, e.g. for the custom theme name "my-theme":
```css
-#spotlight.my-theme .title{
+.my-theme .spl-title{
/* image title in custom theme */
}
-#spotlight.my-theme{
+.my-theme{
/* main background in custom theme */
}
```
@@ -797,7 +828,7 @@ You can define your own custom animation by:
1. Extending the default styles (when image is shown) and corresponding transitions as follows:
```css
-#spotlight .scene img{
+.spl-scene > *{
filter: grayscale(0);
transition: filter 1s ease-out,
opacity 0.5s ease-out;
@@ -807,7 +838,7 @@ You can define your own custom animation by:
2. Providing styles for the __hidden state__ of the transition by adding a custom animation name as a class:
```css
-#spotlight .scene img.my-animation{
+.spl-scene .my-animation{
opacity: 0 !important;
filter: grayscale(1);
}
@@ -829,49 +860,20 @@ Spotlight.show([ /* Gallery */ ],{
});
```
-
-## Preload Library / Async Load
-
-> If you like to override css classes for custom styling you may need to add ___!important___ flag to the css property value.
-
-```html
-
-
-
-
-
-
-
-
-
-
-```
-
-Initialize library manually (once):
-
-```js
-Spotlight.init();
-```
-
-When using Spotlight exclusively through the API it is recommended to follow this practice. But there are some important facts you might need to know:
-
-1. When loading the library before loading other stylesheets (which modifies the Spotlight default theme) you do not have to add a "!important" flag to the styles.
-2. When using Spotlight with anchors it is recommended to load the library in the head section of the document to prevent executing the default anchor behavior when the user has clicked during page load.
-3. In rare situations it also might produce a short flashing/reflow after page load, depending on your stack. Moving the script tag into the head section will solve this issue.
-
## Custom Builds
-> __Note:__ You can modify all source files e.g. stylesheets, template and also the icon files located in _/src/img/_. Providing a more handy way to pass custom icons is coming soon.
+Go to the root directory of Spotlight and run:
+```cmd
+npm install
+```
-Perform a full build:
-```bash
+Perform a build:
+```cmd
npm run build
```
-The destination folder of the build is: _/dist/_
+The final build is located in the `dist/` folder.
---
diff --git a/dist/js/spotlight.min.js b/dist/js/spotlight.min.js
index 3e09a29..b06da31 100644
--- a/dist/js/spotlight.min.js
+++ b/dist/js/spotlight.min.js
@@ -1,30 +1,30 @@
/**
- * Spotlight.js v0.7.1
+ * Spotlight.js v0.7.2
* Copyright 2019 Nextapps GmbH
* Author: Thomas Wilkerling
* Licence: Apache-2.0
* https://github.com/nextapps-de/spotlight
*/
-(function(){'use strict';Object.assign||(Object.assign=function(a,b){console.log("assign",a,b);for(var c=Object.keys(b),e=0,f;e
-Demo • Getting Started • Gallery Groups • Options • Styling • API • Custom Builds • Changelog
+Demo • Getting Started • Gallery Groups • Options • Styling • API • Changelog
## Whats new in 0.7.0?
@@ -50,8 +50,9 @@ Alternatively you can:
- Adaptive responsive images (by viewport size, pixel ratio and available internet bandwidth)
- Auto-fit images and videos (as "contain" or as "cover")
- Custom Controls
+- Fully configurable via markup
- Loading Spinner
-- Prefetch next image (background task)
+- Prefetch next image
- Custom options
- Simply customize via markup (data-attributes)
- Arrange built-in animations
@@ -234,25 +235,13 @@ You can also load modules via CDN, e.g.:
The ES6 modules are not minified. Please use your favored bundler or build tool for this purpose.
-### Basic Setup
+## Basic Usage (Markup)
-__1. Just insert the script resource tag right after the documents head:__
+#### Anchor + Images
-> When you need to add custom styling through css class modifications it is recommended to load the library before you load the css which contains the modifications. Otherwise you have to add an _"!important"_ flag to override existing styles.
+The most simple way is the combination of img tags as preview images (thumbs) wrapped in an anchor element which points to the fully sized image. The advantage of this workaround is it fully falls back to a classical behavior. It is the universal markup language which all web tools already understand. Therefore, it may have some advantages for SEO also.
-```html
-
-
-
- 
+
```
-Since "zoom" is a shorthand for both zoom buttons, this is the same:
+When clicked on it Spotlight will pick the optimum choice.
-```html
-
![@@ -88,9 +88,9 @@ - - - + + + @@ -100,7 +100,7 @@ Choose Modifier: - + diff --git a/package.json b/package.json index 5f71877..7a5a018 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spotlight.js", - "version": "0.7.1", + "version": "0.7.2", "description": "Modern HTML5 Image Gallery", "homepage": "https://github.com/nextapps-de/spotlight/", "author": "Thomas Wilkerling", diff --git a/src/js/helper.js b/src/js/helper.js index 11276f5..a1e48ab 100644 --- a/src/js/helper.js +++ b/src/js/helper.js @@ -134,3 +134,13 @@ export function cancelEvent(event, prevent){ //return false; } + +/** + * @param {!string} element + * @return {Element} + */ + +export function createElement(element){ + + return document.createElement(element); +} \ No newline at end of file diff --git a/src/js/polyfill.js b/src/js/polyfill.js index 4c3d687..2b0dde3 100644 --- a/src/js/polyfill.js +++ b/src/js/polyfill.js @@ -2,7 +2,7 @@ Object.assign || (Object.assign = function(target, source){ - console.log("assign", target, source); + //console.log("assign", target, source); const keys = Object.keys(/** @type {!Object} */(source)); @@ -18,7 +18,7 @@ Object.assign || (Object.assign = Element.prototype.closest || (Element.prototype.closest = function(classname){ - console.log("closest", classname); + //console.log("closest", classname); classname = classname.substring(1); diff --git a/src/js/spotlight.js b/src/js/spotlight.js index 0ae5eb3..3279b83 100644 --- a/src/js/spotlight.js +++ b/src/js/spotlight.js @@ -6,7 +6,7 @@ * https://github.com/nextapps-de/spotlight */ -import { addClass, removeClass, setStyle, prepareStyle, getByClass, getByTag, setText, addListener, removeListener, cancelEvent } from "./helper.js"; +import { addClass, removeClass, setStyle, prepareStyle, getByClass, getByTag, setText, addListener, removeListener, cancelEvent, createElement } from "./helper.js"; import widget from "./template.js"; const controls = [ @@ -36,8 +36,7 @@ const controls_default = { "fullscreen": 1 }; -const tpl_video = document.createElement("video"); -const tpl_control = document.createElement("div"); +const tpl_video = /** @type {HTMLVideoElement} */ (createElement("video")); const controls_dom = {}; const video_support = {}; @@ -225,7 +224,7 @@ function setup(){ export function addControl(classname, fn){ - const div = tpl_control.cloneNode(false); + const div = createElement("div"); div.className = "spl-" + classname; addListener(div, "click", fn); @@ -522,7 +521,7 @@ function init_slide(index, direction){ if(type === "video"){ - media = document.createElement("video"); + media = /** @type {HTMLVideoElement} */ (createElement("video")); media.onloadedmetadata = /** @this {HTMLVideoElement} */ function(e){ @@ -543,7 +542,7 @@ function init_slide(index, direction){ media.muted = parse_option("muted"); media.src = gallery.src; //files[i].src; - // const source = document.createElement("source"); + // const source = createElement("source"); // source.type = "video/" + files[i].type; // source.src = files[i].src; // media.appendChild(source); @@ -569,7 +568,7 @@ function init_slide(index, direction){ } else{ - media = new Image(); + media = createElement("img"); media.onload = /** @this {Image} */ function(){ @@ -605,7 +604,7 @@ function prefetch(direction){ if(direction && gallery_next){ - (new Image()).src = gallery_next; + (createElement("img")).src = gallery_next; } } @@ -634,6 +633,24 @@ function resize_listener(){ update_media_viewport(); } + if(prefix_request){ + + if(has_fullscreen()){ + + addClass(maximize, "on"); + } + else{ + + removeClass(maximize, "on"); + + // handle when user toggles the fullscreen state manually + // entering the fullscreen state manually needs to be hide the fullscreen icon, because + // the exit fullscreen handler will not work due to a browser restriction + + display_state(maximize, (screen.availHeight - window.outerHeight) >= 0); + } + } + //update_scroll(); } @@ -708,8 +725,6 @@ function history_listener(event) { if(panel && /*event.state &&*/ event.state["spl"]) { close(true); - //history.back(); - //cancelEvent(event, true); } } @@ -1021,24 +1036,20 @@ export function fullscreen(init){ //console.log("fullscreen", init); - const isFullscreen = ( + const is_fullscreen = has_fullscreen(); - typeof init === "boolean" ? + if((typeof init !== "boolean") || (init !== !!is_fullscreen)){ - init - : - has_fullscreen() - ); + if(is_fullscreen){ - if(isFullscreen){ - - document[prefix_exit](); - removeClass(maximize, "on"); - } - else{ + document[prefix_exit](); + //removeClass(maximize, "on"); + } + else{ - widget[prefix_request](); - addClass(maximize, "on"); + widget[prefix_request](); + //addClass(maximize, "on"); + } } } @@ -1223,7 +1234,7 @@ function show_gallery(){ export function download(){ - const link = document.createElement("a"); + const link = createElement("a"); link.href = media.src; link.download = media.src.substring(media.src.lastIndexOf("/") + 1); body.appendChild(link); @@ -1249,6 +1260,7 @@ export function close(hashchange){ removeClass(body, "hide-scrollbars"); removeClass(widget, "show"); + fullscreen(false); toggle_listener(); history.go(hashchange === true ? -1 : -2); @@ -1438,11 +1450,9 @@ function prepare(){ media: options["media"], src: determine_src(anchor, size, options), - title: ( - parse_option("title") || - anchor["title"] || - anchor["alt"] || - ((tmp = getByTag("img", anchor)[0]) && tmp["alt"]) + title: parse_option("title", + anchor["alt"] || anchor["title"] || + ((tmp = getByTag("img", anchor)[0]) && (tmp["alt"] || tmp["title"])) ) }; diff --git a/src/js/template.js b/src/js/template.js index bf94e06..353e36e 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -1,4 +1,6 @@ -const template = /** @type {HTMLElement} */ (document.createElement("div")); +import { createElement } from "./helper.js"; + +const template = createElement("div"); template.id = "spotlight"; template.innerHTML = (](demo/gallery/california-1751455.jpg){kind=link}