Quellcode-Bibliothek DeviceModal.js Sprache: JAVA

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* eslint-env browser */

"use strict";

const {
  createFactory,
  PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");

const DeviceForm = createFactory(
  require("resource://devtools/client/responsive/components/DeviceForm.js")
);
const DeviceList = createFactory(
  require("resource://devtools/client/responsive/components/DeviceList.js")
);

const {
  getFormatStr,
  getStr,
} = require("resource://devtools/client/responsive/utils/l10n.js");
const {
  getDeviceString,
} = require("resource://devtools/client/shared/devices.js");
const Types = require("resource://devtools/client/responsive/types.js");

class DeviceModal extends PureComponent {
  static get propTypes() {
    return {
      deviceAdderViewportTemplate: PropTypes.shape(Types.viewport).isRequired,
      devices: PropTypes.shape(Types.devices).isRequired,
      onAddCustomDevice: PropTypes.func.isRequired,
      onDeviceListUpdate: PropTypes.func.isRequired,
      onEditCustomDevice: PropTypes.func.isRequired,
      onRemoveCustomDevice: PropTypes.func.isRequired,
      onUpdateDeviceDisplayed: PropTypes.func.isRequired,
      onUpdateDeviceModal: PropTypes.func.isRequired,
    };
  }

  constructor(props) {
    super(props);

    this.state = {
      // The device form type can be 3 states: "add", "edit", or "".
      // "add"  - The form shown is adding a new device.
      // "edit" - The form shown is editing an existing custom device.
      // ""     - The form is closed.
      deviceFormType: "",
      // The device being edited from the edit form.
      editingDevice: null,
    };
    for (const type of this.props.devices.types) {
      for (const device of this.props.devices[type]) {
        this.state[device.name] = device.displayed;
      }
    }

    this.onAddCustomDevice = this.onAddCustomDevice.bind(this);
    this.onDeviceCheckboxChange = this.onDeviceCheckboxChange.bind(this);
    this.onDeviceFormShow = this.onDeviceFormShow.bind(this);
    this.onDeviceFormHide = this.onDeviceFormHide.bind(this);
    this.onDeviceModalSubmit = this.onDeviceModalSubmit.bind(this);
    this.onEditCustomDevice = this.onEditCustomDevice.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
  }

  componentDidMount() {
    window.addEventListener("keydown", this.onKeyDown, true);
  }

  componentWillUnmount() {
    this.onDeviceModalSubmit();
    window.removeEventListener("keydown", this.onKeyDown, true);
  }

  onAddCustomDevice(device) {
    this.props.onAddCustomDevice(device);
    // Default custom devices to enabled
    this.setState({
      [device.name]: true,
    });
  }

  onDeviceCheckboxChange({ nativeEvent: { button }, target }) {
    if (button !== 0) {
      return;
    }
    this.setState({
      [target.value]: !this.state[target.value],
    });
  }

  onDeviceFormShow(type, device) {
    this.setState({
      deviceFormType: type,
      editingDevice: device,
    });
  }

  onDeviceFormHide() {
    this.setState({
      deviceFormType: "",
      editingDevice: null,
    });
  }

  onDeviceModalSubmit() {
    const { devices, onDeviceListUpdate, onUpdateDeviceDisplayed } = this.props;

    const preferredDevices = {
      added: new Set(),
      removed: new Set(),
    };

    for (const type of devices.types) {
      for (const device of devices[type]) {
        const newState = this.state[device.name];

        if (device.featured && !newState) {
          preferredDevices.removed.add(device.name);
        } else if (!device.featured && newState) {
          preferredDevices.added.add(device.name);
        }

        if (this.state[device.name] != device.displayed) {
          onUpdateDeviceDisplayed(device, type, this.state[device.name]);
        }
      }
    }

    onDeviceListUpdate(preferredDevices);
  }

  onEditCustomDevice(newDevice) {
    this.props.onEditCustomDevice(this.state.editingDevice, newDevice);

    // We want to remove the original device name from state after editing, so create a
    // new state setting the old key to null and the new one to true.
    this.setState({
      [this.state.editingDevice.name]: null,
      [newDevice.name]: true,
    });
  }

  onKeyDown(event) {
    if (!this.props.devices.isModalOpen) {
      return;
    }
    // Escape keycode
    if (event.keyCode === 27) {
      const { onUpdateDeviceModal } = this.props;
      onUpdateDeviceModal(false);
    }
  }

  renderAddForm() {
    // If a device is currently selected, fold its attributes into a single object for use
    // as the starting values of the form.  If no device is selected, use the values for
    // the current window.
    const { deviceAdderViewportTemplate: viewportTemplate } = this.props;
    const deviceTemplate = this.props.deviceAdderViewportTemplate;
    if (viewportTemplate.device) {
      const device = this.props.devices[viewportTemplate.deviceType].find(d => {
        return d.name == viewportTemplate.device;
      });
      Object.assign(deviceTemplate, {
        pixelRatio: device.pixelRatio,
        userAgent: device.userAgent,
        touch: device.touch,
        name: getFormatStr("responsive.customDeviceNameFromBase", device.name),
      });
    } else {
      Object.assign(deviceTemplate, {
        pixelRatio: window.devicePixelRatio,
        userAgent: navigator.userAgent,
        touch: false,
        name: getStr("responsive.customDeviceName"),
      });
    }

    return DeviceForm({
      formType: "add",
      device: deviceTemplate,
      devices: this.props.devices,
      onDeviceFormHide: this.onDeviceFormHide,
      onSave: this.onAddCustomDevice,
      viewportTemplate,
    });
  }

  renderDevices() {
    const sortedDevices = {};
    for (const type of this.props.devices.types) {
      sortedDevices[type] = this.props.devices[type].sort((a, b) =>
        a.name.localeCompare(b.name)
      );

      sortedDevices[type].forEach(device => {
        device.isChecked = this.state[device.name];
      });
    }

    return this.props.devices.types.map(type => {
      return sortedDevices[type].length
        ? dom.div(
            {
              className: `device-type device-type-${type}`,
              key: type,
            },
            dom.header({ className: "device-header" }, getDeviceString(type)),
            DeviceList({
              devices: sortedDevices,
              isDeviceFormShown: this.state.deviceFormType,
              type,
              onDeviceCheckboxChange: this.onDeviceCheckboxChange,
              onDeviceFormHide: this.onDeviceFormHide,
              onDeviceFormShow: this.onDeviceFormShow,
              onEditCustomDevice: this.onEditCustomDevice,
              onRemoveCustomDevice: this.props.onRemoveCustomDevice,
            })
          )
        : null;
    });
  }

  renderEditForm() {
    return DeviceForm({
      formType: "edit",
      device: this.state.editingDevice,
      devices: this.props.devices,
      onDeviceFormHide: this.onDeviceFormHide,
      onSave: this.onEditCustomDevice,
      viewportTemplate: {
        width: this.state.editingDevice.width,
        height: this.state.editingDevice.height,
      },
    });
  }

  renderForm() {
    let form = null;

    if (this.state.deviceFormType === "add") {
      form = this.renderAddForm();
    } else if (this.state.deviceFormType === "edit") {
      form = this.renderEditForm();
    }

    return form;
  }

  render() {
    const { onUpdateDeviceModal } = this.props;
    const isDeviceFormShown = this.state.deviceFormType;

    return dom.div(
      {
        id: "device-modal-wrapper",
        className: this.props.devices.isModalOpen ? "opened" : "closed",
      },
      dom.div(
        { className: "device-modal" },
        dom.div(
          { className: "device-modal-header" },
          !isDeviceFormShown
            ? dom.header(
                { className: "device-modal-title" },
                getStr("responsive.deviceSettings"),
                dom.button({
                  id: "device-close-button",
                  className: "devtools-button",
                  onClick: () => onUpdateDeviceModal(false),
                })
              )
            : null,
          !isDeviceFormShown
            ? dom.button(
                {
                  id: "device-add-button",
                  onClick: () => this.onDeviceFormShow("add"),
                },
                getStr("responsive.addDevice2")
              )
            : null,
          this.renderForm()
        ),
        dom.div({ className: "device-modal-content" }, this.renderDevices())
      ),
      dom.div({
        className: "modal-overlay",
        onClick: () => onUpdateDeviceModal(false),
      })
    );
  }
}

module.exports = DeviceModal;

quality94%

¤ Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.0.2Bemerkung: (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung ist noch experimentell.