Manager

Back Back Up Advanced Editor

{"mappings":"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","sources":["React.js","src/KirkiInputSliderForm.js","src/KirkiInputSliderControl.js","src/control.js"],"sourcesContent":["module.exports=React;","import { useRef } from \"react\";\n\nconst KirkiInputSliderForm = (props) => {\n  const { control, customizerSetting, choices } = props;\n\n  let trigger = \"\";\n\n  const validateValue = (value) => {\n    if (value < choices.min) value = choices.min;\n    if (value > choices.max) value = choices.max;\n\n    return value;\n  };\n\n  const getValueObject = (value) => {\n    value = \"string\" !== typeof value ? value.toString() : value;\n\n    const valueUnit = value.replace(/\\d+/g, \"\");\n    let valueNumber = value.replace(valueUnit, \"\");\n\n    valueNumber = parseFloat(valueNumber.trim());\n    valueNumber = validateValue(valueNumber);\n\n    return {\n      number: valueNumber,\n      unit: valueUnit,\n    };\n  };\n\n  const getValueForInput = (value) => {\n    const valueObject = getValueObject(value);\n    return valueObject.number + valueObject.unit;\n  };\n\n  const getValueForSlider = (value) => {\n    return getValueObject(value).number;\n  };\n\n  control.updateComponentState = (val) => {\n    if (\"slider\" === trigger) {\n      valueRef.current.value = getValueForInput(val);\n    } else if (\"input\" === trigger) {\n      sliderRef.current.value = getValueForSlider(val);\n    } else if (\"reset\" === trigger) {\n      valueRef.current.value = val;\n      sliderRef.current.value = val;\n    }\n  };\n\n  const handleInputChange = (e) => {\n    trigger = \"input\";\n    customizerSetting.set(getValueForInput(e.target.value));\n  };\n\n  const handleSliderChange = (e) => {\n    trigger = \"slider\";\n\n    let value = parseFloat(e.target.value);\n    value = validateValue(value);\n\n    const inputValueObj = getValueObject(valueRef.current.value); // We're going to use the unit.\n    const valueForInput = value + inputValueObj.unit;\n\n    customizerSetting.set(valueForInput);\n  };\n\n  const handleReset = (e) => {\n    if (\"\" !== props.default && \"undefined\" !== typeof props.default) {\n      sliderRef.current.value = props.default;\n      valueRef.current.value = props.default;\n    } else {\n      if (\"\" !== props.value) {\n        sliderRef.current.value = props.value;\n        valueRef.current.value = props.value;\n      } else {\n        sliderRef.current.value = choices.min;\n        valueRef.current.value = \"\";\n      }\n    }\n\n    trigger = \"reset\";\n    customizerSetting.set(sliderRef.current.value);\n  };\n\n  // Preparing for the template.\n  const fieldId = `kirki-control-input-${customizerSetting.id}`;\n  const sliderValue = getValueForSlider(props.value);\n  const inputValue = getValueForInput(props.value);\n\n  const sliderRef = useRef(null);\n  const valueRef = useRef(null);\n\n  return (\n    <div className=\"kirki-control-form\" tabIndex=\"1\">\n      <label className=\"kirki-control-label\" htmlFor={fieldId}>\n        <span className=\"customize-control-title\">{props.label}</span>\n        <span\n          className=\"customize-control-description description\"\n          dangerouslySetInnerHTML={{ __html: props.description }}\n        />\n      </label>\n\n      <div\n        className=\"customize-control-notifications-container\"\n        ref={props.setNotificationContainer}\n      ></div>\n\n      <button\n        type=\"button\"\n        className=\"kirki-control-reset\"\n        onClick={handleReset}\n      >\n        <i className=\"dashicons dashicons-image-rotate\"></i>\n      </button>\n\n      <div className=\"kirki-control-cols\">\n        <div className=\"kirki-control-left-col\">\n          <input\n            ref={sliderRef}\n            type=\"range\"\n            id={fieldId}\n            defaultValue={sliderValue}\n            min={choices.min}\n            max={choices.max}\n            step={choices.step}\n            className=\"kirki-control-input-slider kirki-pro-control-input-slider\"\n            onChange={handleSliderChange}\n          />\n        </div>\n        <div className=\"kirki-control-right-col\">\n          <input\n            ref={valueRef}\n            type=\"text\"\n            defaultValue={inputValue}\n            className=\"kirki-control-input\"\n            onChange={handleInputChange}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default KirkiInputSliderForm;\n","import KirkiInputSliderForm from \"./KirkiInputSliderForm\";\r\n\r\n/**\r\n * KirkiInputSliderControl.\r\n *\r\n * Global objects brought:\r\n * - wp\r\n * - jQuery\r\n * - React\r\n * - ReactDOM\r\n *\r\n * @class\r\n * @augments wp.customize.Control\r\n * @augments wp.customize.Class\r\n */\r\nconst KirkiInputSliderControl = wp.customize.Control.extend({\r\n  /**\r\n   * Initialize.\r\n   *\r\n   * @param {string} id - Control ID.\r\n   * @param {object} params - Control params.\r\n   */\r\n  initialize: function (id, params) {\r\n    const control = this;\r\n\r\n    // Bind functions to this control context for passing as React props.\r\n    control.setNotificationContainer =\r\n      control.setNotificationContainer.bind(control);\r\n\r\n    wp.customize.Control.prototype.initialize.call(control, id, params);\r\n\r\n    // The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.\r\n    function onRemoved(removedControl) {\r\n      if (control === removedControl) {\r\n        control.destroy();\r\n        control.container.remove();\r\n        wp.customize.control.unbind(\"removed\", onRemoved);\r\n      }\r\n    }\r\n\r\n    wp.customize.control.bind(\"removed\", onRemoved);\r\n  },\r\n\r\n  /**\r\n   * Set notification container and render.\r\n   *\r\n   * This is called when the React component is mounted.\r\n   *\r\n   * @param {Element} element - Notification container.\r\n   * @returns {void}\r\n   */\r\n  setNotificationContainer: function setNotificationContainer(element) {\r\n    const control = this;\r\n\r\n    control.notifications.container = jQuery(element);\r\n    control.notifications.render();\r\n  },\r\n\r\n  /**\r\n   * Render the control into the DOM.\r\n   *\r\n   * This is called from the Control#embed() method in the parent class.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  renderContent: function renderContent() {\r\n    const control = this;\r\n\r\n    ReactDOM.render(\r\n      <KirkiInputSliderForm\r\n        {...control.params}\r\n        control={control}\r\n        customizerSetting={control.setting}\r\n        setNotificationContainer={control.setNotificationCotainer}\r\n        value={control.params.value}\r\n      />,\r\n      control.container[0]\r\n    );\r\n\r\n    if (false !== control.params.choices.allowCollapse) {\r\n      control.container.addClass(\"allowCollapse\");\r\n    }\r\n  },\r\n\r\n  /**\r\n   * After control has been first rendered, start re-rendering when setting changes.\r\n   *\r\n   * React is able to be used here instead of the wp.customize.Element abstraction.\r\n   *\r\n   * @returns {void}\r\n   */\r\n  ready: function ready() {\r\n    const control = this;\r\n\r\n    /**\r\n     * Update component value's state when customizer setting's value is changed.\r\n     */\r\n    control.setting.bind((val) => {\r\n      control.updateComponentState(val);\r\n    });\r\n  },\r\n\r\n  /**\r\n   * This method will be overriden by the rendered component.\r\n   */\r\n  updateComponentState: (val) => {},\r\n\r\n  /**\r\n   * Handle removal/de-registration of the control.\r\n   *\r\n   * This is essentially the inverse of the Control#embed() method.\r\n   *\r\n   * @link https://core.trac.wordpress.org/ticket/31334\r\n   * @returns {void}\r\n   */\r\n  destroy: function destroy() {\r\n    const control = this;\r\n\r\n    // Garbage collection: undo mounting that was done in the embed/renderContent method.\r\n    ReactDOM.unmountComponentAtNode(control.container[0]);\r\n\r\n    // Call destroy method in parent if it exists (as of #31334).\r\n    if (wp.customize.Control.prototype.destroy) {\r\n      wp.customize.Control.prototype.destroy.call(control);\r\n    }\r\n  },\r\n});\r\n\r\nexport default KirkiInputSliderControl;\r\n","import \"./control.scss\";\r\nimport KirkiInputSliderControl from './KirkiInputSliderControl';\r\n\r\n\r\n// Register control type with Customizer.\r\nwp.customize.controlConstructor['kirki-input-slider'] = KirkiInputSliderControl;\r\n"],"names":["module","React","$5e62cac5aac90bdd$export$2e2bcd8739ae039","props","control","customizerSetting","choices","trigger","validateValue","value","min","max","getValueObject","valueUnit","toString","replace","valueNumber","parseFloat","trim","number","unit","getValueForInput","valueObject","getValueForSlider","updateComponentState","val","valueRef","current","sliderRef","fieldId","concat","id","sliderValue","inputValue","useRef","createElement","className","tabIndex","htmlFor","label","dangerouslySetInnerHTML","__html","description","ref","setNotificationContainer","type","onClick","e","default","set","defaultValue","step","onChange","target","valueForInput","wp","customize","Control","extend","initialize","params","this","bind","ReactDOM","render","prototype","call","removedControl","destroy","container","remove","onRemoved","element","notifications","unmountComponentAtNode","controlConstructor","KirkiInputSliderControl"],"version":3,"file":"control.js.map"}