Skip to content

Instantly share code, notes, and snippets.

@sambarrowclough

sambarrowclough/gist:27f9321ae4fb6b521268d00cf53db29e

Created August 11, 2020 13:06
Show Gist options
  • Save sambarrowclough/27f9321ae4fb6b521268d00cf53db29e to your computer and use it in GitHub Desktop.
Save sambarrowclough/27f9321ae4fb6b521268d00cf53db29e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
import tippy, { createSingleton } from "tippy.js";
import "tippy.js/themes/light-border.css";
import "tippy.js/dist/tippy.css";
import "@babel/polyfill";
import Swal from "sweetalert2/dist/sweetalert2.js";
import "sweetalert2/src/sweetalert2.scss";
import "loaders.css"
// Local
import * as _ from "./utils";
import "./Editor.scss";
import "./libs/pickr/src/scss/themes/nano.scss";
import Pickr from "./libs/pickr";
import Croppie from "./libs/Croppie/croppie";
import "./libs/Croppie/croppie.css";
import Spinner from "./Spinner";
import Logger from "./Logger";
// import data from "./data.json";
let isDev = __ENV__ === "dev";
window.log = {
debug: () => {},
error: () => {},
warn: () => {},
info: () => {}
}
class Editor {
static _croppie = Croppie;
static _utils = _;
static _pickr = Pickr;
static _tippy = tippy;
static EDITOR_ACTIONS = {
DONE: "DONE",
CANCEL: "CANCEL",
ZOOM: "ZOOM",
SELECT: "SELECT",
REPLACE: "REPLACE",
SETTINGS_DURATION:"SETTINGS_DURATION",
SETTINGS_START: "SETTINGS_START",
SETTINGS_RANDOM: "SETTINGS_RANDOM",
SETTINGS_ARROWS: "SETTINGS_ARROWS",
SETTINGS_HOVER_PAUSE: "SETTINGS_HOVER_PAUSE",
SETTINGS_NUMBERED: "SETTINGS_NUMBERED",
SETTINGS_EFFECT: "SETTINGS_EFFECT",
SETTINGS_VISIBLE: "SETTINGS_VISIBLE",
SETTINGS: "SETTINGS",
URL: "URL",
CAPTION: "CAPTION",
PREVIEW: "PREVIEW",
DELETE: "DELETE",
ADD: "ADD",
}
// Evenlistener name: [callbacks]
_eventListener = {
// Actions
init: [],
move: [],
edit: [],
add: [],
delete: [],
select: [],
publish: [],
settings:[],
replace:[],
url:[],
caption:[],
preview:[],
back: [],
done:[],
cancel:[],
// Logs
error: [],
debug: [],
warn: []
};
static DEFAULT_OPTIONS = {
boundaryHeight: 500,
boundaryWidth: 1200,
animSpeed: 0,
effect: 8,
nav: true,
nav2: false,
pauseOnHover: true,
pauseTime: 3000,
next: "Next",
previous: "Prev",
randomStart: true,
startSlide: 0,
visible: true,
forceManual: false,
slides: [
{
text: null,
imageUrl: "https://d13z1xw8270sfc.cloudfront.net/origin/477866/my-img-1595420917353.png",
url: null,
linkMode: null
}
]
}
_slides = [];
_slide = null;
_slideLimit = 10;
_logo = null;
_sortables = [];
_style = {};
pickr = null;
_slideInitIndex = 0;
constructor(opt) {
log.debug("Begin initialisation");
log.debug("Resolving options");
this._resolveOptions(opt)
.then(() => {
log.debug("Resolved options");
log.debug("Binding components");
return this._bindComponents();
})
.then(() => {
log.debug("Bound component");
this._emit("init", this);
})
.catch((e) => {
this._emit("error", e);
});
}
_resolveOptions(opt) {
return new Promise((resolve, reject) => {
this.namespace = "designeditor";
// Assign default values
this.options = this.opt = Object.assign(
{},
Editor.DEFAULT_OPTIONS,
opt
);
log.debug("Options:", this.options);
this._root = {
editorActions: {
select: [],
},
};
// Slideshow
if (opt.slides?.length) {
log.debug("Setting up slideshow controls");
this._slides = opt.slides
} else {
log.debug("No slides given in options, setting up with default image")
this._slides = [{ imageUrl: "https://d13z1xw8270sfc.cloudfront.net/origin/477866/plain-white-background_1592919904955.jpg" }]
}
if (!opt?.boundaryHeight) {
log.warn(`Using default boundary width ${Editor.DEFAULT_OPTIONS.boundaryHeight}`)
}
if (!opt?.boundaryWidth) {
log.warn(`Using default boundary width ${Editor.DEFAULT_OPTIONS.boundaryWidth}`)
}
resolve();
});
}
_flexLoaded(){
const url = "javascripts/flexslider/jquery.flexslider-min_v1.js"
return document.body.innerHTML.search(url) > -1
}
async _bindComponents() {
const { flex, slideshowTarget } = this.options
// TODO: resolveOptions should set the this.startImageUrl so we are not doing checks like this
// Set default image as white-background
if (this._slides && this._slides.length && this._activeSlide() && this._activeSlide().imageUrl) {
const defaultImage = "https://d13z1xw8270sfc.cloudfront.net/origin/477866/plain-white-background_1592919904955.jpg";
const url = this._activeSlide().imageUrl
var isImg = await _.isImg(url);
if (!isImg) {
this._activeSlide().imageUrl = defaultImage
log.warn(`Image [${url}] is not an image. Binding default image to the editor.`)
}
} else {
this._emit("warn", "Found no image in options, binding default image.")
}
if (flex) {
flex.remove();
log.debug("Removed flex slider");
await this._buildImageEditorShell().catch(err => this._emit("error", err));
log.debug("Built image editor shell");
} else if (flex && !isImg) {
log.error("Failed to build shideshow. No flex object and startImage is not an image.");
this._emit("error", err)
} else {
await this._buildImageEditorShell().catch(err => this._emit("error", err));
log.debug("Built image editor shell");
}
// Remove default spacing on buttons for editor
var btns = document.querySelectorAll(".ql-toolbar button");
for (let index = 0; index < btns.length; index++) {
const btn = btns[index];
if (btn instanceof HTMLElement) {
btn.style.marginBottom = "0px";
}
}
// Styles
if (this._style.enabled) {
// Disable main style sheet
document.querySelector("#design_css_master").disabled = true;
this._buildStyles();
}
// Spotlight
slideshowTarget.style.zIndex = "1002";
const overlay = _.createFromTemplate(`<div :ref=overlay id="overlay"></div>`);
_.inBefore(overlay.overlay, document.body);
}
// blob -> https://d13z1xw8270sfc.cloudfront.net/origin/{storeId}/{file}
async url(blob, storeId) {
var time = new Date().getTime();
if (/Edge/.test(navigator.userAgent) || /Trident/.test(navigator.userAgent)) {
var file = new Blob([blob], { type: "image/png" });
file.name = "my-img-" + time + ".png";
} else {
var file = new File([blob], "my-img-" + time + ".png", {
type: "image/png",
});
}
const signed = await this.sign(storeId, file.name, file.type, "prodimg")
return this.upload(file, signed.url, storeId);
}
async sign(shopkeeper, fileName, contentType, type = "prodimg") {
var url = "https://2iiejpzs1a.execute-api.eu-west-1.amazonaws.com/v1/geturl";
var opts = {
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
shopkeeper: shopkeeper,
fileName: fileName,
contentType: contentType,
type: type,
}),
method: "POST",
};
return fetch(url, opts).then(function (res) {
if (res.status === 200) {
return res.json();
} else {
throw new Error(res.statusText);
}
});
}
async upload(file, url, storeId) {
var opts = {
headers: {
"content-type": file.type,
"x-amz-acl": "public-read",
},
body: file,
method: "PUT",
};
return fetch(url, opts).then(function (res) {
if (res.status === 200) {
return (
"https://d13z1xw8270sfc.cloudfront.net/origin/" +
storeId +
"/" +
file.name
);
} else {
throw new Error(res.statusText);
}
});
}
async _skip(e) {
log.debug("SKIP:START", this._activeSlide());
// Get the original image
this._activeSlide().imageUrl = this._slide.data.url
// Hide done, cancel actions
this._hideCropActions()
// Wait between 0.6s-1.0s
await new Promise(r => setTimeout(r, Math.floor(Math.random()*300+200)))
// Reset points
if (this._slide.backup) {
const { url } = this._slide.data
const { points, zoom, orientation } = this._slide.backup
await this._slide.bind({ url, points, orientation, zoom })
}
// Show toolbar, publish settings tools
this._showEditorActions()
log.debug("SKIP:END", this._activeSlide());
}
_preview(e){
log.debug("PREVIEW:START", $("#slider1"))
const { captionInput, urlInput, preview } = this._root.editorActions
if (preview.classList.contains("disabled")) return
const slides = this._slides.map((x) => x.imageUrl).filter(Boolean)
const editor = this._slide.elements.boundary;
if (captionInput) {
this._saveCaptionText()
_.rm(captionInput)
this._root.editorActions.captionInput = null
}
if (urlInput) {
this._saveUrlText()
_.rm(urlInput)
this._root.editorActions.urlInput = null
}
if (slides.length === 0) {
this._emit("error", new Error("PREVIEW_UNAVAILABLE: Slide list is empty. Please Add a slide to use the Preview"))
return
}
if (!this._flexLoaded()) {
this._emit("error", new Error("PREVIEW_UNAVAILABLE: flex.jquery dependency not loaded. Note: We only load this dependency if you have slides on initialisation"))
return
}
const html = _.createFromTemplate(`
<div :ref=flexslider class="slider-wrapper theme-default">
<div id="slider1" class="flexslider">
<div :ref=back class="btn-group settings slider-prev">
<button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-left"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>
</button>
</div>
<ul class="slides">
${ this._slides && this._slides.length
? this._slides.map(
(x) => `
<li>
${ x.url
? `<a target="_blank" href="${x.url}"> <img data-src="${x.imageUrl}" class="lazyload" /> ${ x.text ? `<p class="flex-caption">${x.text}</p>` : "" } </a>`
: `<img data-src="${x.imageUrl}" class="lazyload" /> ${ x.text ? `<p class="flex-caption">${x.text}</p>` : "" }`
}
</li>
`
)
: ""
}
</ul>
</div>
</div>
`);
// Bind flexslider for preview
editor.insertAdjacentElement("beforebegin", html.flexslider);
let animation = document.querySelector(".effect").value;
if (animation === "8") {
animation = "fade";
} else if (animation === "1") {
animation = "slide";
}
const opts = {
useCSS: true,
touch: true,
animation: animation,
animationSpeed: document.querySelector(".speed").value,
slideshowSpeed: document.querySelector(".duration").value,
// startAt: parseInt(document.querySelector(".start").value),
directionNav: document.querySelector("#arrows").checked,
prevText: "<",
nextText: ">",
pauseOnHover: document.querySelector("#pause").checked,
randomize: document.querySelector("#random").checked,
start: (e) => {
window.flexslider = e;
log.debug("START")
},
};
$("#slider1").flexslider(opts);
editor.style.display = "none";
// Preview events
this._on(html.back, "click", (e) => {
log.debug("BACK:START", this._slide)
editor.style.display = "block";
$("#slider1").remove();
_.rm(html.flexslider)
log.debug("BACK:END", this._slide)
});
tippy(html.back, {
content: "Back",
delay: 350
});
// Send event
log.debug("PREVIEW:END", $("#slider1"))
}
spinner = {
start: () => {
const { editorSpinner } = this._root.editorActions
editorSpinner.style.opacity="1";
editorSpinner.style.zIndex="1000";
},
stop: () => {
const { editorSpinner } = this._root.editorActions
editorSpinner.style.opacity="0";
editorSpinner.style.zIndex="0";
}
}
async _done(e) {
log.debug("DONE:START", this._activeSlide())
const { zoomerWrap, overlay, boundary } = this._slide.elements;
const { _slideInitIndex, _slides } = this;
const { editorActions } = this._root;
const { storeId, publishPosition } = this.options;
this._slide.elements.img.classList.add('sleep')
this.spinner.start()
zoomerWrap.style.zIndex="0";
// Save edited photo
const blob = await this._slide.result({ type: "blob" });
const url = window.URL.createObjectURL(blob);
_slides[_slideInitIndex].imageUrl = url;
// Hide loader
await new Promise(r => setTimeout(r, Math.floor(Math.random()*700+400)))
zoomerWrap.style.zIndex="100";
this.spinner.stop()
await new Promise(r => setTimeout(r, 50))
this._slide.elements.img.classList.remove('sleep')
this._hideCropActions()
this._showEditorActions()
log.debug("DONE:END", this._activeSlide())
}
async _replace(e){
log.debug("REPLACE:START", e)
if (e.target.files?.length === 0) return;
const { left, right, selectContainer, edit, rm, preview, URL, caption } = this._root.editorActions
// Loader
this._slide.elements.img.classList.add('sleep')
this.spinner.start()
// Bind replacing image to the Editor
const file = e.target.files[0];
const url = window.URL.createObjectURL(file);
// less than 1mb? wait a bit
if (file.size < 1000000) {
await new Promise(r => setTimeout(r, Math.floor(Math.random()*500+300)))
}
await this._slide.bind(url)
// Enable editor actions
if (this._isDefaultImage()) {
[edit, preview, rm, URL, caption, left, right, selectContainer].forEach(x => x.classList.remove("disabled"))
}
// Crop image and save it
const blob = await this._slide.result({ type: "blob" });
const img = window.URL.createObjectURL(blob);
this._slides[this._slideInitIndex].imageUrl = img;
// Hide loader
this._slide.elements.img.classList.remove('sleep')
this.spinner.stop()
log.debug("REPLACE:END", this._activeSlide())
}
async _publish(e) {
log.debug("PUBLISH:START", this);
const { storeId } = this.options
const { publish, publishSpinner, publishText } = this._root.editorActions
publish.classList.remove("active")
publish.classList.add("active");
publishSpinner.style.display="block"
publishText.style.opacity="0"
try {
// Get urls from blobs
const { err, slides } = await (async () => {
let slides = []
let err
for(const slide of this._slides) {
const { imageUrl } = slide
// Ignore the default image
if (imageUrl.indexOf('plain-white-background') > -1) {
continue;
}
if (imageUrl && imageUrl.startsWith("blob")) {
const blob = await fetch(imageUrl).then(r => r.blob())
const url = await this.url(blob, storeId).catch(err => {
acc.err += err
})
if (url) {
slide.imageUrl = url
}
}
slides.push(slide)
}
return { err, slides }
})()
if (err) {
throw new Error(err)
}
const set = this._saveSettings()
const cp = _.shallow(set)
const parsed = _.parse(cp)
const slide = _.assign(parsed, {slides})
// Save slides
let request = {
uri: "Editor/svc/Services.svc/UpdateSlideShow",
method: "POST",
body: _.str({
storeId: storeId,
debugId: log._uuid,
slide: _.str(slide)
}),
headers: {
"content-type": "application/json",
},
};
await fetch(request.uri, request).then((response) =>
handleResponse({
request,
response
})).then(() => {
// Success!
Swal.fire({
icon: "success",
animation: false,
title: "Your work has been saved",
showConfirmButton: false,
timer: 1500,
});
}).catch((err) => {
Swal.fire({
icon: "error",
title: "Oops...",
html: err,
animation: false,
confirmButtonColor: "#f054a7",
});
log.error("Failed to save SlideShow. Request: " + _.str(request) + ". Error: " + err);
}).then(async () => {
// Stop spinner
publish.classList.remove("active");
publishSpinner.style.display="none"
publishText.style.opacity="1"
log.debug("PUBLISH:END", this);
})
} catch (err) {
Swal.fire({
icon: "error",
title: "Oops...",
html: err,
animation: false,
confirmButtonColor: "#f054a7",
});
log.error("Something went wrong prepparing the slideshow for save. Error:", err);
publish.classList.remove("active");
publishSpinner.style.display="none"
publishText.style.opacity="1"
}
}
activeSlideIndex() {
let { select } = this._root.editorActions;
select = Array.from(select).filter(Boolean);
const active = select.findIndex((x) => x.classList.contains("active"));
return active;
}
async _buildImageEditorShell() {
const { slideshowTarget } = this.options;
const { _slideInitIndex, namespace } = this;
const show = this.options?.visible
const slideSettings = this.options;
// Destory any previous croppie as we can only init one at a time
if (this._slide) {
this._slide.destroy();
this._slide = null;
log.debug("Destoryed croppie instance");
}
// Build slide editor
// Default image
// TODO: resolveOptions should set the this.startImageUrl so we are not doing checks like this
let url = this._activeSlide().imageUrl
if (!url) {
url = "https://d13z1xw8270sfc.cloudfront.net/origin/477866/plain-white-background_1592919904955.jpg";
}
var { offsetWidth } = slideshowTarget.parentElement;
const { width, height } = await _.dimen(url);
const aspect = _.aspect(width, height, offsetWidth, offsetWidth);
const opt = {
width: aspect.width,
height: aspect.height,
target: slideshowTarget,
url,
mouseWheelZoom: false,
disabled: !show
};
log.debug("Building croppie instance with options: ", opt);
this._slide = await this._buildCroppieInstance(opt);
log.debug("Built croppie instance with options: ", opt);
const { zoomerWrap, overlay, boundary } = this._slide.elements;
// Disable interaction
zoomerWrap.style.opacity = "0";
overlay.style.pointerEvents = "none";
log.debug(`Building editor html`)
// Paint shell actions over editor
const html = _.createFromTemplate(`
<div :ref=slideEditorShellContainer style="width:${
boundary.offsetWidthh
}px; height:${
boundary.offsetHeight
}px" class="${namespace}-slide-editor-shell-container">
<div class="${namespace}-editor-toolbar" :ref=container>
<!-- SPINER -->
<div :ref=editorSpinner style="top:50%;left:50%;z-index:0;" class="spinner">
<span style="border-right-color:black;"></span>
</div>
<!-- SPINER -->
<!-- CROP ACTIONS -->
<div style="top:2.25em; visibility:hidden; opacity:0;" :ref=cropActions class="btn-group shell-actions">
<button :ref=cancel class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<button :ref=skip class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
</button>
<button :ref=done class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
</div>
<!-- CROP ACTIONS -->
<div :ref=toolbarContainer class="btn-group shell-actions">
<!-- Add -->
<button :ref=add class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
<input :ref=addInput type="file" class="shell-input" style="display:none;">
<!-- Add -->
<div class="de-toolbar-divide"></div>
<!-- Crop -->
<button :ref=edit class="btn ${this._isDefaultImage() ? "disabled": ""}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>
</button>
<!-- Crop -->
<!-- Order slides -->
<div :ref=moveContainer class="btn-group de-order-slides">
<!-- Left -->
<div :ref=left class="btn ${this._isDefaultImage() || this._slides.length === 1 ? "disabled" : ""}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
</div>
<!-- Left -->
<!-- Right -->
<div :ref=right class="btn ${this._isDefaultImage() || this._slides.length === 1 ? "disabled" : ""}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<!-- Right -->
</div>
<!-- Order slides -->
<!-- URL -->
<button :ref=URL class="btn ${this._isDefaultImage() ? "disabled": ""}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
</button>
<!-- URL -->
<!-- Caption -->
<button :ref=caption class="btn ${this._isDefaultImage() ? "disabled": ""}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
</button>
<!-- Delete -->
<button :ref=rm class="btn ${this._isDefaultImage() ? "disabled": ""}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
</button>
<!-- Delete -->
</div>
<!-- shell actions -->
<!-- Select Actions -->
<div :ref=selectMoveContainer class="select-actions">
<!-- Select -->
<div :ref=selectContainer class="btn-group select-container ${this._isDefaultImage() || this._slides.length === 1 ? "disabled" : ""}">
${
this._slides && this._slides.length
? this._slides
.map((slide) =>
`<div :arr=select class="select-item"></div>`
)
.join("")
: ""
}
</div>
<!-- Select -->
</div>
<!-- Select Actions -->
<!-- settings -->
<div :ref=settingsPanel class='slideshow-settings-panel'>
<div class='setting'>
<div class='setting-header'>
<svg :ref=visibleHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Visible</div>
</div>
<div class='setting-action'>
<input type="checkbox" :ref=visible id="visible" name="set-name" class="switch-input">
<label for="visible" class="switch-label"></label>
</div>
</div>
<div class='divide'></div>
<div class='setting'>
<div class='setting-header'>
<svg :ref=effectHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Effect</div>
</div>
<div class='setting-action'>
<select :ref=effect class="setting-select effect">
<option value="1">Slide</option>
<option value="8">Fade</option>
</select>
</div>
</div>
<div class='setting'>
<div class='setting-header'>
<svg :ref=speedHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Speed</div>
</div>
<div class='setting-action'>
<select :ref=speed class="setting-select speed">
<option value="0">Manual</option>
<option value="1800">Very Slow</option>
<option value="1200">Slow</option>
<option value="800">Fast</option>
<option value="300">Very Fast</option>
</select>
</div>
</div>
<div class='setting'>
<div class='setting-header'>
<svg :ref=durationHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Duration</div>
</div>
<div class='setting-action'>
<select :ref=duration class="setting-select duration">
<option value="3000">Very Short</option>
<option value="5000">Short</option>
<option value="7000">Long</option>
<option value="10000">Very Long</option>
</select>
</div>
</div>
<div class='divide'></div>
<div class='setting'>
<div class='setting-header'>
<svg :ref=randomHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Random</div>
</div>
<div class='setting-action'>
<input type="checkbox" :ref=random id="random" name="set-name" class="switch-input">
<label for="random" class="switch-label"></label>
</div>
</div>
<div class='setting'>
<div class='setting-header'>
<svg :ref=hoverPauseHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Hover pause</div>
</div>
<div class='setting-action'>
<input type="checkbox" :ref=pause id="pause" name="set-name" class="switch-input">
<label for="pause" class="switch-label"></label>
</div>
</div>
<div class='setting'>
<div class='setting-header'>
<svg :ref=arrowsHelp cmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<div class='setting-title'>Arrows</div>
</div>
<div class='setting-action'>
<input type="checkbox" :ref=arrows id="arrows" name="set-name" class="switch-input">
<label for="arrows" class="switch-label"></label>
</div>
</div>
</div>
<div :ref=settingsContainer class="btn-group settings">
<button :ref=settings class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</button>
</div>
<!-- settings -->
<input :ref=replace type="file" class="shell-input">
<!-- PUBLISH/PREVIEW ACTIONS -->
<div style="position: absolute; bottom:1em; right:1em; display:flex;">
<!-- PREVIEW -->
<div :ref=preview style="color:#717171; background:#dcdcdc;" class="${this._isDefaultImage() ? "disabled" : ""} de-widget-item de-publish">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
<p :ref=previewText style="padding-left:8px; font-size:14px;" class="de-widget-item-text">Preview</p>
</div>
<!-- PREVIEW -->
<!-- PUBLISH -->
<div style="margin-left: 1em;" :ref=publish class="de-widget-item de-publish">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
<p :ref=publishText style="padding-left:8px; font-size:14px;" class="de-widget-item-text">Save</p>
<!-- SPINER -->
<div :ref=publishSpinner style="top:8px; width:100px; position:absolute; transform: scale(0.4, 0.4); width: 100px; display:none" class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
<!-- SPINER -->
</div>
<!-- PUBLISH -->
<div>
<!-- PUBLISH/PREVIEW ACTIONS -->
</div>
`);
const {
slideEditorShellContainer,
addInput,
add,
edit,
replace,
rm,
settingsContainer,
preview,
duration,
start,
random,
pause,
speed,
arrows,
effect,
visible,
URL,
caption,
left,
right,
done,
cancel,
select,
skip
} = html;
boundary.appendChild(slideEditorShellContainer);
log.debug(`Built editor html`)
// Set slideshowsetiings
log.debug(`Setting slideshow setting`)
duration.value = slideSettings.pauseTime;
// start.value = slideSettings.startSlide;
random.checked = slideSettings.randomStart;
pause.checked = slideSettings.pauseOnHover;
speed.value = slideSettings.animSpeed;
arrows.checked = slideSettings.nav;
effect.value = slideSettings.effect;
visible.checked = slideSettings.visible;
log.debug(`Set slideshow setting`)
// Save in memory
this._root.editorActions = Object.assign(this._root.editorActions, html);
this._root.editorActions.select[_slideInitIndex].classList.add("active");
// Tooltips
const toolbarTips = [
tippy(URL, {
content: "URL",
}),
tippy(caption, {
content: "Caption",
}),
tippy(rm, {
content: "Delete",
}),
tippy(edit, {
content: "Crop",
}),
tippy(add, {
content: "Add",
}),
tippy(right, {
content: "Move Right",
}),
tippy(left, {
content: "Move Left",
}),
]
const settingsTips = [
tippy(html.durationHelp, {
content:
"This changes the length of time the slide shows for, before automatically moving to the next slide.",
theme: "light-border",
}),
tippy(html.speedHelp, {
content:
"This setting changes the length of time the effect takes when moving between slides.",
theme: "light-border",
}),
tippy(html.effectHelp, {
content:
"This setting changes the effect used when moving between slides.",
theme: "light-border",
}),
tippy(html.visibleHelp, {
content: "This controls whether to show the Slideshow on your store.",
theme: "light-border",
}),
tippy(html.arrowsHelp, {
content:
"Checking this option will allow the customer to manually move back and forth through the slideshow if they wish. Unchecking it will remove that navigation. In either case, the slideshow will still automatically progress according to your other settings.",
theme: "light-border",
}),
tippy(html.hoverPauseHelp, {
content:
"This will pause the slideshow when the customer hovers over the image, and continue once they move their mouse off. A pointer hovering over a slide usually indicates interest in that slide, and the customer wants or needs more time to look at it.",
theme: "light-border",
}),
tippy(html.randomHelp, {
content:
"Checking this will always start the slideshow on a random slide when first loaded. The slideshow will continue from that point, and loop around to the beginning once it reaches the end.",
theme: "light-border",
}),
]
tippy(settingsContainer, {
content: "Settings",
delay: 350,
})
const cropActionTips = [
tippy(done, {
content: "Crop Image",
delay: 350,
}),
tippy(skip, {
content: "Skip Crop",
delay: 350,
}),
tippy(cancel, {
content: "Cancel",
delay: 350,
})
]
createSingleton(cropActionTips, {
delay: 350,
moveTransition: 'transform 0.2s ease-out',
updateDuration: 200,
})
createSingleton(toolbarTips, {
delay: 350,
moveTransition: 'transform 0.2s ease-out',
updateDuration: 200,
})
createSingleton(settingsTips, {
delay: 350,
moveTransition: 'transform 0.2s ease-out',
updateDuration: 200,
})
// Events
this._on(html.publish, "click", (e) => this._publish(e));
this._on(html.skip, "click", (e) => this._skip(e))
this._on(cancel, "click", async (e) => this._cancel(e));
this._on(done, "click", async (e) => this._done(e));
this._on(preview, "click", async (e) => this._preview(e));
this._on(replace, "change", async (e) => this._replace(e));
this._on(rm, "click", (e) => this._delete(e));
this._on(
[
duration,
random,
pause,
speed,
arrows,
effect,
visible,
], "click", (e) => {
if (e.target === visible) {
if (visible.checked) {
this._slide.elements.img.classList.remove('disabled')
} else {
this._slide.elements.img.classList.add('disabled')
}
}
this._saveSettings()
})
this._on(URL, "click", (e) => {
const { captionInput, urlInput } = this._root.editorActions
if (URL.classList.contains("disabled")) return
if (captionInput) {
this._saveCaptionText()
_.rm(captionInput)
this._root.editorActions.captionInput = null
}
if (urlInput) {
this._saveUrlText()
_.rm(urlInput)
this._root.editorActions.urlInput = null
return
}
// Get position
let { top, left, height, width} = URL.getBoundingClientRect()
const urlWidth = 170
top = top + height + 5 + window.scrollY
left = left - (urlWidth / 2) + 20
// Add HTML Component
const html = _.createFromTemplate(`
<div style="width:${urlWidth}px; left:${left}px; top:${top}px" :ref=urlInput class="de-input de-url">
<input :ref=urlInputField style="width:${urlWidth}px;" ${this._activeSlide().url ? `value=${this._activeSlide().url}` : 'placeholder="https://google.com"'}>
`)
Object.assign(this._root.editorActions, html)
_.inAfter(this._root.editorActions.urlInput, document.body)
// Focus cursor
html.urlInputField.focus()
// close URL input if its active
if (this._root.editorActions.urlInput.classList.contains("active")) {
this._root.editorActions.urlInput.classList.remove("active");
}
});
this._on(caption, "click", (e) => {
const { urlInput, captionInput } = this._root.editorActions
if (caption.classList.contains("disabled")) return
if (urlInput) {
this._saveUrlText()
_.rm(urlInput)
this._root.editorActions.urlInput = null
}
if (captionInput) {
this._saveCaptionText()
_.rm(captionInput)
this._root.editorActions.captionInput = null
return
}
// Get position
let { top, left, height, width} = caption.getBoundingClientRect()
const captionWidth = 170
top = top + height + 5 + window.scrollY
left = left - (captionWidth / 2) + 20
// Add HTML Component
const html = _.createFromTemplate(`
<div style="width:${captionWidth}px; left:${left}px; top:${top}px" :ref=captionInput class="active de-input de-caption">
<input :ref=captionInputField style="width:${captionWidth}px;" ${this._activeSlide().text ? `value=${this._activeSlide().text}` : 'placeholder="Your Caption Here"'}>
`)
Object.assign(this._root.editorActions, html)
_.inAfter(this._root.editorActions.captionInput, document.body)
// Focus cursor
html.captionInputField.focus()
// close URL input if its active
if (this._root.editorActions.captionInput.classList.contains("active")) {
this._root.editorActions.captionInput.classList.remove("active");
}
});
this._on(left, "click", (e) => {
log.debug("MOVE:START", this._slides)
const { select } = this._root.editorActions;
// Get index of selected image
const activeIndex = this.activeSlideIndex();
const newIndex = activeIndex - 1;
// Prevent clicking too far left
if (newIndex === -1) return;
// Update init index
this._slideInitIndex = newIndex;
// Give active class to selected img
select.forEach((s) => s.classList.remove("active"));
select[newIndex].classList.add("active");
// Set the order on the image
select.forEach((s, i) => this._slides[i].sequence);
// Reorder slides
_.arrayMove(this._slides, activeIndex, newIndex);
// Reindex slide sequence
this._slides.forEach((s, i) => {
// Index starts @ 1 :(
s.sequence = i + 1;
});
log.debug("MOVE:END", this._slides)
});
this._on(right, "click", (e) => {
log.debug("MOVE:START", this._slides)
const { select } = this._root.editorActions;
// Get index of selected image
const activeIndex = this.activeSlideIndex();
const newIndex = activeIndex + 1;
// Prevent clicking too far right
if (newIndex === select.length) return;
// Update init index
this._slideInitIndex = newIndex;
// Give active class to selected img
select.forEach((s) => s.classList.remove("active"));
select[newIndex].classList.add("active");
// Set the order on the image
select.forEach((s, i) => this._slides[i].sequence);
// Reorder slides
_.arrayMove(this._slides, activeIndex, newIndex);
// Reindex slide sequence
this._slides.forEach((s, i) => {
// Index starts @ 1 :(
s.sequence = i + 1;
});
log.debug("MOVE:END", this._slides)
});
this._on(settingsContainer, "click", (e) => {
const el = document.querySelector(".slideshow-settings-panel");
if (el.style.display === "none" || el.style.display === "") {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
this._on(add, "click", (e) => addInput.click());
// https://stackoverflow.com/a/12102992/2263032
this._on(addInput, "click", function(){
this.value = null;
})
this._on(addInput, "change", async (e) => this._addSlide(e));
this._on(edit, "click", async (e) => this._edit(e));
this._on(select, "click", async (e) => this._select(e));
}
_saveCaptionText(){
const { captionInput } = this._root.editorActions
if (!captionInput) return
const activeIndex = this.activeSlideIndex();
const caption = captionInput.querySelector(
"input"
).value;
this._slides[activeIndex].text = _.slug(caption)
}
// Save url text
_saveUrlText(){
const { urlInput } = this._root.editorActions
if (!urlInput) return
const activeIndex = this.activeSlideIndex();
const url = urlInput.querySelector(
"input"
).value;
this._slides[activeIndex].url = _.slug(url)
}
_delete(e) {
log.debug("DELETE:START", this._slides);
if (this._root.editorActions.rm.classList.contains("disabled")) return
return Swal.fire({
animation: false,
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#20b7e6",
cancelButtonColor: "#ea1636",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (!result.value) return
const { edit, preview, rm, URL, left, right, selectContainer, caption } = this._root.editorActions
const oldIndex = this._root.editorActions.select.findIndex((x) =>
x.classList.contains("active")
);
let newIndex = 0;
// Use default image if _slides have been deleted
if (this._slides.length === 1) {
this._slides[oldIndex].imageUrl = "https://d13z1xw8270sfc.cloudfront.net/origin/477866/plain-white-background_1592919904955.jpg";
// Disable editor actions
[left, right, selectContainer, edit, preview, rm, URL, caption].forEach(x => x.classList.add("disabled"))
}
// Remove from
// - slides array
// - select array
// - select html
else {
_.rm(this._root.editorActions.select[oldIndex]);
this._slides.splice(oldIndex, 1);
this._root.editorActions.select.splice(oldIndex, 1);
// Move SELECT gallery left one place
//
// FROM
// x - x - o - x
// ^
// '
//
// TO
// x - o - x - x
// ^
// '
if (oldIndex > 0) {
newIndex = oldIndex - 1;
}
}
if (this._slides.length < 2) {
[left, right, selectContainer].forEach(x => x.classList.add("disabled"))
}
this._root.editorActions.select[newIndex].classList.add("active");
const url = this._slides[newIndex].imageUrl;
this._slide.bind({ url });
this._slideInitIndex = newIndex;
log.debug("DELETE:END", this._slides);
});
}
async _edit(e) {
log.debug("EDIT:START", this._slide)
const { preview, edit, selectMoveContainer, captionInput, editorSpinner, urlInput, publish, settingsPanel, cropActions, toolbarContainer, moveContainer, selectContainer, settingsContainer, replace } = this._root.editorActions
const { zoomerWrap, overlay, boundary } = this._slide.elements;
if (edit.classList.contains("disabled")) return
// Loader
this._slide.elements.img.classList.add('sleep')
// Save points incase the user decides to cancel
this._slide.backup = this._slide.get()
if (captionInput) {
// Save text
const activeIndex = this.activeSlideIndex();
this._slides[activeIndex].text = this._root.editorActions.captionInput.querySelector(
"input"
).value;
_.rm(captionInput)
this._root.editorActions.captionInput = null
}
if (urlInput) {
// Save text
const activeIndex = this.activeSlideIndex();
this._slides[activeIndex].url = this._root.editorActions.urlInput.querySelector(
"input"
).value;
_.rm(urlInput)
this._root.editorActions.urlInput = null
}
this._hideEditorActions()
this.spinner.start()
// Wait between 0.6s-1.0s
await new Promise(r => setTimeout(r, Math.floor(Math.random()*1000+600)))
this._slide.elements.img.classList.remove('sleep')
// Enable interaction
zoomerWrap.style.opacity = "1";
zoomerWrap.style.display = "block";
overlay.style.pointerEvents = "auto";
this.spinner.stop()
// Show DONE and CANCEL
cropActions.style.opacity="1"
cropActions.style.zIndex="100"
cropActions.style.visibility="visible"
log.debug("EDIT:END", this._slide)
}
async _select(e){
log.debug("SELECT:START", this._slides[newIndex]);
const { urlInput, captionInput, } = this._root.editorActions
if (captionInput) {
// Save text
const activeIndex = this.activeSlideIndex();
this._slides[activeIndex].text = this._root.editorActions.captionInput.querySelector(
"input"
).value;
_.rm(captionInput)
this._root.editorActions.captionInput = null
}
if (urlInput) {
// Save text
const activeIndex = this.activeSlideIndex();
this._slides[activeIndex].url = this._root.editorActions.urlInput.querySelector(
"input"
).value;
_.rm(urlInput)
this._root.editorActions.urlInput = null
}
// Get index of selected image
var newIndex = Array.from(this._root.editorActions.select).indexOf(
e.target
);
this._slideInitIndex = newIndex;
// Give active class to selected img
this._root.editorActions.select.forEach((s) =>
s.classList.remove("active")
);
this._root.editorActions.select[newIndex].classList.add("active");
// Bind image to editor
const url = this._slides[newIndex].imageUrl;
await this._slide.bind({ url });
log.debug("SELECT:END", this._slides[newIndex]);
}
_saveSettings() {
const { duration, start, random, pause, speed, arrows, effect, visible } = this._root.editorActions
log.debug("SETTINGS:START", this.options)
Object.assign(this.options, {
animSpeed: speed.value,
effect: effect.value,
nav: arrows.checked,
pauseOnHover: pause.checked,
pauseTime: duration.value,
randomStart: random.checked,
// startSlide: start.value ? start.value : 0,
visible: visible.checked ? 1 : 0,
});
log.debug("SETTINGS:END", this.options)
return this.options
}
_onError(err) {
this._emit("error", err)
}
/**
* Add event(s) to element(s).
* @param elements DOM-Elements
* @param events Event names
* @param fn Callback
* @param options Optional options
* @return Array passed arguments
*/
_on = this._listen.bind(this, "addEventListener");
_listen(method, elements, events, fn, options = {}) {
// Normalize array
if (elements instanceof HTMLCollection || elements instanceof NodeList) {
elements = Array.from(elements);
} else if (!Array.isArray(elements)) {
elements = [elements];
}
if (!Array.isArray(events)) {
events = [events];
}
for (const el of elements) {
for (const ev of events) {
el[method](ev, this._handleError(fn), { capture: false, ...options });
}
}
return Array.prototype.slice.call(arguments, 1);
}
_handleError(func) {
const that = this
return function() {
try {
Promise.resolve(
func.apply(this, arguments)
).catch(err =>{
that._emit("error", err)
})
} catch(err) {
that._emit("error", err)
}
}
}
_isDefaultImage() {
return this._slides && this._slides.length && this._slides[0].imageUrl.indexOf('plain-white-background') > -1
}
async _addSlide(e) {
log.debug("ADD:START", e)
if (e.target.files?.length === 0) return;
const file = e.target.files[0]
e = null
const { left, right, urlInput, captionInput, start, select, selectContainer, edit, rm, preview, URL, caption } = this._root.editorActions
// Loader
this._slide.elements.img.classList.add('sleep')
this.spinner.start()
// Save other image meta data
if (captionInput) {
this._saveCaptionText()
_.rm(captionInput)
this._root.editorActions.captionInput = null
}
if (urlInput) {
// Save text
const activeIndex = this.activeSlideIndex();
this._slides[activeIndex].url = this._root.editorActions.urlInput.querySelector(
"input"
).value;
_.rm(urlInput)
this._root.editorActions.urlInput = null
}
// Slide limit
if (this._slides.length >= this._slideLimit) {
this._emit("error", `Reached slide limit of ${this._slideLimit}!`);
return;
}
const url = window.URL.createObjectURL(file);
// ONLY add slide if its NOT the DEFAULT image
if (!this._isDefaultImage()) {
// Add gallery item to SELECT
const html = _.createFromTemplate(`<div :ref=select class="select-item"></div>`)
_.inAfter(html.select, selectContainer)
this._on(html.select, "click", async (e) => this._select(e));
let i = select.push(html.select)
this._slides.push({
imageUrl: url,
});
// Set next active slide on SELECT html
const active = this.activeSlideIndex()
const next = active + 1
select[active].classList.remove('active')
select[next].classList.add('active')
// Move slide next to the active one in _slides
const last = this._slides.length - 1
const ls = this._slides
_.arrayMove(ls, last, next)
this._slideInitIndex = next;
} else {
// Enable editor actions
[edit, preview, rm, URL, caption, left, right, selectContainer].forEach(x => x.classList.remove("disabled"))
}
if (this._slides.length > 1) {
[selectContainer, left, right].forEach(x => x.classList.remove("disabled"))
}
// less than 1mb? wait a bit
if (file.size < 1000000) {
await new Promise(r => setTimeout(r, Math.floor(Math.random()*500+300)))
}
// Bind image to editor
await this._slide.bind(url);
// Save edited photo
const blob = await this._slide.result({ type: "blob" });
const img = window.URL.createObjectURL(blob);
this._slides[this._slideInitIndex].imageUrl = img;
// Hide loader
this._slide.elements.img.classList.remove('sleep')
this.spinner.stop()
log.debug("ADD:END", this._activeSlide())
}
_destroyImageEditor() {
Object.keys(this._root.editorActions).forEach((key) => {
if (Array.isArray(this._root.editorActions[key])) {
this._root.editorActions[key].forEach((el, i) => {
_.rm(this._root.editorActions[key][i]);
delete this._root.editorActions[key][i];
});
// reindex array
this._root.editorActions[key] = Array.from(
this._root.editorActions[key]
).filter(Boolean);
delete this._root.editorActions[key];
} else {
_.rm(this._root.editorActions[key]);
delete this._root.editorActions[key];
}
});
this._root.editorActions = {};
}
async _buildImageEditor() {
const { namespace, _slideInitIndex, } = this;
const { slideshowTarget } = this.options
// Destory any previous croppie as we can only init one at a time
if (this._slide) {
this._slide.destroy();
this._slide = null;
}
// Build Croppie image dimentions
const url = this._slides[_slideInitIndex].imageUrl;
var { offsetWidth } = slideshowTarget.parentElement;
const { width, height } = await _.dimen(url);
const aspect = _.aspect(width, height, offsetWidth, offsetWidth);
const opt = {
width: aspect.width,
height: aspect.height,
target: slideshowTarget,
url,
};
this._slide = await this._buildCroppieInstance(opt);
var el = _.createFromTemplate(`
<div :obj="editorActions">
<div class="${namespace}-editor-toolbar" :ref=container>
<!-- DONE -->
<div class="done" :ref=done>
<button :ref=done class="${namespace}-toolbar-actions-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
</div>
<!-- DONE -->
<!-- MODIFY -->
<div :ref=modify class="modify">
<!-- REPLACE -->
<button :ref=cancel class="${namespace}-toolbar-actions-item">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<input :ref="input" type="file" style="display:none;"/>
<!-- REPLACE -->
</div>
<!-- MODIFY -->
</div>
</div>
`);
// Ref
this._root.editorActions = Object.assign(
this._root.editorActions,
el.editorActions
);
const { done, cancel } = this._root.editorActions;
// Tooltips
tippy(done, {
content: "Done",
delay: 350,
});
tippy(cancel, {
content: "Cancel",
delay: 350
});
// Events
this._on(cancel, "click", async (e) => this._cancel(e));
this._on(done, "click", async (e) => this._done(e));
slideshowTarget.appendChild(el.editorActions.container);
}
_buildStyles() {
var { selectedColours, css, el } = this._style;
if (!selectedColours) return;
// Compile new style sheet
var compiled_style;
selectedColours.forEach(function (clr) {
var regex = new RegExp("\\[" + clr.name + "\\]", "g");
var hex = clr.hex.trim();
if (hex.startsWith("#")) {
hex = hex.slice(1);
}
if (compiled_style) {
compiled_style = compiled_style.replace(regex, hex);
} else {
compiled_style = css.replace(regex, hex);
}
});
// Append the compiled style sheet
var css = document.querySelector(el);
if (!css) {
_.addStyle(el, compiled_style);
} else {
_.rm(css);
_.addStyle(el, compiled_style);
}
}
_buildColourPicker(e) {
if (this._pickr) {
this._pickr.destroyAndRemove();
}
// Create the colour pickr
var pickr = new Pickr({
el: e.target,
theme: "nano",
padding: 10,
default: this._style.initColour,
useAsButton: true,
// showAlways: true,
autoReposition: false,
components: {
preview: true,
opacity: true,
hue: true,
},
});
pickr.show();
// pickr._root.app.style.display = 'none'
// // Reposition the pickr to where the click occured.
// var { top, left } = this._style.rectangle
// top = top + 30
// left = left - 93
// setTimeout(function(){
// var arrow = document.createElement('div')
// arrow.className = 'pcr-tooltip-arrow'
// pickr._root.app.appendChild(arrow)
// pickr._root.app.style.top = top.toFixed(3) + 'px'
// pickr._root.app.style.left = left.toFixed(3) + 'px'
// pickr._root.app.style.display = 'block'
// }, 50)
this._pickr = pickr;
// Append the colour picker in our container
// this._root.widget.reset.insertAdjacentElement( 'beforebegin', this._pickr._root.app)
// Reposition the pickr
// this._pickr._root.app.style.paddingLeft = "20px";
// this._pickr._root.app.style.position = "static";
// Build the custom style sheet when a colour is picked
this._pickr.on("changestop", (instance) => {
// Get index of active colour
var index = this._style.activeColourIndex;
if (typeof index !== "undefined") {
// Get selected colour hex
var hex = instance._color.toHEXA().toString(3);
// Update the colour palette on the page
this._root.colour[index].style.backgroundColor = hex;
// Update the colour swatch
this._style.selectedColours[index].hex = hex;
// TODO: Push only colours to the publish array that have changed.
// Build styles
this._buildStyles();
} else {
throw "No Active Colour Selected!";
}
});
}
// Returns
// - 0 if has not slides
// - the active _slide object if _slides has length
_activeSlide(){
return this._slides && this._slides.length && this._slides[this._slideInitIndex]
}
async _cancel(){
log.debug('START:CANCEL', this._slides)
const { editorSpinner } = this._root.editorActions
// Hide done, cancel actions
this._hideCropActions()
// Wait between 0.6s-1.0s
await new Promise(r => setTimeout(r, Math.floor(Math.random()*300+200)))
// Reset points
if (this._slide.backup) {
const { url } = this._slide.data
const { points, zoom, orientation } = this._slide.backup
await this._slide.bind({ url, points, orientation, zoom })
}
// Show toolbar, publish settings tools
this._showEditorActions()
log.debug('END:CANCEL', this._slides)
}
_showEditorActions(){
const { preview, moveContainer, publish, toolbarContainer, selectMoveContainer, selectContainer, settingsContainer, replace } = this._root.editorActions
// Show toolbar elements on page
toolbarContainer.style.opacity="1"
toolbarContainer.style.zIndex="100"
selectContainer.style.opacity="1"
settingsContainer.style.opacity="1"
settingsContainer.style.zIndex="100"
publish.style.opacity="1"
replace.style.display="block"
selectMoveContainer.style.visibility="visible"
selectMoveContainer.style.opacity="1"
selectMoveContainer.style.zIndex="100"
moveContainer.style.opacity="1"
preview.style.opacity="1"
}
_hideEditorActions(){
const { preview, edit, selectMoveContainer, captionInput, editorSpinner, urlInput, publish, settingsPanel, cropActions, toolbarContainer, moveContainer, selectContainer, settingsContainer, replace } = this._root.editorActions
// Hide elements on page
toolbarContainer.style.opacity="0"
toolbarContainer.style.zIndex="0"
selectContainer.style.opacity="0"
selectContainer.style.zIndex="0"
settingsContainer.style.opacity="0"
settingsContainer.style.zIndex="0"
replace.style.display="none"
settingsPanel.style.display="none"
publish.style.opacity="0"
selectMoveContainer.style.opacity="0"
selectMoveContainer.style.zIndex="0"
moveContainer.style.opacity="0"
preview.style.opacity="0"
}
_hideCropActions(){
const { zoomerWrap, overlay } = this._slide.elements;
const { cropActions } = this._root.editorActions
// Hide DONE and CANCEL
cropActions.style.opacity="0"
cropActions.style.zIndex="0"
// Disable interaction
zoomerWrap.style.opacity = "0";
overlay.style.pointerEvents = "none";
}
async _buildCroppieInstance({
width,
height,
target,
url,
mouseWheelZoom = true,
disabled = false
}) {
const { boundaryHeight, boundaryWidth } = this.options
var c = new Croppie(target, {
viewport: { width: boundaryWidth, height: boundaryHeight },
boundary: { width: boundaryWidth, height: boundaryHeight },
showZoomer: true,
mouseWheelZoom: mouseWheelZoom,
enableResize: true,
disabled: disabled
});
var options = {
url: url,
zoom: 0,
};
await c.bind(options);
return c;
}
_buildCroppieGalleryToolbar() {
var namespace = this.namespace;
var images = this._slides;
var ctnr = this._root.resize.gallery;
if (ctnr) {
ctnr.container.parentNode.removeChild(ctnr.container);
}
// Append the toolbox gallery html
var html = createFromTemplate(`
<div :obj=gallery>
<div :ref=container>
<div class="${namespace}-gallery-toolbar">
${images.map((img, i) => `<div :arr=item data-seq=${i}>${i}</div>`).join("")}
</div>
</div>
</div>
`);
this._root.resize.gallery = html.gallery;
document
.querySelector(".cr-boundary")
.append(this._root.resize.gallery.container);
// Rebind selected gallery image to main slide
this._on(this._root.resize.gallery.item, "click", (e) => {
var i = e.target.dataset.seq;
var image = this._slides[i];
this._slide.bind(image);
e.target.classList.add("active");
});
}
_emit(event, ...args) {
this._eventListener[event].forEach((cb) => cb(...args, this));
}
on(event, cb) {
// Validate
if (
typeof cb === "function" &&
typeof event === "string" &&
event in this._eventListener
) {
this._eventListener[event].push(cb);
}
return this;
}
}
export default Editor;
// async function getThemeColours(storeId) {
// return fetch("Editor/svc/Services.svc/GetThemeColours?storeId=" + storeId)
// .then((res) => res.json())
// .then((json) => JSON.parse(json).d);
// }
async function getSlideshowImages(storeId) {
if (isDev){
return Promise.resolve()
} else {
return fetch("Editor/svc/Services.svc/GetSlideShowImages?storeId=" + storeId)
.then((res) => res.json())
.then((json) => JSON.parse(json))
.catch(err => log.error("Something went wrong in getSlideshowImages. Reason:", err))
}
// return fetch("Editor/svc/Services.svc/GetSlideShowImages?storeId=" + storeId)
// .then((res) => res.json())
// .then((json) => JSON.parse(json));
}
var s;
const storeId = g_fws_sk;
var str = JSON.stringify;
var prs = JSON.parse;
function handleError(err) {
log.error("Failed to handleResponse. ", err);
}
function handleResponse({ request, response }) {
return new Promise((resolve, reject) => {
const responseHeaders = {};
for (var pair of response.headers.entries()) {
responseHeaders[pair[0]] = pair[1];
}
if (response.status !== 200) {
return Promise.all([
// Try get text
// response.text().then((r) => {
// return Promise.resolve(r);
// })
// .catch(e => {
// return Promise.resolve('Failed to parse TEXT response.' + e)
// }),
// Try get JSON
response.json()
.then(r => {
return Promise.resolve('JSON response: ' + r)
})
.catch(e => {
return Promise.resolve('Failed to parse JSON response.' + e)
})
]).then((res) => {
const msg =
"Failed to make request. Request headers: " +
str(request) +
". Response headers: " +
str(responseHeaders) +
". Response message: " +
res;
reject(msg);
});
} else {
log.debug(
"Success! Request headers: " +
str(request) +
". Response headers: " +
str(responseHeaders)
);
resolve(responseHeaders)
}
});
}
function init(event) {
let mammothBoundaryWidth = 900
if (document.querySelector(".slider-wrapper.theme-default")) {
mammothBoundaryWidth = document.querySelector(".slider-wrapper.theme-default").offsetWidth
}
const configurations = {
"storebuilder/89137/electron": {
storeId: storeId,
slideshowTarget: document.querySelector("#main-content .row"),
flex: document.querySelector("#slider"),
},
"storebuilder/284203/ritz": {
storeId: storeId,
slideshowTarget:document.querySelector(".nivo_container"),
flex: document.querySelector("#slider"),
boundaryHeight: 372,
boundaryWidth: 960
},
"storebuilder/309223/mammoth": {
storeId: storeId,
slideshowTarget: document.querySelector(".slider-wrapper.theme-default"),
flex: document.querySelector("#slider"),
boundaryHeight: 387,
// TODO: use the slider width for mammoth until the slider is responsiv
boundaryWidth: mammothBoundaryWidth
},
};
var allowed = [
"storebuilder/309223/mammoth",
"storebuilder/284203/ritz",
"storebuilder/89137/electron",
];
let template;
if (localStorage && localStorage.getItem("template")) {
template = localStorage.getItem("template");
}
// Only run fow allowed templates
if (allowed.indexOf(template) === -1) {
log.debug("Template [%s] is not in allowed list", template);
return;
}
// Index of designs dont need logging, so they are set as isDev
if (localStorage && localStorage.getItem("isDev")) {
isDev = localStorage.getItem("isDev") === "true"
}
window.log = log = new Logger({
debugEnabled: true,
storeId: g_fws_sk,
isDev: isDev,
uuid: _.uuid(),
});
log.debug(`isDev: [${isDev}], Template: [${template}]`);
if (navigator && navigator.userAgent) {
log.debug("User agent:", navigator.userAgent);
}
Promise.all([getSlideshowImages(storeId)]).then(
function ([images]) {
log.debug("Loaded slides:", images && images.slides && images.slides.length);
const conf = Object.assign(configurations[template], images)
log.debug("Initializing Editor with options:", conf)
window.editor = new Editor(conf);
editor
.on("init", (e) => log.debug("INIT", e))
.on("warn", (e) => log.warn("WARN", e))
.on("error", function (e) {
log.error("EDITOR_ERROR", e);
Swal.fire({
icon: "error",
title: "Oops...",
html: e + "<br><br>" + "[DEBUG_ID] " + log._uuid,
animation: false,
confirmButtonColor: "#f054a7",
});
})
}
).catch(err => {
Swal.fire({
icon: "error",
title: "Oops...",
html: err,
// footer: "<a href>Why do I have this issue?</a>",
animation: false,
confirmButtonColor: "#f054a7",
});
log.error("Failed to run getSlideshowImages. Reason:", err);
});
}
// Initial Editor, attach advanced logging
document.addEventListener("DOMContentLoaded", function () {
init();
});
window.addEventListener('unhandledrejection', function(event) {
const err = "[GLOBAL_ERROR]: " + event.reason
log.error(err);
Swal.fire({
icon: "error",
title: "DEBUG_ID: ["+log._uuid+"]",
html: err,
animation: false,
confirmButtonColor: "#f054a7",
});
event.preventDefault();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment