@plaidev/karte-action-sdk 1.1.267-29082699.18b12594 → 1.1.268-29083022.42c3d847
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hydrate/index.es.js +6270 -6269
- package/dist/index.es.js +10247 -10246
- package/dist/svelte5/hydrate/index.es.js +396 -337
- package/dist/svelte5/index.es.js +356 -372
- package/dist/svelte5/index.front2.es.js +356 -372
- package/package.json +1 -1
@@ -1635,6 +1635,32 @@ function initActionTable(localVariablesQuery) {
|
|
1635
1635
|
setVariables(initValues);
|
1636
1636
|
}
|
1637
1637
|
|
1638
|
+
/**
|
1639
|
+
* モーダル(ポップアップ)に関連するコードの管理
|
1640
|
+
*
|
1641
|
+
* アクションのShow, Close, ChangeStateの状態はここで管理する。
|
1642
|
+
*/
|
1643
|
+
/**
|
1644
|
+
* アクションを表示する
|
1645
|
+
*
|
1646
|
+
* @public
|
1647
|
+
*/
|
1648
|
+
function showAction$1() {
|
1649
|
+
const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
|
1650
|
+
window.dispatchEvent(event);
|
1651
|
+
}
|
1652
|
+
/**
|
1653
|
+
* アクションを閉じる
|
1654
|
+
*
|
1655
|
+
* @param trigger - 閉じた時のトリガー。デフォルト `'none'`
|
1656
|
+
*
|
1657
|
+
* @public
|
1658
|
+
*/
|
1659
|
+
function closeAction$1(trigger = 'none') {
|
1660
|
+
const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
|
1661
|
+
window.dispatchEvent(event);
|
1662
|
+
}
|
1663
|
+
|
1638
1664
|
/**
|
1639
1665
|
* モーダル(ポップアップ)に関連するコードの管理
|
1640
1666
|
*
|
@@ -1652,12 +1678,57 @@ const handleState = (event) => {
|
|
1652
1678
|
});
|
1653
1679
|
}
|
1654
1680
|
};
|
1681
|
+
/**
|
1682
|
+
* アクションが表示 (show) された後にフックする関数
|
1683
|
+
*
|
1684
|
+
* @param fn - 呼び出されるフック関数
|
1685
|
+
*
|
1686
|
+
* @public
|
1687
|
+
*/
|
1688
|
+
function onShow(fn) {
|
1689
|
+
let { onShowHandlers } = getInternalHandlers();
|
1690
|
+
if (!onShowHandlers) {
|
1691
|
+
onShowHandlers = [];
|
1692
|
+
}
|
1693
|
+
onShowHandlers.push(fn);
|
1694
|
+
setInternalHandlers({ onShowHandlers });
|
1695
|
+
}
|
1696
|
+
/**
|
1697
|
+
* アクションがクローズ (close) される前にフックする関数
|
1698
|
+
*
|
1699
|
+
* @param fn - 呼び出されるフック関数
|
1700
|
+
*
|
1701
|
+
* @public
|
1702
|
+
*/
|
1703
|
+
function onClose(fn) {
|
1704
|
+
let { onCloseHandlers } = getInternalHandlers();
|
1705
|
+
if (!onCloseHandlers) {
|
1706
|
+
onCloseHandlers = [];
|
1707
|
+
}
|
1708
|
+
onCloseHandlers.push(fn);
|
1709
|
+
setInternalHandlers({ onCloseHandlers });
|
1710
|
+
}
|
1711
|
+
/**
|
1712
|
+
* アクションのステートが変更された (changeState) 後にフックする関数
|
1713
|
+
*
|
1714
|
+
* @param fn - 呼び出されるフック関数
|
1715
|
+
*
|
1716
|
+
* @public
|
1717
|
+
*/
|
1718
|
+
function onChangeState(fn) {
|
1719
|
+
let { onChangeStateHandlers } = getInternalHandlers();
|
1720
|
+
if (!onChangeStateHandlers) {
|
1721
|
+
onChangeStateHandlers = [];
|
1722
|
+
}
|
1723
|
+
onChangeStateHandlers.push(fn);
|
1724
|
+
setInternalHandlers({ onChangeStateHandlers });
|
1725
|
+
}
|
1655
1726
|
/**
|
1656
1727
|
* アクションを表示する
|
1657
1728
|
*
|
1658
1729
|
* @public
|
1659
1730
|
*/
|
1660
|
-
function showAction
|
1731
|
+
function showAction() {
|
1661
1732
|
const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
|
1662
1733
|
window.dispatchEvent(event);
|
1663
1734
|
}
|
@@ -1668,10 +1739,114 @@ function showAction$1() {
|
|
1668
1739
|
*
|
1669
1740
|
* @public
|
1670
1741
|
*/
|
1671
|
-
function closeAction
|
1742
|
+
function closeAction(trigger = 'none') {
|
1672
1743
|
const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
|
1673
1744
|
window.dispatchEvent(event);
|
1674
1745
|
}
|
1746
|
+
/**
|
1747
|
+
* アクションに CSS を適用する
|
1748
|
+
*
|
1749
|
+
* @param css - 適用する CSS
|
1750
|
+
*
|
1751
|
+
* @returns 適用された style 要素を返す Promise
|
1752
|
+
*
|
1753
|
+
* @public
|
1754
|
+
*/
|
1755
|
+
async function applyCss(css) {
|
1756
|
+
return new Promise((resolve, reject) => {
|
1757
|
+
const style = document.createElement('style');
|
1758
|
+
style.textContent = css;
|
1759
|
+
const shadowRoot = getActionRoot();
|
1760
|
+
if (!shadowRoot)
|
1761
|
+
return;
|
1762
|
+
shadowRoot.append(style);
|
1763
|
+
style.addEventListener('load', () => resolve(style));
|
1764
|
+
style.addEventListener('error', () => reject(style));
|
1765
|
+
});
|
1766
|
+
}
|
1767
|
+
async function fixFontFaceIssue(href, cssRules) {
|
1768
|
+
const css = new CSSStyleSheet();
|
1769
|
+
// @ts-ignore
|
1770
|
+
await css.replace(cssRules);
|
1771
|
+
const rules = [];
|
1772
|
+
const fixedRules = [];
|
1773
|
+
Array.from(css.cssRules).forEach(cssRule => {
|
1774
|
+
if (cssRule.type !== 5) {
|
1775
|
+
rules.push(cssRule.cssText);
|
1776
|
+
}
|
1777
|
+
// type 5 is @font-face
|
1778
|
+
const split = href.split('/');
|
1779
|
+
const stylePath = split.slice(0, split.length - 1).join('/');
|
1780
|
+
const cssText = cssRule.cssText;
|
1781
|
+
const newCssText = cssText.replace(
|
1782
|
+
// relative paths
|
1783
|
+
/url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
|
1784
|
+
if (cssText === newCssText)
|
1785
|
+
return;
|
1786
|
+
fixedRules.push(newCssText);
|
1787
|
+
});
|
1788
|
+
return [rules.join('\n'), fixedRules.join('\n')];
|
1789
|
+
}
|
1790
|
+
/**
|
1791
|
+
* アクションにグローバルなスタイルを読み込む
|
1792
|
+
*
|
1793
|
+
* @param href - style ファイルのリンク URL
|
1794
|
+
*
|
1795
|
+
* @public
|
1796
|
+
*/
|
1797
|
+
async function loadStyle(href) {
|
1798
|
+
const sr = getActionRoot();
|
1799
|
+
if (!sr)
|
1800
|
+
return;
|
1801
|
+
let cssRules = '';
|
1802
|
+
try {
|
1803
|
+
const res = await fetch(href);
|
1804
|
+
cssRules = await res.text();
|
1805
|
+
}
|
1806
|
+
catch (_) {
|
1807
|
+
// pass
|
1808
|
+
}
|
1809
|
+
if (!cssRules)
|
1810
|
+
return;
|
1811
|
+
// Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
|
1812
|
+
// @see https://stackoverflow.com/a/63717709
|
1813
|
+
const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
|
1814
|
+
const css = new CSSStyleSheet();
|
1815
|
+
// @ts-ignore
|
1816
|
+
await css.replace(rules);
|
1817
|
+
const fontFaceCss = new CSSStyleSheet();
|
1818
|
+
// @ts-ignore
|
1819
|
+
await fontFaceCss.replace(fontFaceRules);
|
1820
|
+
// @ts-ignore
|
1821
|
+
sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
|
1822
|
+
// Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
|
1823
|
+
// @see https://stackoverflow.com/a/63717709
|
1824
|
+
// @ts-ignore
|
1825
|
+
document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
|
1826
|
+
}
|
1827
|
+
// @internal
|
1828
|
+
function getCssVariables(data) {
|
1829
|
+
return Object.entries(data)
|
1830
|
+
.filter(([key, value]) => {
|
1831
|
+
return ['string', 'number'].includes(typeof value) && key.startsWith('--');
|
1832
|
+
})
|
1833
|
+
.map(([key, value]) => `${key}:${value}`)
|
1834
|
+
.join(';');
|
1835
|
+
}
|
1836
|
+
/**
|
1837
|
+
* アクションのルートの DOM 要素を取得する
|
1838
|
+
*
|
1839
|
+
* @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
|
1840
|
+
*
|
1841
|
+
* @public
|
1842
|
+
*/
|
1843
|
+
function getActionRoot() {
|
1844
|
+
const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
|
1845
|
+
if (!root?.shadowRoot) {
|
1846
|
+
return null;
|
1847
|
+
}
|
1848
|
+
return root.shadowRoot;
|
1849
|
+
}
|
1675
1850
|
/** @internal */
|
1676
1851
|
function createModal(App, options = {
|
1677
1852
|
send: () => { },
|
@@ -1739,6 +1914,9 @@ function createModal(App, options = {
|
|
1739
1914
|
if (app) {
|
1740
1915
|
return;
|
1741
1916
|
}
|
1917
|
+
if (!isOnSite() && trigger === 'custom') {
|
1918
|
+
return;
|
1919
|
+
}
|
1742
1920
|
if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
|
1743
1921
|
return;
|
1744
1922
|
}
|
@@ -1763,9 +1941,9 @@ function createModal(App, options = {
|
|
1763
1941
|
if (app) {
|
1764
1942
|
return;
|
1765
1943
|
}
|
1944
|
+
const target = ensureActionRoot(isOnSite());
|
1766
1945
|
const props = {
|
1767
|
-
target
|
1768
|
-
hydrate: false,
|
1946
|
+
target,
|
1769
1947
|
props: {
|
1770
1948
|
send: options.send,
|
1771
1949
|
publish: options.publish,
|
@@ -1800,7 +1978,8 @@ function createModal(App, options = {
|
|
1800
1978
|
},
|
1801
1979
|
},
|
1802
1980
|
};
|
1803
|
-
app =
|
1981
|
+
app = // @ts-ignore -- Svelte3 では `mount` は存在しない
|
1982
|
+
svelte.mount(App, props)
|
1804
1983
|
;
|
1805
1984
|
};
|
1806
1985
|
const handleShow = (event) => {
|
@@ -1850,7 +2029,10 @@ function createModal(App, options = {
|
|
1850
2029
|
window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
|
1851
2030
|
let showTriggerCleanups = [];
|
1852
2031
|
let closeTriggerCleanups = [];
|
1853
|
-
{
|
2032
|
+
if (!isOnSite()) {
|
2033
|
+
autoShow();
|
2034
|
+
}
|
2035
|
+
else {
|
1854
2036
|
showTriggerCleanups = listenShowTrigger();
|
1855
2037
|
closeTriggerCleanups = listenCloseTrigger();
|
1856
2038
|
}
|
@@ -1882,7 +2064,7 @@ function createModal(App, options = {
|
|
1882
2064
|
return appCleanup;
|
1883
2065
|
}
|
1884
2066
|
/** @internal */
|
1885
|
-
function ensureActionRoot
|
2067
|
+
function ensureActionRoot(useShadow = true) {
|
1886
2068
|
const systemConfig = getSystem();
|
1887
2069
|
const rootAttrs = {
|
1888
2070
|
class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
|
@@ -1905,73 +2087,182 @@ function ensureActionRoot$1(useShadow = true) {
|
|
1905
2087
|
return el;
|
1906
2088
|
}
|
1907
2089
|
}
|
1908
|
-
|
1909
2090
|
/**
|
1910
|
-
*
|
2091
|
+
* 非推奨
|
2092
|
+
*
|
2093
|
+
* @deprecated 非推奨
|
2094
|
+
*
|
2095
|
+
* @internal
|
1911
2096
|
*/
|
1912
|
-
|
1913
|
-
async function runScript$1(options = {
|
1914
|
-
send: () => { },
|
1915
|
-
publish: () => { },
|
1916
|
-
props: {},
|
1917
|
-
variables: {},
|
1918
|
-
localVariablesQuery: undefined,
|
1919
|
-
karteTemplate: {},
|
1920
|
-
context: { api_key: '', collection_endpoint: undefined },
|
1921
|
-
}) {
|
1922
|
-
if (!options.onCreate)
|
1923
|
-
return;
|
1924
|
-
let data = getVariables();
|
1925
|
-
initialize({ send: options.send, initialState: data.initial_state });
|
1926
|
-
initActionTable(options.localVariablesQuery);
|
1927
|
-
const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
|
1928
|
-
if (!success)
|
1929
|
-
return;
|
1930
|
-
// Action Tableの取得結果を反映する
|
1931
|
-
data = getVariables();
|
1932
|
-
const actionProps = {
|
1933
|
-
send: options.send,
|
1934
|
-
publish: options.publish,
|
1935
|
-
data,
|
1936
|
-
};
|
1937
|
-
options.send('script_fired');
|
1938
|
-
// 旧Widget API IFの処理
|
1939
|
-
const { onCreateHandlers } = getInternalHandlers();
|
1940
|
-
if (onCreateHandlers) {
|
1941
|
-
onCreateHandlers.forEach(h => {
|
1942
|
-
h({ send: options.send, publish: options.publish, data });
|
1943
|
-
console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
|
1944
|
-
});
|
1945
|
-
}
|
1946
|
-
options.onCreate(actionProps);
|
1947
|
-
finalize();
|
1948
|
-
}
|
2097
|
+
const show = showAction;
|
1949
2098
|
/**
|
1950
|
-
*
|
2099
|
+
* 非推奨
|
1951
2100
|
*
|
1952
|
-
* @
|
2101
|
+
* @deprecated 非推奨
|
1953
2102
|
*
|
1954
|
-
* @
|
2103
|
+
* @internal
|
1955
2104
|
*/
|
1956
|
-
|
1957
|
-
return new Promise((resolve, reject) => {
|
1958
|
-
const script = document.createElement('script');
|
1959
|
-
script.src = src;
|
1960
|
-
document.body.appendChild(script);
|
1961
|
-
script.addEventListener('load', () => resolve(script));
|
1962
|
-
script.addEventListener('error', () => reject(script));
|
1963
|
-
});
|
1964
|
-
}
|
2105
|
+
const close = closeAction;
|
1965
2106
|
/**
|
1966
|
-
*
|
2107
|
+
* 非推奨
|
1967
2108
|
*
|
1968
|
-
* @
|
2109
|
+
* @deprecated 非推奨
|
1969
2110
|
*
|
1970
|
-
* @
|
2111
|
+
* @internal
|
1971
2112
|
*/
|
1972
|
-
|
1973
|
-
|
1974
|
-
|
2113
|
+
const ensureModalRoot = ensureActionRoot;
|
2114
|
+
/**
|
2115
|
+
* 非推奨
|
2116
|
+
*
|
2117
|
+
* @deprecated 非推奨
|
2118
|
+
*
|
2119
|
+
* @internal
|
2120
|
+
*/
|
2121
|
+
function createApp(App, options = {
|
2122
|
+
send: () => { },
|
2123
|
+
publish: () => { },
|
2124
|
+
props: {},
|
2125
|
+
variables: {},
|
2126
|
+
localVariablesQuery: undefined,
|
2127
|
+
context: { api_key: '' },
|
2128
|
+
}) {
|
2129
|
+
let app = null;
|
2130
|
+
const close = () => {
|
2131
|
+
if (app) {
|
2132
|
+
{
|
2133
|
+
// @ts-ignore -- Svelte3 では `unmount` は存在しない
|
2134
|
+
svelte.unmount(app);
|
2135
|
+
}
|
2136
|
+
app = null;
|
2137
|
+
}
|
2138
|
+
};
|
2139
|
+
const appArgs = {
|
2140
|
+
target: null,
|
2141
|
+
props: {
|
2142
|
+
send: options.send,
|
2143
|
+
publish: options.publish,
|
2144
|
+
close,
|
2145
|
+
data: {
|
2146
|
+
...options.props,
|
2147
|
+
...options.variables,
|
2148
|
+
},
|
2149
|
+
},
|
2150
|
+
};
|
2151
|
+
const win = ensureActionRoot(isOnSite());
|
2152
|
+
appArgs.target = win;
|
2153
|
+
return {
|
2154
|
+
close,
|
2155
|
+
show: () => {
|
2156
|
+
if (app) {
|
2157
|
+
return;
|
2158
|
+
}
|
2159
|
+
options.send('message_open');
|
2160
|
+
app = // @ts-ignore -- Svelte3 では `mount` は存在しない
|
2161
|
+
svelte.mount(App, appArgs)
|
2162
|
+
;
|
2163
|
+
},
|
2164
|
+
};
|
2165
|
+
}
|
2166
|
+
/**
|
2167
|
+
* 非推奨
|
2168
|
+
*
|
2169
|
+
* @deprecated 非推奨
|
2170
|
+
*
|
2171
|
+
* @internal
|
2172
|
+
*/
|
2173
|
+
function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
|
2174
|
+
console.log('createFog');
|
2175
|
+
const root = ensureModalRoot();
|
2176
|
+
if (root.querySelector('.__krt-fog')) {
|
2177
|
+
return { fog: null, close: () => { } };
|
2178
|
+
}
|
2179
|
+
const fog = document.createElement('div');
|
2180
|
+
fog.className = '__krt-fog';
|
2181
|
+
Object.assign(fog.style, {
|
2182
|
+
position: 'fixed',
|
2183
|
+
left: 0,
|
2184
|
+
top: 0,
|
2185
|
+
width: '100%',
|
2186
|
+
height: '100%',
|
2187
|
+
'z-index': zIndex,
|
2188
|
+
'background-color': color,
|
2189
|
+
opacity,
|
2190
|
+
});
|
2191
|
+
const close = () => {
|
2192
|
+
onclick();
|
2193
|
+
fog.remove();
|
2194
|
+
};
|
2195
|
+
fog.onclick = close;
|
2196
|
+
root.appendChild(fog);
|
2197
|
+
return { fog, close };
|
2198
|
+
}
|
2199
|
+
|
2200
|
+
/**
|
2201
|
+
* スクリプト接客が利用するコードの管理
|
2202
|
+
*/
|
2203
|
+
/** @internal */
|
2204
|
+
async function runScript$1(options = {
|
2205
|
+
send: () => { },
|
2206
|
+
publish: () => { },
|
2207
|
+
props: {},
|
2208
|
+
variables: {},
|
2209
|
+
localVariablesQuery: undefined,
|
2210
|
+
karteTemplate: {},
|
2211
|
+
context: { api_key: '', collection_endpoint: undefined },
|
2212
|
+
}) {
|
2213
|
+
if (!options.onCreate)
|
2214
|
+
return;
|
2215
|
+
let data = getVariables();
|
2216
|
+
initialize({ send: options.send, initialState: data.initial_state });
|
2217
|
+
initActionTable(options.localVariablesQuery);
|
2218
|
+
const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
|
2219
|
+
if (!success)
|
2220
|
+
return;
|
2221
|
+
// Action Tableの取得結果を反映する
|
2222
|
+
data = getVariables();
|
2223
|
+
const actionProps = {
|
2224
|
+
send: options.send,
|
2225
|
+
publish: options.publish,
|
2226
|
+
data,
|
2227
|
+
};
|
2228
|
+
options.send('script_fired');
|
2229
|
+
// 旧Widget API IFの処理
|
2230
|
+
const { onCreateHandlers } = getInternalHandlers();
|
2231
|
+
if (onCreateHandlers) {
|
2232
|
+
onCreateHandlers.forEach(h => {
|
2233
|
+
h({ send: options.send, publish: options.publish, data });
|
2234
|
+
console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
|
2235
|
+
});
|
2236
|
+
}
|
2237
|
+
options.onCreate(actionProps);
|
2238
|
+
finalize();
|
2239
|
+
}
|
2240
|
+
/**
|
2241
|
+
* ES Modules に対応していない JavaScript をページに読み込む
|
2242
|
+
*
|
2243
|
+
* @param src - JavaScript ファイルのリンク URL
|
2244
|
+
*
|
2245
|
+
* @public
|
2246
|
+
*/
|
2247
|
+
async function loadGlobalScript(src) {
|
2248
|
+
return new Promise((resolve, reject) => {
|
2249
|
+
const script = document.createElement('script');
|
2250
|
+
script.src = src;
|
2251
|
+
document.body.appendChild(script);
|
2252
|
+
script.addEventListener('load', () => resolve(script));
|
2253
|
+
script.addEventListener('error', () => reject(script));
|
2254
|
+
});
|
2255
|
+
}
|
2256
|
+
/**
|
2257
|
+
* グローバル CSS をページに適用する
|
2258
|
+
*
|
2259
|
+
* @param css - CSS
|
2260
|
+
*
|
2261
|
+
* @public
|
2262
|
+
*/
|
2263
|
+
async function applyGlobalCss(css) {
|
2264
|
+
return new Promise((resolve, reject) => {
|
2265
|
+
const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
|
1975
2266
|
if (!action) {
|
1976
2267
|
return;
|
1977
2268
|
}
|
@@ -2072,7 +2363,7 @@ function create(App, options) {
|
|
2072
2363
|
runScript$1(options);
|
2073
2364
|
}
|
2074
2365
|
else {
|
2075
|
-
modalCleanup = createModal(App, options);
|
2366
|
+
modalCleanup = createModal(App, options) ;
|
2076
2367
|
}
|
2077
2368
|
return () => {
|
2078
2369
|
modalCleanup();
|
@@ -2139,313 +2430,6 @@ function destroy() {
|
|
2139
2430
|
dispatchDestroyEvent();
|
2140
2431
|
}
|
2141
2432
|
|
2142
|
-
/**
|
2143
|
-
* モーダル(ポップアップ)に関連するコードの管理
|
2144
|
-
*
|
2145
|
-
* アクションのShow, Close, ChangeStateの状態はここで管理する。
|
2146
|
-
*/
|
2147
|
-
/**
|
2148
|
-
* アクションが表示 (show) された後にフックする関数
|
2149
|
-
*
|
2150
|
-
* @param fn - 呼び出されるフック関数
|
2151
|
-
*
|
2152
|
-
* @public
|
2153
|
-
*/
|
2154
|
-
function onShow(fn) {
|
2155
|
-
let { onShowHandlers } = getInternalHandlers();
|
2156
|
-
if (!onShowHandlers) {
|
2157
|
-
onShowHandlers = [];
|
2158
|
-
}
|
2159
|
-
onShowHandlers.push(fn);
|
2160
|
-
setInternalHandlers({ onShowHandlers });
|
2161
|
-
}
|
2162
|
-
/**
|
2163
|
-
* アクションがクローズ (close) される前にフックする関数
|
2164
|
-
*
|
2165
|
-
* @param fn - 呼び出されるフック関数
|
2166
|
-
*
|
2167
|
-
* @public
|
2168
|
-
*/
|
2169
|
-
function onClose(fn) {
|
2170
|
-
let { onCloseHandlers } = getInternalHandlers();
|
2171
|
-
if (!onCloseHandlers) {
|
2172
|
-
onCloseHandlers = [];
|
2173
|
-
}
|
2174
|
-
onCloseHandlers.push(fn);
|
2175
|
-
setInternalHandlers({ onCloseHandlers });
|
2176
|
-
}
|
2177
|
-
/**
|
2178
|
-
* アクションのステートが変更された (changeState) 後にフックする関数
|
2179
|
-
*
|
2180
|
-
* @param fn - 呼び出されるフック関数
|
2181
|
-
*
|
2182
|
-
* @public
|
2183
|
-
*/
|
2184
|
-
function onChangeState(fn) {
|
2185
|
-
let { onChangeStateHandlers } = getInternalHandlers();
|
2186
|
-
if (!onChangeStateHandlers) {
|
2187
|
-
onChangeStateHandlers = [];
|
2188
|
-
}
|
2189
|
-
onChangeStateHandlers.push(fn);
|
2190
|
-
setInternalHandlers({ onChangeStateHandlers });
|
2191
|
-
}
|
2192
|
-
/**
|
2193
|
-
* アクションを表示する
|
2194
|
-
*
|
2195
|
-
* @public
|
2196
|
-
*/
|
2197
|
-
function showAction() {
|
2198
|
-
const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
|
2199
|
-
window.dispatchEvent(event);
|
2200
|
-
}
|
2201
|
-
/**
|
2202
|
-
* アクションを閉じる
|
2203
|
-
*
|
2204
|
-
* @param trigger - 閉じた時のトリガー。デフォルト `'none'`
|
2205
|
-
*
|
2206
|
-
* @public
|
2207
|
-
*/
|
2208
|
-
function closeAction(trigger = 'none') {
|
2209
|
-
const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
|
2210
|
-
window.dispatchEvent(event);
|
2211
|
-
}
|
2212
|
-
/**
|
2213
|
-
* アクションに CSS を適用する
|
2214
|
-
*
|
2215
|
-
* @param css - 適用する CSS
|
2216
|
-
*
|
2217
|
-
* @returns 適用された style 要素を返す Promise
|
2218
|
-
*
|
2219
|
-
* @public
|
2220
|
-
*/
|
2221
|
-
async function applyCss(css) {
|
2222
|
-
return new Promise((resolve, reject) => {
|
2223
|
-
const style = document.createElement('style');
|
2224
|
-
style.textContent = css;
|
2225
|
-
const shadowRoot = getActionRoot();
|
2226
|
-
if (!shadowRoot)
|
2227
|
-
return;
|
2228
|
-
shadowRoot.append(style);
|
2229
|
-
style.addEventListener('load', () => resolve(style));
|
2230
|
-
style.addEventListener('error', () => reject(style));
|
2231
|
-
});
|
2232
|
-
}
|
2233
|
-
async function fixFontFaceIssue(href, cssRules) {
|
2234
|
-
const css = new CSSStyleSheet();
|
2235
|
-
// @ts-ignore
|
2236
|
-
await css.replace(cssRules);
|
2237
|
-
const rules = [];
|
2238
|
-
const fixedRules = [];
|
2239
|
-
Array.from(css.cssRules).forEach(cssRule => {
|
2240
|
-
if (cssRule.type !== 5) {
|
2241
|
-
rules.push(cssRule.cssText);
|
2242
|
-
}
|
2243
|
-
// type 5 is @font-face
|
2244
|
-
const split = href.split('/');
|
2245
|
-
const stylePath = split.slice(0, split.length - 1).join('/');
|
2246
|
-
const cssText = cssRule.cssText;
|
2247
|
-
const newCssText = cssText.replace(
|
2248
|
-
// relative paths
|
2249
|
-
/url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
|
2250
|
-
if (cssText === newCssText)
|
2251
|
-
return;
|
2252
|
-
fixedRules.push(newCssText);
|
2253
|
-
});
|
2254
|
-
return [rules.join('\n'), fixedRules.join('\n')];
|
2255
|
-
}
|
2256
|
-
/**
|
2257
|
-
* アクションにグローバルなスタイルを読み込む
|
2258
|
-
*
|
2259
|
-
* @param href - style ファイルのリンク URL
|
2260
|
-
*
|
2261
|
-
* @public
|
2262
|
-
*/
|
2263
|
-
async function loadStyle(href) {
|
2264
|
-
const sr = getActionRoot();
|
2265
|
-
if (!sr)
|
2266
|
-
return;
|
2267
|
-
let cssRules = '';
|
2268
|
-
try {
|
2269
|
-
const res = await fetch(href);
|
2270
|
-
cssRules = await res.text();
|
2271
|
-
}
|
2272
|
-
catch (_) {
|
2273
|
-
// pass
|
2274
|
-
}
|
2275
|
-
if (!cssRules)
|
2276
|
-
return;
|
2277
|
-
// Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
|
2278
|
-
// @see https://stackoverflow.com/a/63717709
|
2279
|
-
const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
|
2280
|
-
const css = new CSSStyleSheet();
|
2281
|
-
// @ts-ignore
|
2282
|
-
await css.replace(rules);
|
2283
|
-
const fontFaceCss = new CSSStyleSheet();
|
2284
|
-
// @ts-ignore
|
2285
|
-
await fontFaceCss.replace(fontFaceRules);
|
2286
|
-
// @ts-ignore
|
2287
|
-
sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
|
2288
|
-
// Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
|
2289
|
-
// @see https://stackoverflow.com/a/63717709
|
2290
|
-
// @ts-ignore
|
2291
|
-
document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
|
2292
|
-
}
|
2293
|
-
// @internal
|
2294
|
-
function getCssVariables(data) {
|
2295
|
-
return Object.entries(data)
|
2296
|
-
.filter(([key, value]) => {
|
2297
|
-
return ['string', 'number'].includes(typeof value) && key.startsWith('--');
|
2298
|
-
})
|
2299
|
-
.map(([key, value]) => `${key}:${value}`)
|
2300
|
-
.join(';');
|
2301
|
-
}
|
2302
|
-
/**
|
2303
|
-
* アクションのルートの DOM 要素を取得する
|
2304
|
-
*
|
2305
|
-
* @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
|
2306
|
-
*
|
2307
|
-
* @public
|
2308
|
-
*/
|
2309
|
-
function getActionRoot() {
|
2310
|
-
const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
|
2311
|
-
if (!root?.shadowRoot) {
|
2312
|
-
return null;
|
2313
|
-
}
|
2314
|
-
return root.shadowRoot;
|
2315
|
-
}
|
2316
|
-
/** @internal */
|
2317
|
-
function ensureActionRoot(useShadow = true) {
|
2318
|
-
const systemConfig = getSystem();
|
2319
|
-
const rootAttrs = {
|
2320
|
-
class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
|
2321
|
-
[`data-${KARTE_ACTION_RID}`]: actionId,
|
2322
|
-
[`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
|
2323
|
-
? systemConfig.shortenId
|
2324
|
-
: ALL_ACTION_SHORTEN_ID,
|
2325
|
-
style: { display: 'block' },
|
2326
|
-
};
|
2327
|
-
let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
|
2328
|
-
if (el == null) {
|
2329
|
-
el = h('div', rootAttrs);
|
2330
|
-
document.body.appendChild(el);
|
2331
|
-
}
|
2332
|
-
const isShadow = !!document.body.attachShadow && useShadow;
|
2333
|
-
if (isShadow) {
|
2334
|
-
return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
|
2335
|
-
}
|
2336
|
-
else {
|
2337
|
-
return el;
|
2338
|
-
}
|
2339
|
-
}
|
2340
|
-
/**
|
2341
|
-
* 非推奨
|
2342
|
-
*
|
2343
|
-
* @deprecated 非推奨
|
2344
|
-
*
|
2345
|
-
* @internal
|
2346
|
-
*/
|
2347
|
-
const show = showAction;
|
2348
|
-
/**
|
2349
|
-
* 非推奨
|
2350
|
-
*
|
2351
|
-
* @deprecated 非推奨
|
2352
|
-
*
|
2353
|
-
* @internal
|
2354
|
-
*/
|
2355
|
-
const close = closeAction;
|
2356
|
-
/**
|
2357
|
-
* 非推奨
|
2358
|
-
*
|
2359
|
-
* @deprecated 非推奨
|
2360
|
-
*
|
2361
|
-
* @internal
|
2362
|
-
*/
|
2363
|
-
const ensureModalRoot = ensureActionRoot;
|
2364
|
-
/**
|
2365
|
-
* 非推奨
|
2366
|
-
*
|
2367
|
-
* @deprecated 非推奨
|
2368
|
-
*
|
2369
|
-
* @internal
|
2370
|
-
*/
|
2371
|
-
function createApp(App, options = {
|
2372
|
-
send: () => { },
|
2373
|
-
publish: () => { },
|
2374
|
-
props: {},
|
2375
|
-
variables: {},
|
2376
|
-
localVariablesQuery: undefined,
|
2377
|
-
context: { api_key: '' },
|
2378
|
-
}) {
|
2379
|
-
let app = null;
|
2380
|
-
const close = () => {
|
2381
|
-
if (app) {
|
2382
|
-
{
|
2383
|
-
// @ts-ignore -- Svelte3 では `unmount` は存在しない
|
2384
|
-
svelte.unmount(app);
|
2385
|
-
}
|
2386
|
-
app = null;
|
2387
|
-
}
|
2388
|
-
};
|
2389
|
-
const appArgs = {
|
2390
|
-
target: null,
|
2391
|
-
props: {
|
2392
|
-
send: options.send,
|
2393
|
-
publish: options.publish,
|
2394
|
-
close,
|
2395
|
-
data: {
|
2396
|
-
...options.props,
|
2397
|
-
...options.variables,
|
2398
|
-
},
|
2399
|
-
},
|
2400
|
-
};
|
2401
|
-
const win = ensureModalRoot(true);
|
2402
|
-
appArgs.target = win;
|
2403
|
-
return {
|
2404
|
-
close,
|
2405
|
-
show: () => {
|
2406
|
-
if (app) {
|
2407
|
-
return;
|
2408
|
-
}
|
2409
|
-
options.send('message_open');
|
2410
|
-
app = // @ts-ignore -- Svelte3 では `mount` は存在しない
|
2411
|
-
svelte.mount(App, appArgs)
|
2412
|
-
;
|
2413
|
-
},
|
2414
|
-
};
|
2415
|
-
}
|
2416
|
-
/**
|
2417
|
-
* 非推奨
|
2418
|
-
*
|
2419
|
-
* @deprecated 非推奨
|
2420
|
-
*
|
2421
|
-
* @internal
|
2422
|
-
*/
|
2423
|
-
function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
|
2424
|
-
const root = ensureModalRoot();
|
2425
|
-
if (root.querySelector('.__krt-fog')) {
|
2426
|
-
return { fog: null, close: () => { } };
|
2427
|
-
}
|
2428
|
-
const fog = document.createElement('div');
|
2429
|
-
fog.className = '__krt-fog';
|
2430
|
-
Object.assign(fog.style, {
|
2431
|
-
position: 'fixed',
|
2432
|
-
left: 0,
|
2433
|
-
top: 0,
|
2434
|
-
width: '100%',
|
2435
|
-
height: '100%',
|
2436
|
-
'z-index': zIndex,
|
2437
|
-
'background-color': color,
|
2438
|
-
opacity,
|
2439
|
-
});
|
2440
|
-
const close = () => {
|
2441
|
-
onclick();
|
2442
|
-
fog.remove();
|
2443
|
-
};
|
2444
|
-
fog.onclick = close;
|
2445
|
-
root.appendChild(fog);
|
2446
|
-
return { fog, close };
|
2447
|
-
}
|
2448
|
-
|
2449
2433
|
const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
|
2450
2434
|
const MAX_LENGTH_FREE_ANSWER = 2000;
|
2451
2435
|
function createAnswerValue(value) {
|