@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -0,0 +1,83 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { html } from 'lit';
+import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
+import './visual-adjustments';
+var visualAdjustmentOptions = [{
+  id: 'brightness',
+  name: 'Adjust brightness',
+  active: false,
+  min: 0,
+  max: 150,
+  step: 1,
+  value: 100
+}, {
+  id: 'contrast',
+  name: 'Adjust contrast',
+  active: false,
+  min: 0,
+  max: 150,
+  step: 1,
+  value: 100
+}, {
+  id: 'invert',
+  name: 'Invert colors (dark mode)',
+  active: false
+}, {
+  id: 'grayscale',
+  name: 'Convert to grayscale',
+  active: false
+}];
+export default class VisualAdjustmentsProvider {
+  constructor(options) {
+    var {
+      onProviderChange,
+      bookreader
+    } = options;
+    this.onProviderChange = onProviderChange;
+    this.bookContainer = bookreader.refs.$brContainer;
+    this.bookreader = bookreader;
+    this.onAdjustmentChange = this.onAdjustmentChange.bind(this);
+    this.optionUpdateComplete = this.optionUpdateComplete.bind(this);
+    this.updateOptionsCount = this.updateOptionsCount.bind(this);
+    this.onZoomIn = this.onZoomIn.bind(this);
+    this.onZoomOut = this.onZoomOut.bind(this);
+    this.activeCount = 0;
+    this.icon = html(_templateObject || (_templateObject = _taggedTemplateLiteral(["<ia-icon-visual-adjustment style=\"width: var(--iconWidth); height: var(--iconHeight);\"></ia-icon-visual-adjustment>"])));
+    this.label = 'Visual Adjustments';
+    this.menuDetails = this.updateOptionsCount();
+    this.id = 'adjustment';
+    this.component = html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <ia-book-visual-adjustments\n        .options=", "\n        @visualAdjustmentOptionChanged=", "\n        @visualAdjustmentZoomIn=", "\n        @visualAdjustmentZoomOut=", "\n      ></ia-book-visual-adjustments>\n    "])), visualAdjustmentOptions, this.onAdjustmentChange, this.onZoomIn, this.onZoomOut);
+  }
+  onZoomIn() {
+    this.bookreader.zoom(1);
+  }
+  onZoomOut() {
+    this.bookreader.zoom(-1);
+  }
+  onAdjustmentChange(event) {
+    var {
+      detail
+    } = event;
+    var adjustments = {
+      brightness: value => "brightness(".concat(value, "%)"),
+      contrast: value => "contrast(".concat(value, "%)"),
+      grayscale: () => 'grayscale(100%)',
+      invert: () => 'invert(100%)'
+    };
+    var filters = detail.options.reduce((values, option) => {
+      var newValue = "".concat(option.active ? adjustments[option.id](option.value) : '');
+      return newValue ? [...values, newValue] : values;
+    }, []).join(' ');
+    this.bookContainer.css('filter', filters);
+    this.optionUpdateComplete(event);
+  }
+  optionUpdateComplete(event) {
+    this.activeCount = event.detail.activeCount;
+    this.updateOptionsCount(event);
+    this.onProviderChange();
+  }
+  updateOptionsCount() {
+    this.menuDetails = "(".concat(this.activeCount, " active)");
+  }
+}

package/dist/esm/BookNavigator/visual-adjustments/visual-adjustments.js

@@ -0,0 +1,131 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { nothing } from "lit";
+import checkmarkIcon from '../assets/icon_checkmark.js';
+import "@internetarchive/icon-magnify-minus/icon-magnify-minus";
+import "@internetarchive/icon-magnify-plus/icon-magnify-plus";
+var namespacedEvent = eventName => "visualAdjustment".concat(eventName);
+var events = {
+  optionChange: namespacedEvent("OptionChanged"),
+  zoomIn: namespacedEvent("ZoomIn"),
+  zoomOut: namespacedEvent("ZoomOut")
+};
+export class IABookVisualAdjustments extends LitElement {
+  static get properties() {
+    return {
+      activeCount: {
+        type: Number
+      },
+      options: {
+        type: Array
+      },
+      renderHeader: {
+        type: Boolean
+      },
+      showZoomControls: {
+        type: Boolean
+      }
+    };
+  }
+  constructor() {
+    super();
+    this.activeCount = 0;
+    this.options = [];
+    this.renderHeader = false;
+    this.showZoomControls = true;
+  }
+  firstUpdated() {
+    this.activeCount = this.activeOptions.length;
+    this.emitOptionChangedEvent();
+  }
+
+  /** Gets list of active options
+   * @return array
+   */
+  get activeOptions() {
+    return this.options.reduce((results, option) => option.active ? [...results, option.id] : results, []);
+  }
+
+  /**
+   * Returns blob that will be emitted by event
+   */
+  prepareEventDetails() {
+    var changedOptionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+    return {
+      options: this.options,
+      activeCount: this.activeCount,
+      changedOptionId
+    };
+  }
+
+  /**
+   * Fires custom event when options change
+   * Provides state details: { options, activeCount, changedOptionId }
+   *
+   * @param { string } changedOptionId
+   */
+  emitOptionChangedEvent() {
+    var changedOptionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+    var detail = this.prepareEventDetails(changedOptionId);
+    this.dispatchEvent(new CustomEvent(events.optionChange, {
+      bubbles: true,
+      composed: true,
+      detail
+    }));
+  }
+  emitZoomIn() {
+    this.dispatchEvent(new CustomEvent(events.zoomIn));
+  }
+  emitZoomOut() {
+    this.dispatchEvent(new CustomEvent(events.zoomOut));
+  }
+
+  /**
+   * Updates adjustment & component state
+   * updates params of available ajdustment options list
+   * updates active adjustment count
+   * triggers custom event
+   * @param { string } optionName
+   */
+  changeActiveStateFor(optionName) {
+    var updatedOptions = [...this.options];
+    var checkedOption = updatedOptions.find(option => option.id === optionName);
+    checkedOption.active = !checkedOption.active;
+    this.options = updatedOptions;
+    this.activeCount = this.activeOptions.length;
+    this.emitOptionChangedEvent(checkedOption.id);
+  }
+  setRangeValue(id, value) {
+    var updatedOptions = [...this.options];
+    updatedOptions.find(o => o.id === id).value = value;
+    this.options = [...updatedOptions];
+  }
+
+  /* render */
+  rangeSlider(option) {
+    return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <div class=", ">\n        <input\n          type=\"range\"\n          name=\"", "_range\"\n          min=", "\n          max=", "\n          step=", "\n          .value=", "\n          @input=", "\n          @change=", "\n        />\n        <p>", "%</p>\n      </div>\n    "])), "range".concat(option.active ? " visible" : ""), option.id, option.min || 0, option.max || 100, option.step || 1, option.value, e => this.setRangeValue(option.id, e.target.value), () => this.emitOptionChangedEvent(), option.value);
+  }
+  adjustmentCheckbox(option) {
+    var formID = "adjustment_".concat(option.id);
+    return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["<li>\n      <label for=\"", "\">\n        <span class=\"name\">", "</span>\n        <input\n          type=\"checkbox\"\n          name=\"", "\"\n          id=\"", "\"\n          @change=", "\n          ?checked=", "\n        />\n        <span class=\"icon\"></span>\n      </label>\n      ", "\n    </li>"])), formID, option.name, formID, formID, () => this.changeActiveStateFor(option.id), option.active, option.value !== undefined ? this.rangeSlider(option) : nothing);
+  }
+  get headerSection() {
+    var activeAdjustments = this.activeCount ? html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["<p>(", " active)</p>"])), this.activeCount) : nothing;
+    var header = html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["<header>\n      <h3>Visual adjustments</h3>\n      ", "\n    </header>"])), activeAdjustments);
+    return this.renderHeader ? header : nothing;
+  }
+  get zoomControls() {
+    return html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      <h4>Adjust zoom</h4>\n      <button class=\"zoom_out\" @click=", " title=\"zoom out\">\n        <ia-icon-magnify-minus></ia-icon-magnify-minus>\n      </button>\n      <button class=\"zoom_in\" @click=", " title=\"zoom in\">\n        <ia-icon-magnify-plus></ia-icon-magnify-plus>\n      </button>\n    "])), this.emitZoomOut, this.emitZoomIn);
+  }
+
+  /** @inheritdoc */
+  render() {
+    return html(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      ", "\n      <ul>\n        ", "\n      </ul>\n      ", "\n    "])), this.headerSection, repeat(this.options, option => option.id, this.adjustmentCheckbox.bind(this)), this.showZoomControls ? this.zoomControls : nothing);
+  }
+  static get styles() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    :host {\n      display: block;\n      height: 100%;\n      overflow-y: auto;\n      font-size: 1.4rem;\n      box-sizing: border-box;\n    }\n\n    header {\n      display: flex;\n      align-items: baseline;\n    }\n\n    h3 {\n      padding: 0;\n      margin: 0 1rem 0 0;\n      font-size: 1.6rem;\n    }\n\n    header p {\n      padding: 0;\n      margin: 0;\n      font-size: 1.2rem;\n      font-weight: bold;\n      font-style: italic;\n    }\n\n    ul {\n      padding: 1rem 2rem 0 0;\n      list-style: none;\n      margin-top: 0;\n    }\n\n    [type=\"checkbox\"] {\n      display: none;\n    }\n\n    label {\n      display: flex;\n      justify-content: space-between;\n      align-items: baseline;\n      font-size: 1.4rem;\n      font-weight: bold;\n      line-height: 150%;\n      vertical-align: middle;\n    }\n\n    .icon {\n      display: inline-block;\n      width: 14px;\n      height: 14px;\n      margin-left: .7rem;\n      border: 1px solid var(--primaryTextColor);\n      border-radius: 2px;\n      background: var(--activeButtonBg) 50% 50% no-repeat;\n    }\n    :checked + .icon {\n      background-image: url('", "');\n    }\n\n    .range {\n      display: none;\n      padding-top: .5rem;\n    }\n    .range.visible {\n      display: flex;\n    }\n\n    .range p {\n      margin-left: 1rem;\n    }\n\n    h4 {\n      padding: 1rem 0;\n      margin: 0;\n      font-size: 1.4rem;\n    }\n\n    button {\n      -webkit-appearance: none;\n      appearance: none;\n      border: none;\n      border-radius: 0;\n      background: transparent;\n      outline: none;\n      cursor: pointer;\n      --iconFillColor: var(--primaryTextColor);\n      --iconStrokeColor: var(--primaryTextColor);\n      height: 4rem;\n      width: 4rem;\n    }\n\n    button * {\n      display: inline-block;\n    }"])), checkmarkIcon);
+  }
+}
+customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);