@internetarchive/bookreader 5.0.0-88-alpha.11 → 5.0.0-89

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

@@ -1,83 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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);