aristath/kirki

{"mappings":"eAAAA,EAAeC,UCwEfC,EAtE+BC,IAE9B,MAAAC,QAAQA,EAAFC,kBAAWA,EAAXC,QAA8BA,GAAYH,GAEzCI,EAAcC,GAAmBC,EAAAA,SAASN,EAAMO,OAEvDN,EAAQO,qBAAwBC,IAC/BJ,EAAgBI,IAGjB,MAAMC,EAAgBC,IACrBT,EAAkBU,IAAID,EAAEE,OAAOC,QAW1BC,EAAOZ,EAAQY,KAAO,SAG3BjB,MADDkB,cAAA,MAAA,CACMC,UAAS,qBAAsBC,SAAQ,KAC3CpB,MADDkB,cAAA,QAAA,CACQC,UAAS,uBACfnB,MADDkB,cAAA,OAAA,CACOC,UAAS,2BAA4BjB,EAAMmB,OACjDrB,MADAkB,cAAA,OAAA,CACMC,UAAS,6CAA8CjB,EAAMoB,cAGpEtB,MAHCkB,cAAA,MAAA,CAGIC,UAAS,4CAA6CI,IAAKrB,EAAMsB,2BAEtExB,MAFAkB,cAAA,SAAA,CAEQO,KAAI,SAAUN,UAAS,sBAAuBO,QAnBvC,KAChB,KAAWxB,EAAMyB,cAAb,IAA+CzB,EAAMyB,QACxDvB,EAAkBU,IAAIZ,EAAMyB,SAE5BvB,EAAkBU,IAAIZ,EAAMO,SAgB3BT,MADDkB,cAAA,IAAA,CACIC,UAAS,sCAGbnB,MAHCkB,cAAA,KAAA,CAGGC,UAAS,sBAA0Bd,EAAQuB,MAAhC,WACbvB,EAAQwB,OAAOC,KAAf,CAAoBC,EAAOC,KAC3B,MAAMC,EAAgBF,IAAUzB,EAAV,0BAAA,qBAGrBN,MADDkB,cAAA,KAAA,CAEEgB,IAAKF,EAAMG,WACXhB,UAAWc,EACXG,MAAK,CAEHC,MAAOpB,EAAI,KACXqB,OAAQrB,EAAI,OAIdjB,MAVDkB,cAAA,MAAA,CAWEF,MAAOe,EACPK,MAAK,CAEHG,gBAAiBR,GAGnBL,QAASd,8NCkEjB4B,EAhHiCC,GAAGC,UAAUC,QAAQC,OAArB,CAQhCC,WAAU,SAAYC,EAAIC,GACzB,MAAM5C,EAAO6C,KAGb7C,EAAQqB,yBAA2BrB,EAAQqB,yBAAyByB,KAAK9C,GAEzEsC,GAAGC,UAAUC,QAAQO,UAAUL,WAAWM,KAAKhD,EAAS2C,EAAIC,GAU5DN,GAAGC,UAAUvC,QAAQ8C,KAArB,oBAPSG,EAAUC,GACdlD,IAAYkD,IACflD,EAAQmD,UACRnD,EAAQoD,UAAUC,SAClBf,GAAGC,UAAUvC,QAAQsD,OAArB,UAAuCL,QAc1C5B,yBAAwB,SAAoCkC,GAC9CV,KAELW,cAAcJ,UAAYK,OAAOF,GAF5BV,KAGLW,cAAcE,UAUvBC,cAAa,WACZ,MAAM3D,EAAO6C,KAEbe,SAASF,OACR7D,MAAAkB,cAACjB,EAAD+D,EAAA,GACK7D,EAAQ4C,OADb,CAEC5C,QAASA,EACTC,kBAAmBD,EAAQ8D,QAC3BzC,yBAA0BrB,EAAQ+D,wBAClCzD,MAAON,EAAQ4C,OAAOtC,SAEvBN,EAAQoD,UAAU,KAGf,IAAUpD,EAAQ4C,OAAO1C,QAAQ8D,eACpChE,EAAQoD,UAAUa,SAAlB,kBAWFC,MAAK,WACJ,MAAMlE,EAAO6C,KAKb7C,EAAQ8D,QAAQhB,MAAMtC,IACrBR,EAAQO,qBAAqBC,OAO/BD,qBAAuBC,MAUvB2C,QAAO,WAINS,SAASO,uBAHItB,KAG2BO,UAAU,IAG9Cd,GAAGC,UAAUC,QAAQO,UAAUI,SAClCb,GAAGC,UAAUC,QAAQO,UAAUI,QAAQH,KAP3BH,SC9GfP,GAAGC,UAAU6B,mBAAb,uBAAyDC","sources":["React.js","src/KirkiColorPaletteForm.js","src/KirkiColorPaletteControl.js","src/control.js"],"sourcesContent":["module.exports=React;","import { useState } from \"react\";\n\nconst KirkiColorPaletteForm = (props) => {\n\n\tconst { control, customizerSetting, choices } = props;\n\n\tconst [selectedItem, setSelectedItem] = useState(props.value);\n\n\tcontrol.updateComponentState = (val) => {\n\t\tsetSelectedItem(val);\n\t};\n\n\tconst handleSelect = (e) => {\n\t\tcustomizerSetting.set(e.target.title);\n\t};\n\n\tconst handleReset = () => {\n\t\tif ('' !== props.default && 'undefined' !== typeof props.default) {\n\t\t\tcustomizerSetting.set(props.default);\n\t\t} else {\n\t\t\tcustomizerSetting.set(props.value);\n\t\t}\n\t};\n\n\tconst size = choices.size + 2; // 2 here is 1px border on each side.\n\n\treturn (\n\t\t<div className=\"kirki-control-form\" tabIndex=\"1\">\n\t\t\t<label className=\"kirki-control-label\">\n\t\t\t\t<span className=\"customize-control-title\">{props.label}</span>\n\t\t\t\t<span className=\"customize-control-description description\">{props.description}</span>\n\t\t\t</label>\n\n\t\t\t<div className=\"customize-control-notifications-container\" ref={props.setNotificationContainer}></div>\n\n\t\t\t<button type=\"button\" className=\"kirki-control-reset\" onClick={handleReset}>\n\t\t\t\t<i className=\"dashicons dashicons-image-rotate\"></i>\n\t\t\t</button>\n\n\t\t\t<ul className={\"kirki-colors kirki-\" + choices.shape + \"-colors\"}>\n\t\t\t\t{choices.colors.map((color, index) => {\n\t\t\t\t\tconst itemClassName = color === selectedItem ? \"kirki-color is-selected\" : \"kirki-color\";\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\tclassName={itemClassName}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\twidth: size + 'px',\n\t\t\t\t\t\t\t\t\theight: size + 'px'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\ttitle={color}\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tbackgroundColor: color\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={handleSelect}\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t</div>\n\t);\n\n};\n\nexport default KirkiColorPaletteForm;\n","import KirkiColorPaletteForm from './KirkiColorPaletteForm';\n\n/**\n * KirkiColorPaletteControl.\n *\n * Global objects brought:\n * - wp\n * - jQuery\n * - React\n * - ReactDOM\n *\n * @class\n * @augments wp.customize.Control\n * @augments wp.customize.Class\n */\nconst KirkiColorPaletteControl = wp.customize.Control.extend({\n\n\t/**\n\t * Initialize.\n\t *\n\t * @param {string} id - Control ID.\n\t * @param {object} params - Control params.\n\t */\n\tinitialize: function (id, params) {\n\t\tconst control = this;\n\n\t\t// Bind functions to this control context for passing as React props.\n\t\tcontrol.setNotificationContainer = control.setNotificationContainer.bind(control);\n\n\t\twp.customize.Control.prototype.initialize.call(control, id, params);\n\n\t\t// The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.\n\t\tfunction onRemoved(removedControl) {\n\t\t\tif (control === removedControl) {\n\t\t\t\tcontrol.destroy();\n\t\t\t\tcontrol.container.remove();\n\t\t\t\twp.customize.control.unbind('removed', onRemoved);\n\t\t\t}\n\t\t}\n\t\twp.customize.control.bind('removed', onRemoved);\n\t},\n\n\t/**\n\t * Set notification container and render.\n\t *\n\t * This is called when the React component is mounted.\n\t *\n\t * @param {Element} element - Notification container.\n\t * @returns {void}\n\t */\n\tsetNotificationContainer: function setNotificationContainer(element) {\n\t\tconst control = this;\n\n\t\tcontrol.notifications.container = jQuery(element);\n\t\tcontrol.notifications.render();\n\t},\n\n\t/**\n\t * Render the control into the DOM.\n\t *\n\t * This is called from the Control#embed() method in the parent class.\n\t *\n\t * @returns {void}\n\t */\n\trenderContent: function renderContent() {\n\t\tconst control = this;\n\n\t\tReactDOM.render(\n\t\t\t<KirkiColorPaletteForm\n\t\t\t\t{...control.params}\n\t\t\t\tcontrol={control}\n\t\t\t\tcustomizerSetting={control.setting}\n\t\t\t\tsetNotificationContainer={control.setNotificationCotainer}\n\t\t\t\tvalue={control.params.value}\n\t\t\t/>,\n\t\t\tcontrol.container[0]\n\t\t);\n\n\t\tif (false !== control.params.choices.allowCollapse) {\n\t\t\tcontrol.container.addClass('allowCollapse');\n\t\t}\n\t},\n\n\t/**\n\t * After control has been first rendered, start re-rendering when setting changes.\n\t *\n\t * React is able to be used here instead of the wp.customize.Element abstraction.\n\t *\n\t * @returns {void}\n\t */\n\tready: function ready() {\n\t\tconst control = this;\n\n\t\t/**\n\t\t * Update component value's state when customizer setting's value is changed.\n\t\t */\n\t\tcontrol.setting.bind((val) => {\n\t\t\tcontrol.updateComponentState(val);\n\t\t});\n\t},\n\n\t/**\n\t * This method will be overriden by the rendered component.\n\t */\n\tupdateComponentState: (val) => { },\n\n\t/**\n\t * Handle removal/de-registration of the control.\n\t *\n\t * This is essentially the inverse of the Control#embed() method.\n\t *\n\t * @link https://core.trac.wordpress.org/ticket/31334\n\t * @returns {void}\n\t */\n\tdestroy: function destroy() {\n\t\tconst control = this;\n\n\t\t// Garbage collection: undo mounting that was done in the embed/renderContent method.\n\t\tReactDOM.unmountComponentAtNode(control.container[0]);\n\n\t\t// Call destroy method in parent if it exists (as of #31334).\n\t\tif (wp.customize.Control.prototype.destroy) {\n\t\t\twp.customize.Control.prototype.destroy.call(control);\n\t\t}\n\t}\n});\n\nexport default KirkiColorPaletteControl;\n","import \"./control.scss\";\r\nimport KirkiColorPaletteControl from './KirkiColorPaletteControl';\r\n\r\n\r\n// Register control type with Customizer.\r\nwp.customize.controlConstructor['kirki-color-palette'] = KirkiColorPaletteControl;\r\n"],"names":["module","React","$a4fde36c605247d9$export$9099ad97b570f7c","props","control","customizerSetting","choices","selectedItem","setSelectedItem","useState","value","updateComponentState","val","handleSelect","e","set","target","title","size","createElement","className","tabIndex","label","description","ref","setNotificationContainer","type","onClick","default","shape","colors","map","color","index","itemClassName","key","toString","style","width","height","backgroundColor","$53fc0e11413abf5d$export$9099ad97b570f7c","wp","customize","Control","extend","initialize","id","params","this","bind","prototype","call","onRemoved","removedControl","destroy","container","remove","unbind","element","notifications","jQuery","render","renderContent","ReactDOM","$53fc0e11413abf5d$var$_extends","setting","setNotificationCotainer","allowCollapse","addClass","ready","unmountComponentAtNode","controlConstructor","KirkiColorPaletteControl"],"version":3,"file":"control.js.map"}