kopia lustrzana https://github.com/Aonrud/ila-microblog.pub
feat: update ILA UI Elements to use new blur feature on sensitive attachments
Aonrud
rodzic
c3024a3cd2
commit
59368171d7
|
|
@ -99,11 +99,36 @@ class Swipe {
|
|||
}
|
||||
|
||||
/**
|
||||
* swiped event.
|
||||
* Event dispatched by any swipe.
|
||||
* @public
|
||||
* @event Swipe#swiped
|
||||
* @type {object}
|
||||
* @property {object} details
|
||||
* @property {string} details.direction - The direction of the swipe action.
|
||||
* @property {object} detail
|
||||
* @property {string} detail.direction - The direction of the swipe action.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Event dispatched on swipe up.
|
||||
* @public
|
||||
* @event Swipe#swiped-up
|
||||
*/
|
||||
|
||||
/**
|
||||
* Event dispatched on swipe down.
|
||||
* @public
|
||||
* @event Swipe#swiped-down
|
||||
*/
|
||||
|
||||
/**
|
||||
* Event dispatched on swipe left.
|
||||
* @public
|
||||
* @event Swipe#swiped-left
|
||||
*/
|
||||
|
||||
/**
|
||||
* Event dispatched on swipe right.
|
||||
* @public
|
||||
* @event Swipe#swiped-right
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -401,6 +426,8 @@ class Scroller {
|
|||
* @property {string} [texts.download = ⮋]
|
||||
* @property {string} [texts.prev = ⮈]
|
||||
* @property {string} [texts.next = ⮊]
|
||||
* @property {string} [texts.reveal = ᴑ]
|
||||
* @property {string} [texts.revealActive = ᴓ]
|
||||
* @property {string} [texts.link = ⛓]
|
||||
* @property {string} [texts.zoom = 🞕]
|
||||
* @property {string} [texts.zoomActive = 🞔]
|
||||
|
|
@ -411,6 +438,8 @@ class Scroller {
|
|||
* @property {string} [titles.download = Download this image]
|
||||
* @property {string} [titles.prev = Previous image]
|
||||
* @property {string} [titles.next = Next image]
|
||||
* @property {string} [titles.reveal = Reveal image]
|
||||
* @property {string} [titles.revealActive = Re-hide image]
|
||||
* @property {string} [titles.link = More information]
|
||||
* @property {string} [titles.zoom = Enlarge image (drag to move the image around)]
|
||||
* @property {string} [titles.zoomActive = Reset image to fit screen]
|
||||
|
|
@ -419,13 +448,15 @@ class Scroller {
|
|||
|
||||
/**
|
||||
* The available buttons which can be set in the Image Viewer configuration.
|
||||
* Note that zoom has an additional 'active' and 'disabled' state setting.
|
||||
* Note that reveal and zoom have additional 'active' states, and zoom also has a 'disabled' state.
|
||||
* @typedef {object} imageViewerButtons
|
||||
* @property {string} [cue] - The cue shown when hovering over an image to indicate the viewer is available.
|
||||
* @property {string} [hide] - The button to hide/close the viewer
|
||||
* @property {string} [download] - The button to download the current image in the viewer
|
||||
* @property {string} [prev] - The button to show the previous image
|
||||
* @property {string} [next] - The button to show the next image
|
||||
* @property {string} [reveal] - The button to reveal a blurred image
|
||||
* @property {string} [revealActive] - The button to hide turn off reveal - i.e. re-blur the image.
|
||||
* @property {string} [link] - The button for the image's link
|
||||
* @property {string} [zoom] - The button to zoom the image to full size and activate panning
|
||||
* @property {string} [zoomActive] - Properties for the zoom button when it's active
|
||||
|
|
@ -448,6 +479,8 @@ const defaultImageViewerConfig = {
|
|||
download: "⮋",
|
||||
prev: "⮈",
|
||||
next: "⮊",
|
||||
reveal: "ᴑ",
|
||||
revealActive: "ᴓ",
|
||||
link: "⛓",
|
||||
zoom: "🞕",
|
||||
zoomActive: "🞔",
|
||||
|
|
@ -458,6 +491,8 @@ const defaultImageViewerConfig = {
|
|||
download: "",
|
||||
prev: "",
|
||||
next: "",
|
||||
reveal: "",
|
||||
revealActive: "",
|
||||
link: "",
|
||||
zoom: "",
|
||||
zoomActive: "",
|
||||
|
|
@ -468,6 +503,8 @@ const defaultImageViewerConfig = {
|
|||
download: "Download this image",
|
||||
prev: "Previous image",
|
||||
next: "Next image",
|
||||
reveal: "Reveal image",
|
||||
revealActive: "Blur image",
|
||||
link: "More information",
|
||||
zoom: "Enlarge image (drag to move the image around)",
|
||||
zoomActive: "Reset image to fit screen",
|
||||
|
|
@ -583,6 +620,7 @@ class ImageViewer {
|
|||
el.alt = img.getAttribute("alt");
|
||||
this._loader.style.visibility = "hidden";
|
||||
this._updateCaption(n);
|
||||
this.revealToggle(!img.dataset.hasOwnProperty("reveal") || !img.dataset.reveal == 'true');
|
||||
this._updateControls();
|
||||
}
|
||||
}
|
||||
|
|
@ -670,6 +708,17 @@ class ImageViewer {
|
|||
e.currentTarget.classList.toggle("zoomed");
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle click events for toggling the reveal status
|
||||
* @protected
|
||||
* @param {HTMLElement} e The click event
|
||||
*/
|
||||
reveal(e) {
|
||||
const state = this._imgDisplay.style.filter.includes("blur");
|
||||
this.revealToggle(state);
|
||||
this.btnToggle(e.currentTarget, state);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the specified button on or off as specified
|
||||
* @protected
|
||||
|
|
@ -713,6 +762,23 @@ class ImageViewer {
|
|||
pz.setStyle("cursor", "auto");
|
||||
pz.destroy();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the reveal state.
|
||||
* @public
|
||||
* @param {boolean} [reveal = true]
|
||||
*/
|
||||
revealToggle(reveal = true) {
|
||||
const caption = this._overlay.querySelector(".caption");
|
||||
|
||||
if (reveal) {
|
||||
this._imgDisplay.style.filter = "";
|
||||
caption.style.color = "";
|
||||
} else {
|
||||
this._imgDisplay.style.filter = "blur(1em)";
|
||||
caption.style.color = getComputedStyle(caption).getPropertyValue('background-color');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the overlay and insert in the document
|
||||
|
|
@ -750,6 +816,7 @@ class ImageViewer {
|
|||
|
||||
this._overlay = overlay;
|
||||
this._imgDisplay = activeImg;
|
||||
this._caption = caption;
|
||||
this._loader = loader;
|
||||
this._active = false;
|
||||
|
||||
|
|
@ -812,6 +879,8 @@ class ImageViewer {
|
|||
if (this._images.length > 1) {
|
||||
btns.push("next", "prev");
|
||||
}
|
||||
btns.push("reveal");
|
||||
|
||||
const anchors = [ "download", "link" ];
|
||||
|
||||
for (const b of btns) {
|
||||
|
|
@ -854,6 +923,14 @@ class ImageViewer {
|
|||
}
|
||||
}
|
||||
|
||||
const btnReveal = document.getElementById("btn-reveal");
|
||||
if (this._images[i].dataset.reveal == 'true') {
|
||||
btnReveal.style.display = "block";
|
||||
} else {
|
||||
btnReveal.style.display = "none";
|
||||
}
|
||||
|
||||
|
||||
if (this._config.panzoom) {
|
||||
console.log(`Shown: ${img.width}; Actual: ${img.naturalWidth}`);
|
||||
const btnZoom = document.getElementById("btn-zoom");
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ const iv = new ImageViewer({
|
|||
download: "",
|
||||
prev: "",
|
||||
next: "",
|
||||
reveal: "",
|
||||
revealActive: "",
|
||||
link: "",
|
||||
zoom: "",
|
||||
zoomActive: "",
|
||||
|
|
@ -18,7 +20,9 @@ const iv = new ImageViewer({
|
|||
hide: "fas fa-fw fa-times-circle",
|
||||
download: "fas fa-fw fa-download",
|
||||
prev: "fas fa-fw fa-chevron-circle-left",
|
||||
next: "fa fa-fw fa-chevron-circle-right",
|
||||
next: "fas fa-fw fa-chevron-circle-right",
|
||||
reveal: "fas fa-fw fa-eye",
|
||||
revealActive: "fas fa-fw fa-eye-slash",
|
||||
link: "fas fa-fw fa-file-pdf",
|
||||
zoom: "fas fa-fw fa-search-plus",
|
||||
zoomActive: "fas fa-fw fa-search-minus",
|
||||
|
|
|
|||
|
|
@ -461,7 +461,7 @@
|
|||
|
||||
{% if attachment.type == "Image" or (attachment | has_media_type("image")) %}
|
||||
{% if attachment.url not in object.inlined_images %}
|
||||
<img class="viewer" src="{{ attachment.resized_url or attachment.proxied_url }}"{% if attachment.name %} alt="{{ attachment.name }}"{% endif %} class="attachment u-photo" data-caption-id="content-{{ object.id }}" data-full="{{ attachment.proxied_url }}" />
|
||||
<img class="viewer" src="{{ attachment.resized_url or attachment.proxied_url }}"{% if attachment.name %} alt="{{ attachment.name }}"{% endif %} class="attachment u-photo" data-caption-id="content-{{ object.id }}" data-full="{{ attachment.proxied_url }}" {% if object.sensitive %} data-reveal="true" {% endif %} />
|
||||
{% endif %}
|
||||
{% elif attachment.type == "Video" or (attachment | has_media_type("video")) %}
|
||||
<div class="video-wrapper">
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@
|
|||
"": {
|
||||
"name": "ILA Microblog.pub assets",
|
||||
"dependencies": {
|
||||
"ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.7.0"
|
||||
"ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ila-ui-elements": {
|
||||
"name": "ila_ui_elements",
|
||||
"version": "0.7.0",
|
||||
"resolved": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#2c3796493b9852bb9d8a65a09adac621684d1c7f",
|
||||
"version": "0.8.0",
|
||||
"resolved": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#0ab1b563f03183f786fdec97009fbe36f64ee50a",
|
||||
"license": "GPL-3.0-or-later"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"ila-ui-elements": {
|
||||
"version": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#2c3796493b9852bb9d8a65a09adac621684d1c7f",
|
||||
"from": "ila-ui-elements@Aonrud/ila-ui-elements#semver:0.7.0"
|
||||
"version": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#0ab1b563f03183f786fdec97009fbe36f64ee50a",
|
||||
"from": "ila-ui-elements@Aonrud/ila-ui-elements#semver:0.8.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
"author": "Aonrud",
|
||||
"license": "",
|
||||
"dependencies": {
|
||||
"ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.7.0"
|
||||
"ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.8.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue