var CtxEdit = (function(){ function getLocalObject(key) { let s = sessionStorage.getItem(key) if (s) { try { return JSON.parse(s) } catch (e) { console.error( `failed to parse sessionStorage value "${s}" for key ${key}`, err.stack || String(err) ) } } return null } function setLocalObject(key, value) { let json = JSON.stringify(value) sessionStorage.setItem(key, json) } function rmLocalObject(key) { sessionStorage.removeItem(key) } class FloatProp { constructor(cssProp, unitSuffix) { this.cssProp = cssProp this.unitSuffix = unitSuffix } valueInStyle(s) { let v = s[this.cssProp] return v !== undefined ? parseFloat(v) : v } applyStyle(el, value) { el.style[this.cssProp] = value + this.unitSuffix } } class FontStyleProp { valueInStyle(s) { let italic = s['font-style'] == 'italic' || s['font-style'].indexOf('oblique') != -1 let weight = parseFloat(s['font-weight']) if (isNaN(weight)) { weight = s['font-weight'] if (weight == 'thin') { return italic ? 'thin-italic' : 'thin' } if (weight == 'extra-light') {return italic ? 'extra-light-italic' :'extra-light' } if (weight == 'light') { return italic ? 'light-italic' : 'light' } if (weight == 'normal') { return italic ? 'italic' : 'regular' } if (weight == 'medium') { return italic ? 'medium-italic' : 'medium' } if (weight == 'semi-bold') { return italic ? 'semi-bold-italic' : 'semi-bold' } if (weight == 'bold') { return italic ? 'bold-italic' : 'bold' } if (weight == 'extra-bold') { return italic ? 'extra-bold-italic' : 'extra-bold' } } else { if (weight <= 150) { return italic ? 'thin-italic' : 'thin' } if (weight <= 250) { return italic ? 'extra-light-italic' :'extra-light' } if (weight <= 350) { return italic ? 'light-italic' : 'light' } if (weight <= 450) { return italic ? 'italic' : 'regular' } if (weight <= 550) { return italic ? 'medium-italic' : 'medium' } if (weight <= 650) { return italic ? 'semi-bold-italic' : 'semi-bold' } if (weight <= 750) { return italic ? 'bold-italic' : 'bold' } if (weight <= 850) { return italic ? 'extra-bold-italic' : 'extra-bold' } } return italic ? 'black-italic' : 'black' } applyStyle(el, value) { let cl = el.classList for (let k of Array.from(cl.values())) { if (k.indexOf('font-style-') == 0) { cl.remove(k) } } cl.add('font-style-' + value) } } class LineHeightProp { valueInStyle(s) { let v = s['line-height'] if (v === undefined) { return 1.0 } if (v.lastIndexOf('px') == v.length - 2) { // compute return parseFloat( (parseFloat(v) / parseFloat(s['font-size'])).toFixed(3) ) } v = parseFloat(v) return isNaN(v) ? 1.0 : v } applyStyle(el, value) { el.style['line-height'] = String(value) } } class TrackingProp { valueInStyle(s) { let v = s['letter-spacing'] if (v === undefined) { return 0 } if (v.lastIndexOf('px') == v.length - 2) { // compute return parseFloat( (parseFloat(v) / parseFloat(s['font-size'])).toFixed(3) ) } v = parseFloat(v) return isNaN(v) ? 0 : v } applyStyle(el, value) { el.style['letter-spacing'] = value.toFixed(3) + 'em' } } const Props = { size: new FloatProp('font-size', 'px'), tracking: new TrackingProp(), lineHeight: new LineHeightProp(), style: new FontStyleProp(), } function valuesFromStyle(s) { let values = {} for (let name in Props) { let p = Props[name] values[name] = p.valueInStyle(s) } return values } class Editable { constructor(el, key) { this.el = el this.key = key this.defaultValues = valuesFromStyle(getComputedStyle(this.el)) // console.log('default values:', this.defaultValues) this.values = Object.assign({}, this.defaultValues) this.explicitTracking = false this.explicitTrackingKey = this.key + ":etracking" this.loadValues() this.updateSizeDependantProps() } resetValues() { this.values = Object.assign({}, this.defaultValues) let style = this.el.style for (let name in this.values) { Props[name].applyStyle(this.el, this.values[name]) } rmLocalObject(this.key) rmLocalObject(this.explicitTrackingKey) this.explicitTracking = false this.updateSizeDependantProps() } setExplicitTracking(explicitTracking) { if (this.explicitTracking !== explicitTracking) { this.explicitTracking = explicitTracking if (!this.explicitTracking) { this.updateSizeDependantProps() } } } setValue(name, value) { this.values[name] = value Props[name].applyStyle(this.el, value) if (name == 'size') { this.updateSizeDependantProps() } } updateSizeDependantProps() { let size = this.values.size // dynamic tracking if (!this.explicitTracking) { this.setValue('tracking', InterDynamicTracking(size)) } // left indent // TODO: Consider making this part of dynamic metrics. let leftMargin = size / -16 if (leftMargin == 0) { this.el.style.marginLeft = null } else { this.el.style.marginLeft = leftMargin.toFixed(1) + 'px' } } loadValues() { let values = getLocalObject(this.key) if (values && typeof values == 'object') { for (let name in values) { if (name in this.values) { let value = values[name] this.values[name] = value Props[name].applyStyle(this.el, value) } else if (console.warn) { console.warn(`Editable.loadValues ignoring unknown "${name}"`) } } // console.log(`loaded values for ${this}:`, values) } let etr = getLocalObject(this.explicitTrackingKey) this.explicitTracking = false if (etr) { this.explicitTracking = true } } isDefaultValues() { for (let k in this.values) { if (this.values[k] !== this.defaultValues[k]) { return false } } return true } saveValues() { if (this.isDefaultValues()) { rmLocalObject(this.key) rmLocalObject(this.explicitTrackingKey) } else { setLocalObject(this.key, this.values) setLocalObject(this.explicitTrackingKey, this.explicitTracking ? "1" : "0") } // console.log(`saved values for ${this}`) } toString() { return `Editable(${this.key})` } } var supportsFocusTrick = (u => u.indexOf('Firefox/') == -1 )(navigator.userAgent) class CtxEdit { constructor() { this.bindings = new Bindings() this.keyPrefix = 'ctxedit:' + document.location.pathname + ':' this.editables = new Map() this.ui = $('#ctxedit-ui') this.currEditable = null this._saveValuesTimer = null this.isChangingBindings = true this.bindings = new Bindings() this.initBindings() this.initUI() this.addAllEditables() this.isChangingBindings = false this.preloadFonts() if (supportsFocusTrick) { this.ui.addEventListener('focus', ev => { if (this.currEditable) { ev.preventDefault() ev.stopImmediatePropagation() this.currEditable.el.focus() // breaks Firefox } }, {capture:true, passive:false}) } } initUI() { $('.reset-button', this.ui).addEventListener('click', ev => this.reset()) $('.dismiss-button', this.ui).addEventListener('click', ev => this.stopEditing()) this.initRangeSliders() } initRangeSliders() { this._sliderTimers = new Map() $$('input[type="range"]', this.ui).forEach(input => { var binding = this.bindings.getBinding(input.dataset.binding) // create and hook up value tip let valtip = document.createElement('div') let valtipval = document.createElement('div') let valtipcallout = document.createElement('div') valtip.className = 'slider-value-tip' valtipval.className = 'value' valtipcallout.className = 'callout' valtipval.innerText = '0' valtip.appendChild(valtipval) valtip.appendChild(valtipcallout) binding.addOutput(valtipval) document.body.appendChild(valtip) let inputBounds = {} let min = parseFloat(input.getAttribute('min')) let max = parseFloat(input.getAttribute('max')) if (isNaN(min)) { min = 0 } if (isNaN(max)) { max = 1 } const sliderThumbWidth = 12 const valtipYOffset = 14 let updateValTipXPos = () => { let r = (binding.value - min) / (max - min) let sliderWidth = inputBounds.width - sliderThumbWidth let x = ((inputBounds.x + (sliderThumbWidth / 2)) + (sliderWidth * r)) - (valtip.clientWidth / 2) valtip.style.left = x + 'px' } binding.addListener(updateValTipXPos) let shownCounter = 0 let showValTip = () => { if (++shownCounter == 1) { valtip.classList.add('visible') inputBounds = input.getBoundingClientRect() valtip.style.top = (inputBounds.y - valtip.clientHeight + valtipYOffset) + 'px' updateValTipXPos() } } let hideValTip = () => { if (--shownCounter == 0) { valtip.classList.remove('visible') } } input.addEventListener('pointerdown', showValTip) input.addEventListener('pointerup', hideValTip) input.addEventListener('pointercancel', hideValTip) let timer = null input.addEventListener('input', ev => { if (timer === null) { showValTip() } else { clearTimeout(timer) } timer = setTimeout(() => { timer = null hideValTip() }, 400) }) }) } initBindings() { let b = this.bindings // let updateTracking = fontSize => { // if (!this.currEditable.explicitTracking) { // var tracking = InterDynamicTracking(fontSize) // this.isChangingBindings = true // b.setValue('tracking', tracking) // this.isChangingBindings = false // } // } b.configure('tracking', 0, 'float', tracking => { if (!this.isChangingBindings && !this.currEditable.explicitTracking) { // console.log('enabled explicit tracking') this.currEditable.setExplicitTracking(true) this.setNeedsSaveValues() } }) b.setFormatter('tracking', v => v.toFixed(3)) b.configure('size', 0, 'float', size => { let ed = this.currEditable if (ed) { setTimeout(() => { // HERE BE DRAGONS! Feedback loop from Editable if (!ed.explicitTracking) { this.isChangingBindings = true b.setValue('tracking', ed.values.tracking) this.isChangingBindings = false } }, 10) } }) b.configure('lineHeight', 1, 'float') b.bindAllInputs($$('.control input', this.ui)) b.bindAllInputs($$('.control select', this.ui)) $('.control input[data-binding="tracking"]').addEventListener("dblclick", ev => { let ed = this.currEditable setTimeout(() => { ed.setExplicitTracking(false) this.setNeedsSaveValues() this.isChangingBindings = true b.setValue('tracking', ed.values.tracking) this.isChangingBindings = false }, 50) }) for (let binding of b.allBindings()) { binding.addListener(() => this.bindingChanged(binding)) } } preloadFonts() { // Note: This has no effect on systems supporting variable fonts. [ "regular", "italic", "medium", "medium-italic", "semi-bold", "semi-bold-italic", "bold", "bold-italic", "extra-bold", "extra-bold-italic", "black", "black-italic", ].forEach(style => { let e = document.createElement('div') e.className = 'font-preload font-style-' + style e.innerText = 'a' document.body.appendChild(e) }) } bindingChanged(binding) { if (this.isChangingBindings) { // Note: this.isChangingBindings is true when binding values are // changed internally, in which case we do nothing here. return } if (this.currEditable) { this.currEditable.setValue(binding.name, binding.value) } this.setNeedsSaveValues() } reset() { for (let ed of this.editables.values()) { ed.resetValues() } this.updateBindingValues() } updateBindingValues() { if (this.currEditable) { this.isChangingBindings = true this.bindings.setValues(this.currEditable.values) this.isChangingBindings = false } } saveValues() { if (this._saveValuesTimer !== null) { clearTimeout(this._saveValuesTimer) this._saveValuesTimer = null } if (this.currEditable) { this.currEditable.saveValues() } } setNeedsSaveValues() { if (this._saveValuesTimer !== null) { clearTimeout(this._saveValuesTimer) } this._saveValuesTimer = setTimeout(() => this.saveValues(), 300) } setCurrEditable(ed) { if (this._saveValuesTimer !== null && this.currEditable && !this.isChangingBindings) { this.saveValues() } this.currEditable = ed this.updateBindingValues() if (this.currEditable) { this.showUI() } else { this.hideUI() } } onEditableReceivedFocus(ed) { // console.log(`onEditableReceivedFocus ${ed}`) clearTimeout(this._deselectTimer) this.setCurrEditable(ed) } onEditableLostFocus(ed) { // console.log(`onEditableLostFocus ${ed}`) // this.setCurrEditable(null) if (supportsFocusTrick) { this._deselectTimer = setTimeout(() => this.setCurrEditable(null), 10) } } showUI() { this.ui.classList.add('visible') } hideUI() { this.ui.classList.remove('visible') } stopEditing() { if (this.currEditable) { this.currEditable.el.blur() this.setCurrEditable(null) } } addAllEditables() { for (let el of $$('[data-ctxedit]')) { this.addEditable(el) } } addEditable(el) { let key = this.keyPrefix + el.dataset.ctxedit let existing = this.editables.get(key) if (existing) { throw new Error(`duplicate editable ${key}`) } let ed = new Editable(el, key) this.editables.set(key, ed) this.initEditable(ed) // this.showUI() // XXX } initEditable(ed) { // filter paste ed.el.addEventListener('paste', ev => { ev.preventDefault() let text = ev.clipboardData.getData("text/plain") document.execCommand("insertHTML", false, text) }, {capture:true,passive:false}) ed.el.addEventListener('focus', ev => this.onEditableReceivedFocus(ed)) ed.el.addEventListener('blur', ev => this.onEditableLostFocus(ed)) } } return CtxEdit })();