Countdown.scriptable

{
  "always_run_in_app" : false,
  "icon" : {
    "color" : "teal",
    "glyph" : "user-clock"
  },
  "name" : "Countdown",
  "script" : "\/**\n * @version 1.2.0\n * @author Honye\n *\/\n\n\/\/ Variables used by Scriptable.\n\/\/ These must be at the very top of the file. Do not edit.\n\/\/ icon-color: deep-brown; icon-glyph: magic;\n\/**\n * @file API 链式调用无变量命名烦恼\n * @version 1.0.0\n * @author Honye\n *\/\n\n\/**\n * @example\n * ```\n * proxy.call(this)\n * ```\n *\/\nfunction proxy () {\n  this.ListWidget = new Proxy(ListWidget, {\n    construct (Target, args) {\n      const widget = new Target(...args);\n\n      \/**\n       * @template {extends Record<string, any>} T\n       * @param {T} target\n       * @param {string[]} props\n       *\/\n      const makeSetter = (target, props) => {\n        const properties = props.reduce((res, item) => {\n          res[`set${item[0].toUpperCase()}${item.substring(1)}`] = {\n            value (value) {\n              this[item] = value;\n              return this\n            }\n          };\n          return res\n        }, {});\n        Object.defineProperties(target, properties);\n        Object.defineProperties(target, {\n          next: {\n            value (callback) {\n              const context = this;\n              callback(context);\n              return this\n            }\n          }\n        });\n      };\n\n      \/**\n       * 使无返回的函数返回 this 以支持链式调用\n       * @param {string[]} props 函数名列表\n       *\/\n      const proxyFn = (target, props) => {\n        for (const name of props) {\n          target[name] = new Proxy(target[name], {\n            apply (target, self, args) {\n              target.apply(self, args);\n              return self\n            }\n          });\n        }\n      };\n\n      makeSetter(widget, [\n        'backgroundColor',\n        'backgroundImage',\n        'backgroundGradient',\n        'spacing',\n        'url',\n        'refreshAfterDate'\n      ]);\n      proxyFn(widget, [\n        'setPadding',\n        'useDefaultPadding'\n      ]);\n\n      const addDateHandler = {\n        apply (target, self, args) {\n          const result = target.apply(self, args);\n          makeSetter(result, [\n            'date',\n            'textColor',\n            'font',\n            'textOpacity',\n            'lineLimit',\n            'minimumScaleFactor',\n            'shadowColor',\n            'shadowRadius',\n            'shadowOffset',\n            'url'\n          ]);\n          proxyFn(result, [\n            'leftAlignText',\n            'centerAlignText',\n            'rightAlignText',\n            'applyTimeStyle',\n            'applyDateStyle',\n            'applyRelativeStyle',\n            'applyOffsetStyle',\n            'applyTimerStyle'\n          ]);\n          return result\n        }\n      };\n      \/** @type {ProxyHandler<Function>} *\/\n      const addImageHandler = {\n        apply (target, self, args) {\n          const result = target.apply(self, args);\n          makeSetter(result, [\n            'image',\n            'resizable',\n            'imageSize',\n            'imageOpacity',\n            'cornerRadius',\n            'borderWidth',\n            'borderColor',\n            'containerRelativeShape',\n            'tintColor',\n            'url'\n          ]);\n          proxyFn(result, [\n            'leftAlignImage',\n            'centerAlignImage',\n            'rightAlignImage',\n            'applyFittingContentMode',\n            'applyFillingContentMode'\n          ]);\n          return result\n        }\n      };\n      const addTextHandler = {\n        apply (target, self, args) {\n          const result = target.apply(self, args);\n          makeSetter(result, [\n            'text',\n            'textColor',\n            'font',\n            'textOpacity',\n            'lineLimit',\n            'minimumScaleFactor',\n            'shadowColor',\n            'shadowRadius',\n            'shadowOffset',\n            'url'\n          ]);\n          proxyFn(result, [\n            'leftAlignText',\n            'centerAlignText',\n            'rightAlignText'\n          ]);\n          return result\n        }\n      };\n      const addStackHandler = {\n        apply (target, self, args) {\n          const stack = target.apply(self, args);\n          makeSetter(stack, [\n            'backgroundColor',\n            'backgroundImage',\n            'backgroundGradient',\n            'spacing',\n            'size',\n            'cornerRadius',\n            'borderWidth',\n            'borderColor',\n            'url'\n          ]);\n          proxyFn(stack, [\n            'setPadding',\n            'useDefaultPadding',\n            'topAlignContent',\n            'centerAlignContent',\n            'bottomAlignContent',\n            'layoutHorizontally',\n            'layoutVertically'\n          ]);\n          stack.addDate = new Proxy(stack.addDate, addDateHandler);\n          stack.addImage = new Proxy(stack.addImage, addImageHandler);\n          stack.addStack = new Proxy(stack.addStack, addStackHandler);\n          stack.addText = new Proxy(stack.addText, addTextHandler);\n          return stack\n        }\n      };\n\n      widget.addDate = new Proxy(widget.addDate, addDateHandler);\n      widget.addImage = new Proxy(widget.addImage, addImageHandler);\n      widget.addStack = new Proxy(widget.addStack, addStackHandler);\n      widget.addText = new Proxy(widget.addText, addTextHandler);\n      return widget\n    }\n  });\n  return this\n}\n\n\/**\n * @param {object} options\n * @param {string} [options.title]\n * @param {string} [options.message]\n * @param {Array<{ title: string; [key: string]: any }>} options.options\n * @param {boolean} [options.showCancel = true]\n * @param {string} [options.cancelText = 'Cancel']\n *\/\nconst presentSheet = async (options) => {\n  options = {\n    showCancel: true,\n    cancelText: 'Cancel',\n    ...options\n  };\n  const alert = new Alert();\n  if (options.title) {\n    alert.title = options.title;\n  }\n  if (options.message) {\n    alert.message = options.message;\n  }\n  if (!options.options) {\n    throw new Error('The \"options\" property of the parameter cannot be empty')\n  }\n  for (const option of options.options) {\n    alert.addAction(option.title);\n  }\n  if (options.showCancel) {\n    alert.addCancelAction(options.cancelText);\n  }\n  const value = await alert.presentSheet();\n  return {\n    value,\n    option: options.options[value]\n  }\n};\n\n\/**\n * 多语言国际化\n * @param {{[language: string]: string} | [en:string, zh:string]} langs\n *\/\nconst i18n = (langs) => {\n  const language = Device.language();\n  if (Array.isArray(langs)) {\n    langs = {\n      en: langs[0],\n      zh: langs[1],\n      others: langs[0]\n    };\n  } else {\n    langs.others = langs.others || langs.en;\n  }\n  return langs[language] || langs.others\n};\n\n\/**\n * @param {...string} paths\n *\/\nconst joinPath = (...paths) => {\n  const fm = FileManager.local();\n  return paths.reduce((prev, curr) => {\n    return fm.joinPath(prev, curr)\n  }, '')\n};\n\n\/**\n * 规范使用 FileManager。每个脚本使用独立文件夹\n *\n * 注意：桌面组件无法写入 cacheDirectory 和 temporaryDirectory\n * @param {object} options\n * @param {boolean} [options.useICloud]\n * @param {string} [options.basePath]\n *\/\nconst useFileManager = (options = {}) => {\n  const { useICloud, basePath } = options;\n  const fm = useICloud ? FileManager.iCloud() : FileManager.local();\n  const paths = [fm.documentsDirectory(), Script.name()];\n  if (basePath) {\n    paths.push(basePath);\n  }\n  const cacheDirectory = joinPath(...paths);\n  \/**\n   * 删除路径末尾所有的 \/\n   * @param {string} filePath\n   *\/\n  const safePath = (filePath) => {\n    return fm.joinPath(cacheDirectory, filePath).replace(\/\\\/+$\/, '')\n  };\n  \/**\n   * 如果上级文件夹不存在，则先创建文件夹\n   * @param {string} filePath\n   *\/\n  const preWrite = (filePath) => {\n    const i = filePath.lastIndexOf('\/');\n    const directory = filePath.substring(0, i);\n    if (!fm.fileExists(directory)) {\n      fm.createDirectory(directory, true);\n    }\n  };\n\n  const writeString = (filePath, content) => {\n    const nextPath = safePath(filePath);\n    preWrite(nextPath);\n    fm.writeString(nextPath, content);\n  };\n\n  \/**\n   * @param {string} filePath\n   * @param {*} jsonData\n   *\/\n  const writeJSON = (filePath, jsonData) => writeString(filePath, JSON.stringify(jsonData));\n  \/**\n   * @param {string} filePath\n   * @param {Image} image\n   *\/\n  const writeImage = (filePath, image) => {\n    const nextPath = safePath(filePath);\n    preWrite(nextPath);\n    return fm.writeImage(nextPath, image)\n  };\n\n  \/**\n   * 文件不存在时返回 null\n   * @param {string} filePath\n   * @returns {string|null}\n   *\/\n  const readString = (filePath) => {\n    const fullPath = fm.joinPath(cacheDirectory, filePath);\n    if (fm.fileExists(fullPath)) {\n      return fm.readString(\n        fm.joinPath(cacheDirectory, filePath)\n      )\n    }\n    return null\n  };\n\n  \/**\n   * @param {string} filePath\n   *\/\n  const readJSON = (filePath) => JSON.parse(readString(filePath));\n\n  \/**\n   * @param {string} filePath\n   *\/\n  const readImage = (filePath) => {\n    return fm.readImage(fm.joinPath(cacheDirectory, filePath))\n  };\n\n  return {\n    cacheDirectory,\n    writeString,\n    writeJSON,\n    writeImage,\n    readString,\n    readJSON,\n    readImage\n  }\n};\n\n\/** 规范使用文件缓存。每个脚本使用独立文件夹 *\/\nconst useCache = () => useFileManager({ basePath: 'cache' });\n\n\/**\n * 轻松实现桌面组件可视化配置\n *\n * - 颜色选择器及更多表单控件\n * - 快速预览\n *\n * GitHub: https:\/\/github.com\/honye\n *\n * @version 1.2.2\n * @author Honye\n *\/\n\n\/**\n * @returns {Promise<Settings>}\n *\/\nconst readSettings = async () => {\n  const localFM = useFileManager();\n  let settings = localFM.readJSON('settings.json');\n  if (settings) {\n    console.log('[info] use local settings');\n    return settings\n  }\n\n  const iCloudFM = useFileManager({ useICloud: true });\n  settings = iCloudFM.readJSON('settings.json');\n  if (settings) {\n    console.log('[info] use iCloud settings');\n  }\n  return settings\n};\n\n\/**\n * @param {Record<string, unknown>} data\n * @param {{ useICloud: boolean; }} options\n *\/\nconst writeSettings = async (data, { useICloud }) => {\n  const fm = useFileManager({ useICloud });\n  fm.writeJSON('settings.json', data);\n};\n\nconst removeSettings = async (settings) => {\n  const cache = useFileManager({ useICloud: settings.useICloud });\n  FileManager.local().remove(\n    FileManager.local().joinPath(\n      cache.cacheDirectory,\n      'settings.json'\n    )\n  );\n};\n\nconst moveSettings = (useICloud, data) => {\n  const localFM = useFileManager();\n  const iCloudFM = useFileManager({ useICloud: true });\n  const [i, l] = [\n    FileManager.local().joinPath(\n      iCloudFM.cacheDirectory,\n      'settings.json'\n    ),\n    FileManager.local().joinPath(\n      localFM.cacheDirectory,\n      'settings.json'\n    )\n  ];\n  try {\n    writeSettings(data, { useICloud });\n    if (useICloud) {\n      FileManager.local().remove(l);\n    } else {\n      FileManager.iCloud().remove(i);\n    }\n  } catch (e) {\n    console.error(e);\n  }\n};\n\n\/**\n * @typedef {object} FormItem\n * @property {string} name\n * @property {string} label\n * @property {string} [type]\n * @property {{ label: string; value: unknown }[]} [options]\n * @property {unknown} [default]\n *\/\n\/**\n * @typedef {Record<string, unknown>} Settings\n * @property {boolean} useICloud\n * @property {string} [backgroundImage]\n *\/\n\/**\n * @param {object} options\n * @param {FormItem[]} [options.formItems]\n * @param {(data: {\n *  settings: Settings;\n *  family?: 'small'|'medium'|'large';\n * }) => Promise<ListWidget>} options.render\n * @param {string} [options.homePage]\n * @param {(item: FormItem) => void} [options.onItemClick]\n * @returns {Promise<ListWidget|undefined>} 在 Widget 中运行时返回 ListWidget，其它无返回\n *\/\nconst withSettings = async (options) => {\n  const {\n    formItems = [],\n    onItemClick,\n    render,\n    homePage = 'https:\/\/www.imarkr.com'\n  } = options;\n  const cache = useCache();\n\n  let settings = await readSettings() || {};\n  const imgPath = FileManager.local().joinPath(\n    cache.cacheDirectory,\n    'bg.png'\n  );\n\n  if (config.runsInWidget) {\n    const widget = await render({ settings });\n    if (settings.backgroundImage) {\n      widget.backgroundImage = FileManager.local().readImage(imgPath);\n    }\n    Script.setWidget(widget);\n    return widget\n  }\n\n  \/\/ ====== web start =======\n  const style =\n`:root {\n  --color-primary: #007aff;\n  --divider-color: rgba(60,60,67,0.36);\n  --card-background: #fff;\n  --card-radius: 10px;\n  --list-header-color: rgba(60,60,67,0.6);\n}\n* {\n  -webkit-user-select: none;\n  user-select: none;\n}\nbody {\n  margin: 10px 0;\n  -webkit-font-smoothing: antialiased;\n  font-family: \"SF Pro Display\",\"SF Pro Icons\",\"Helvetica Neue\",\"Helvetica\",\"Arial\",sans-serif;\n  accent-color: var(--color-primary);\n}\ninput {\n  -webkit-user-select: auto;\n  user-select: auto;\n}\nbody {\n  background: #f2f2f7;\n}\nbutton {\n  font-size: 16px;\n  background: var(--color-primary);\n  color: #fff;\n  border-radius: 8px;\n  border: none;\n  padding: 0.24em 0.5em;\n}\nbutton .iconfont {\n  margin-right: 6px;\n}\n.list {\n  margin: 15px;\n}\n.list__header {\n  margin: 0 20px;\n  color: var(--list-header-color);\n  font-size: 13px;\n}\n.list__body {\n  margin-top: 10px;\n  background: var(--card-background);\n  border-radius: var(--card-radius);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.form-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 16px;\n  min-height: 2em;\n  padding: 0.5em 20px;\n  position: relative;\n}\n.form-item--link .icon-arrow_right {\n  color: #86868b;\n}\n.form-item + .form-item::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 20px;\n  right: 0;\n  border-top: 0.5px solid var(--divider-color);\n}\n.form-item .iconfont {\n  margin-right: 4px;\n}\n.form-item input,\n.form-item select {\n  font-size: 14px;\n  text-align: right;\n}\n.form-item input[type=\"checkbox\"] {\n  width: 1.25em;\n  height: 1.25em;\n}\ninput[type=\"number\"] {\n  width: 4em;\n}\ninput[type=\"date\"] {\n  min-width: 8em;\n}\ninput[type='checkbox'][role='switch'] {\n  position: relative;\n  display: inline-block;\n  appearance: none;\n  width: 40px;\n  height: 24px;\n  border-radius: 24px;\n  background: #ccc;\n  transition: 0.3s ease-in-out;\n}\ninput[type='checkbox'][role='switch']::before {\n  content: '';\n  position: absolute;\n  left: 2px;\n  top: 2px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #fff;\n  transition: 0.3s ease-in-out;\n}\ninput[type='checkbox'][role='switch']:checked {\n  background: var(--color-primary);\n}\ninput[type='checkbox'][role='switch']:checked::before {\n  transform: translateX(16px);\n}\n.actions {\n  margin: 15px;\n}\n.copyright {\n  margin: 15px;\n  font-size: 12px;\n  color: #86868b;\n}\n.copyright a {\n  color: #515154;\n  text-decoration: none;\n}\n.preview.loading {\n  pointer-events: none;\n}\n.icon-loading {\n  display: inline-block;\n  animation: 1s linear infinite spin;\n}\n@keyframes spin {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(1turn);\n  }\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --divider-color: rgba(84,84,88,0.65);\n    --card-background: #1c1c1e;\n    --list-header-color: rgba(235,235,245,0.6);\n  }\n  body {\n    background: #000;\n    color: #fff;\n  }\n}`;\n\n  const js =\n`(() => {\n  const settings = ${JSON.stringify(settings)}\n  const formItems = ${JSON.stringify(formItems)}\n  \n  window.invoke = (code, data) => {\n    window.dispatchEvent(\n      new CustomEvent(\n        'JBridge',\n        { detail: { code, data } }\n      )\n    )\n  }\n  \n  const iCloudInput = document.querySelector('input[name=\"useICloud\"]')\n  iCloudInput.checked = settings.useICloud\n  iCloudInput\n    .addEventListener('change', (e) => {\n      invoke('moveSettings', e.target.checked)\n    })\n  \n  const formData = {};\n\n  const fragment = document.createDocumentFragment()\n  for (const item of formItems) {\n    const value = settings[item.name] ?? item.default ?? null\n    formData[item.name] = value;\n    const label = document.createElement(\"label\");\n    label.className = \"form-item\";\n    const div = document.createElement(\"div\");\n    div.innerText = item.label;\n    label.appendChild(div);\n    if (item.type === 'select') {\n      const select = document.createElement('select')\n      select.className = 'form-item__input'\n      select.name = item.name\n      select.value = value\n      for (const opt of (item.options || [])) {\n        const option = document.createElement('option')\n        option.value = opt.value\n        option.innerText = opt.label\n        option.selected = value === opt.value\n        select.appendChild(option)\n      }\n      select.addEventListener('change', (e) => {\n        formData[item.name] = e.target.value\n        invoke('changeSettings', formData)\n      })\n      label.appendChild(select)\n    } else if (item.type === 'cell') {\n      label.classList.add('form-item--link')\n      const icon = document.createElement('i')\n      icon.className = 'iconfont icon-arrow_right'\n      label.appendChild(icon)\n      label.addEventListener('click', () => {\n        invoke('itemClick', item)\n      })\n    } else {\n      const input = document.createElement(\"input\")\n      input.className = 'form-item__input'\n      input.name = item.name\n      input.type = item.type || \"text\";\n      input.enterKeyHint = 'done'\n      input.value = value\n      \/\/ Switch\n      if (item.type === 'switch') {\n        input.type = 'checkbox'\n        input.role = 'switch'\n        input.checked = value\n      }\n      if (item.type === 'number') {\n        input.inputMode = 'decimal'\n      }\n      if (input.type === 'text') {\n        input.size = 12\n      }\n      input.addEventListener(\"change\", (e) => {\n        formData[item.name] =\n          item.type === 'switch'\n          ? e.target.checked\n          : item.type === 'number'\n          ? Number(e.target.value)\n          : e.target.value;\n        invoke('changeSettings', formData)\n      });\n      label.appendChild(input);\n    }\n    fragment.appendChild(label);\n  }\n  document.getElementById('form').appendChild(fragment)\n\n  for (const btn of document.querySelectorAll('.preview')) {\n    btn.addEventListener('click', (e) => {\n      const target = e.currentTarget\n      target.classList.add('loading')\n      const icon = e.currentTarget.querySelector('.iconfont')\n      const className = icon.className\n      icon.className = 'iconfont icon-loading'\n      const listener = (event) => {\n        const { code } = event.detail\n        if (code === 'previewStart') {\n          target.classList.remove('loading')\n          icon.className = className\n          window.removeEventListener('JWeb', listener);\n        }\n      }\n      window.addEventListener('JWeb', listener)\n      invoke('preview', e.currentTarget.dataset.size)\n    })\n  }\n\n  const reset = () => {\n    for (const item of formItems) {\n      const el = document.querySelector(\\`.form-item__input[name=\"\\${item.name}\"]\\`)\n      formData[item.name] = item.default\n      if (item.type === 'switch') {\n        el.checked = item.default\n      } else {\n        el && (el.value = item.default)\n      }\n    }\n    invoke('removeSettings', formData)\n  }\n  document.getElementById('reset').addEventListener('click', () => reset())\n\n  document.getElementById('chooseBgImg')\n    .addEventListener('click', () => invoke('chooseBgImg'))\n})()`;\n\n  const html =\n`<html>\n  <head>\n    <meta name='viewport' content='width=device-width, user-scalable=no'>\n    <link rel=\"stylesheet\" href=\"\/\/at.alicdn.com\/t\/c\/font_3772663_kmo790s3yfq.css\" type=\"text\/css\">\n    <style>${style}<\/style>\n  <\/head>\n  <body>\n  <div class=\"list\">\n    <div class=\"list__header\">${i18n(['Common', '通用'])}<\/div>\n    <form class=\"list__body\" action=\"javascript:void(0);\">\n      <label class=\"form-item\">\n        <div>${i18n(['Sync with iCloud', 'iCloud 同步'])}<\/div>\n        <input name=\"useICloud\" type=\"checkbox\" role=\"switch\">\n      <\/label>\n      <label id=\"chooseBgImg\" class=\"form-item form-item--link\">\n        <div>${i18n(['Background image', '背景图'])}<\/div>\n        <i class=\"iconfont icon-arrow_right\"><\/i>\n      <\/label>\n      <label id='reset' class=\"form-item form-item--link\">\n        <div>${i18n(['Reset', '重置'])}<\/div>\n        <i class=\"iconfont icon-arrow_right\"><\/i>\n      <\/label>\n    <\/form>\n  <\/div>\n  <div class=\"list\">\n    <div class=\"list__header\">${i18n(['Settings', '设置'])}<\/div>\n    <form id=\"form\" class=\"list__body\" action=\"javascript:void(0);\"><\/form>\n  <\/div>\n  <div class=\"actions\">\n    <button class=\"preview\" data-size=\"small\"><i class=\"iconfont icon-yingyongzhongxin\"><\/i>${i18n(['Small', '预览小号'])}<\/button>\n    <button class=\"preview\" data-size=\"medium\"><i class=\"iconfont icon-daliebiao\"><\/i>${i18n(['Medium', '预览中号'])}<\/button>\n    <button class=\"preview\" data-size=\"large\"><i class=\"iconfont icon-dantupailie\"><\/i>${i18n(['Large', '预览大号'])}<\/button>\n  <\/div>\n  <footer>\n    <div class=\"copyright\">Copyright © 2022 <a href=\"javascript:invoke('safari','https:\/\/www.imarkr.com');\">iMarkr<\/a> All rights reserved.<\/div>\n  <\/footer>\n    <script>${js}<\/script>\n  <\/body>\n<\/html>`;\n\n  const webView = new WebView();\n  await webView.loadHTML(html, homePage);\n\n  const clearBgImg = () => {\n    delete settings.backgroundImage;\n    const fm = FileManager.local();\n    if (fm.fileExists(imgPath)) {\n      fm.remove(imgPath);\n    }\n  };\n\n  const chooseBgImg = async () => {\n    const { option } = await presentSheet({\n      options: [\n        { key: 'choose', title: i18n(['Choose photo', '选择图片']) },\n        { key: 'clear', title: i18n(['Clear background image', '清除背景图']) }\n      ],\n      cancelText: i18n(['Cancel', '取消'])\n    });\n    switch (option?.key) {\n      case 'choose': {\n        try {\n          const image = await Photos.fromLibrary();\n          cache.writeImage('bg.png', image);\n          settings.backgroundImage = imgPath;\n          writeSettings(settings, { useICloud: settings.useICloud });\n        } catch (e) {}\n        break\n      }\n      case 'clear':\n        clearBgImg();\n        writeSettings(settings, { useICloud: settings.useICloud });\n        break\n    }\n  };\n\n  const injectListener = async () => {\n    const event = await webView.evaluateJavaScript(\n      `(() => {\n        const controller = new AbortController()\n        const listener = (e) => {\n          completion(e.detail)\n          controller.abort()\n        }\n        window.addEventListener(\n          'JBridge',\n          listener,\n          { signal: controller.signal }\n        )\n      })()`,\n      true\n    ).catch((err) => {\n      console.error(err);\n      throw err\n    });\n    const { code, data } = event;\n    switch (code) {\n      case 'preview': {\n        const widget = await render({ settings, family: data });\n        const { backgroundImage } = settings;\n        if (backgroundImage) {\n          widget.backgroundImage = FileManager.local().readImage(backgroundImage);\n        }\n        webView.evaluateJavaScript(\n          'window.dispatchEvent(new CustomEvent(\\'JWeb\\', { detail: { code: \\'previewStart\\' } }))',\n          false\n        );\n        widget[`present${data.replace(data[0], data[0].toUpperCase())}`]();\n        break\n      }\n      case 'safari':\n        Safari.openInApp(data, true);\n        break\n      case 'changeSettings':\n        settings = { ...settings, ...data };\n        writeSettings(settings, { useICloud: settings.useICloud });\n        break\n      case 'moveSettings':\n        settings.useICloud = data;\n        moveSettings(data, settings);\n        break\n      case 'removeSettings':\n        settings = { ...settings, ...data };\n        clearBgImg();\n        removeSettings(settings);\n        break\n      case 'chooseBgImg':\n        await chooseBgImg();\n        break\n      case 'itemClick':\n        onItemClick?.(data);\n        break\n    }\n    injectListener();\n  };\n\n  injectListener().catch((e) => {\n    console.error(e);\n    throw e\n  });\n  webView.present();\n  \/\/ ======= web end =========\n};\n\nif (typeof require === 'undefined') require = importModule;\n\nproxy.call(undefined);\n\nconst preference = {\n  title: '🇨🇳 Programmer',\n  titleBgOpacity: 1,\n  titleColor: '#ffffff',\n  date: '2024-10-24',\n  numColor: '#373655',\n  numFontSize: 48,\n  unitColor: '#6e6e73',\n  unitFontSize: 18,\n  dateColor: '#86868b',\n  dateFontSize: 14,\n  useTextShadow: false\n};\n\n\/**\n * @param {WidgetText} widget\n *\/\nconst setTextShadow = (widget) => {\n  widget.setShadowColor(new Color(Color.gray().hex, 0.25))\n    .setShadowRadius(0.5)\n    .setShadowOffset(new Point(1, 1));\n};\n\nconst renderTitle = (widget) => {\n  const { title, titleBgOpacity, titleColor, useTextShadow } = preference;\n  const bg = new LinearGradient();\n  bg.colors = [\n    new Color('#9ce4c1', titleBgOpacity),\n    new Color('#92d8e1', titleBgOpacity)\n  ];\n  bg.locations = [0, 1];\n  bg.startPoint = new Point(0, 0);\n  bg.endPoint = new Point(1, 0);\n\n  widget.addStack()\n    .setBackgroundGradient(bg)\n    .setPadding(10, 12, 10, 12)\n    .layoutVertically()\n    .next((stack) => {\n      stack.addText(title)\n        .setFont(Font.semiboldSystemFont(16))\n        .setTextColor(new Color(titleColor))\n        .next((widget) => {\n          if (useTextShadow) {\n            setTextShadow(widget);\n          }\n        });\n    })\n    .next((stack) => stack.addStack().addSpacer());\n};\n\nconst addText = (widget, { text, lineHeight }) => {\n  return widget.addStack()\n    .setPadding(0, 0, 0, 0)\n    .setSize(new Size(0, lineHeight))\n    .addText(text)\n};\n\n\/**\n * @param {WidgetStack} container\n *\/\nconst renderDays = (container) => {\n  const {\n    date,\n    numColor, numFontSize,\n    unitColor, unitFontSize,\n    useTextShadow\n  } = preference;\n\n  const now = new Date();\n  now.setHours(0, 0, 0, 0);\n  const target = new Date(date);\n  target.setHours(0, 0, 0, 0);\n  const days = Math.ceil(Math.abs(target - now) \/ (24 * 3600000));\n\n  const row = container.addStack().bottomAlignContent();\n  \/\/ render number\n  addText(row, {\n    text: `${days}`,\n    lineHeight: numFontSize\n  })\n    .setFont(Font.boldSystemFont(numFontSize))\n    .setTextColor(new Color(numColor))\n    .next((widget) => {\n      if (useTextShadow) {\n        setTextShadow(widget);\n      }\n    });\n\n  row.addSpacer(4);\n  \/\/ render unit\n  row.addText(i18n(['days', '天']))\n    .setFont(Font.systemFont(unitFontSize))\n    .setLineLimit(1)\n    .setMinimumScaleFactor(0.2)\n    .setTextColor(new Color(unitColor))\n    .next((widget) => {\n      if (useTextShadow) {\n        setTextShadow(widget);\n      }\n    });\n};\n\n\/**\n * @param {WidgetStack} container\n *\/\nconst renderDate = (container) => {\n  const { date, dateColor, dateFontSize, useTextShadow } = preference;\n\n  const target = new Date(date);\n  target.setHours(0, 0, 0, 0);\n  const df = new DateFormatter();\n  df.dateFormat = 'yyyy\/MM\/dd';\n\n  container.addText(df.string(target))\n    .setFont(Font.regularRoundedSystemFont(dateFontSize))\n    .setTextColor(new Color(dateColor))\n    .next((widget) => {\n      if (useTextShadow) {\n        setTextShadow(widget);\n      }\n    });\n};\n\nconst createWidget = () => {\n  const { backgroundImage } = preference;\n\n  const gradient = new LinearGradient();\n  gradient.colors = [\n    new Color('#fff', 0),\n    new Color('#9ce4c1', 0.3)\n  ];\n  gradient.locations = [0, 1];\n  gradient.startPoint = new Point(0, 0);\n  gradient.endPoint = new Point(1, 0);\n\n  const widget = new ListWidget()\n    .setBackgroundColor(Color.white())\n    .next((widget) => {\n      if (!backgroundImage) {\n        widget.setBackgroundGradient(gradient);\n      }\n    })\n    .setPadding(0, 0, 0, 0)\n    .next(renderTitle);\n\n  widget.addStack()\n    .layoutVertically()\n    .setPadding(12, 12, 18, 12)\n    .next((stack) => stack.addSpacer())\n    .next(renderDays)\n    .next((stack) => stack.addSpacer(8))\n    .next(renderDate);\n\n  return widget\n};\n\nawait withSettings({\n  formItems: [\n    {\n      name: 'title',\n      label: i18n(['Title', '标题']),\n      default: preference.title\n    },\n    {\n      name: 'titleBgOpacity',\n      label: i18n(['Title background opacity', '标题背景透明度']),\n      type: 'number',\n      default: preference.titleBgOpacity\n    },\n    {\n      name: 'titleColor',\n      label: i18n(['Title color', '标题颜色']),\n      type: 'color',\n      default: preference.titleColor\n    },\n    {\n      name: 'date',\n      label: i18n(['Date', '日期']),\n      type: 'date',\n      default: preference.date\n    },\n    {\n      name: 'numColor',\n      label: i18n(['Number color', '数字颜色']),\n      type: 'color',\n      default: preference.numColor\n    },\n    {\n      name: 'numFontSize',\n      label: i18n(['Number font size', '数字字体大小']),\n      type: 'number',\n      default: preference.numFontSize\n    },\n    {\n      name: 'unitColor',\n      label: i18n(['Unit color', '单位颜色']),\n      type: 'color',\n      default: preference.unitColor\n    },\n    {\n      name: 'unitFontSize',\n      label: i18n(['Unit font size', '单位字体大小']),\n      type: 'number',\n      default: preference.unitFontSize\n    },\n    {\n      name: 'dateColor',\n      label: i18n(['Date color', '日期颜色']),\n      type: 'color',\n      default: preference.dateColor\n    },\n    {\n      name: 'dateFontSize',\n      label: i18n(['Date font size', '日期字体大小']),\n      type: 'number',\n      default: preference.dateFontSize\n    },\n    {\n      name: 'useTextShadow',\n      label: i18n(['Text shadow', '文字阴影']),\n      type: 'switch',\n      default: preference.useTextShadow\n    }\n  ],\n  render: ({ settings }) => {\n    Object.assign(preference, settings);\n    const widget = createWidget();\n    return widget\n  }\n});\n",
  "share_sheet_inputs" : [

  ]
}