diff --git a/core/frontend/src/cards/css/toggle.css b/core/frontend/src/cards/css/toggle.css new file mode 100644 index 0000000000..6a6a08ecb0 --- /dev/null +++ b/core/frontend/src/cards/css/toggle.css @@ -0,0 +1,34 @@ +.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{ + visibility: hidden; + height: 0; + padding: 0; +} + +.kg-toggle-card[data-kg-toggle-state="close"] svg { + transform: rotate(-90deg); +} + +.kg-toggle-card { + background: #f1f3f4; + border-radius: 3px; +} + +.kg-toggle-heading { + font-weight: bold; + cursor: pointer; + display: flex; + padding: 16px 24px 12px 24px; +} + +.kg-toggle-heading svg { + width: 12px; +} + +.kg-toggle-heading .kg-toggle-heading-text { + margin-left: 12px; +} + +.kg-toggle-content { + display: flex; + padding: 0 24px 16px 24px; +} diff --git a/core/frontend/src/cards/js/toggle.js b/core/frontend/src/cards/js/toggle.js new file mode 100644 index 0000000000..c154ffa045 --- /dev/null +++ b/core/frontend/src/cards/js/toggle.js @@ -0,0 +1,16 @@ +const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading"); + +const toggleFn = function(event) { + const targetElement = event.target; + const parentElement = targetElement.closest('.kg-toggle-card'); + var toggleState = parentElement.getAttribute("data-kg-toggle-state"); + if (toggleState === 'close') { + parentElement.setAttribute('data-kg-toggle-state', 'open'); + } else { + parentElement.setAttribute('data-kg-toggle-state', 'close'); + } +}; + +for (let i = 0; i < toggleHeadingElements.length; i++) { + toggleHeadingElements[i].addEventListener('click', toggleFn, false); +} diff --git a/package.json b/package.json index d5e0b55cc6..2384b3b238 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@tryghost/job-manager": "0.8.12", "@tryghost/kg-card-factory": "3.1.0", "@tryghost/kg-default-atoms": "3.1.0", - "@tryghost/kg-default-cards": "5.6.0", + "@tryghost/kg-default-cards": "5.6.1", "@tryghost/kg-markdown-html-renderer": "5.1.0", "@tryghost/kg-mobiledoc-html-renderer": "5.2.0", "@tryghost/limit-service": "1.0.0", @@ -173,7 +173,7 @@ "xml": "1.0.1" }, "optionalDependencies": { - "@tryghost/html-to-mobiledoc": "1.2.2", + "@tryghost/html-to-mobiledoc": "1.2.3", "sqlite3": "5.0.2" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 3efd7418b9..946d657c62 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1415,12 +1415,12 @@ dependencies: lodash-es "^4.17.11" -"@tryghost/html-to-mobiledoc@1.2.2": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@tryghost/html-to-mobiledoc/-/html-to-mobiledoc-1.2.2.tgz#a25dce21afdf01e288222b4a6eec8389abff32b1" - integrity sha512-yMWPmhTAaEyo6/OHuJ9R7eqOkaX1A38LfXxVkFWtn9wIbIH1wrAnMzyfBhnONMXDo+kahX4Go+dNVlxM7R2NIQ== +"@tryghost/html-to-mobiledoc@1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@tryghost/html-to-mobiledoc/-/html-to-mobiledoc-1.2.3.tgz#ad716cf23397484451301a1cad78a065fcd20595" + integrity sha512-JB4a3LRxuC7m+svQSyOQFHalu8cQfuoibW+JUpjYqEFvxKYx0O9hvGdvPzfmS7cVncOTZKrNAyvBXWVroZtnVw== dependencies: - "@tryghost/kg-parser-plugins" "2.4.2" + "@tryghost/kg-parser-plugins" "2.4.4" "@tryghost/mobiledoc-kit" "^0.12.4-ghost.1" jsdom "^16.5.3" @@ -1459,20 +1459,20 @@ resolved "https://registry.yarnpkg.com/@tryghost/kg-card-factory/-/kg-card-factory-3.1.0.tgz#2a135754fabafa32074e6cddb28de0cc3a8d7e7d" integrity sha512-Y52DqAM/BahMumbX39mBwaSHJTyx/mwIsFVDNCNg0XBoM2ZqHjHLefNBEsUTdocP8LPpK4HYSOxKVugQOBAACA== -"@tryghost/kg-clean-basic-html@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@tryghost/kg-clean-basic-html/-/kg-clean-basic-html-2.1.1.tgz#1d58dec9682f3e462b4d180a7c7f63b3c737263c" - integrity sha512-KKGvn2S3AVfs/BdWDcAeD24ApkFTrV5fi3PuLqf0Je/uOHgaxkJDEXbvSCCRDkBQiCOfbOC2gXheZafMAXuFkw== +"@tryghost/kg-clean-basic-html@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@tryghost/kg-clean-basic-html/-/kg-clean-basic-html-2.1.2.tgz#a9a6df5f5fb62646f645280a002f0920861fab8b" + integrity sha512-cvLtJKh9/2uKXZxDIcQMhXTWQN5Lv9qeORUB4zkfJBSvCPmdck28VJMHWdYHhogf/7846v1nkQKIODTBWkSpzg== "@tryghost/kg-default-atoms@3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@tryghost/kg-default-atoms/-/kg-default-atoms-3.1.0.tgz#4daff7104c1f261b1b816dd75ae4104009f9c1e6" integrity sha512-FfROzVgqJWqJ7cVdS9dcALz7rnzNfV8zcrymAJrDTHDsqzAdMfSLe1tNQRm8zas9pyZLsD8zBGmLxG9dr4WFSA== -"@tryghost/kg-default-cards@5.6.0": - version "5.6.0" - resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.6.0.tgz#94a88a9f5a4942d7f50f8dfba0a3f8537cbc92e4" - integrity sha512-LigN8VAs9qMKk+Xr00nniUe2MM0RH+KlJp9k0mJGubTd96Sr5/78veJ29LdH9uCnFZWTwRuq8VMhO/P6mDjPNA== +"@tryghost/kg-default-cards@5.6.1": + version "5.6.1" + resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.6.1.tgz#c2c181d65e71143531dcf8bc595d8cf57a46ffbf" + integrity sha512-js1kElw83RZVVQ0EqT2aApCjmJj3OEGDMFnpwo3NkMARGBwTba/cQzTsjiJkFtOM7Ex3Va+GPQPDhsWK2bouvg== dependencies: "@tryghost/kg-markdown-html-renderer" "^5.1.0" "@tryghost/url-utils" "^2.0.0" @@ -1500,12 +1500,12 @@ semver "^7.3.4" simple-dom "^1.4.0" -"@tryghost/kg-parser-plugins@2.4.2": - version "2.4.2" - resolved "https://registry.yarnpkg.com/@tryghost/kg-parser-plugins/-/kg-parser-plugins-2.4.2.tgz#6590fe43e1d0d0715e56753c52dd6d69134b9326" - integrity sha512-V8PGdeX5lXrLnwEod+ih7k7dAKKAfvnuyaIavxgcmDLegjm0auHNDZogl9VljlSKQj7LaYRDO7I2bp4+Gv7Giw== +"@tryghost/kg-parser-plugins@2.4.4": + version "2.4.4" + resolved "https://registry.yarnpkg.com/@tryghost/kg-parser-plugins/-/kg-parser-plugins-2.4.4.tgz#a1a7e9e93316c14d49e75770c5db08e056cad826" + integrity sha512-WVQMMJXPdIoDFvPNxqxgPJgEVK1WqgChW8gmcQJMDCoWcNrT4FPAVFdXRAhMxk40Ty64DldOtNqc+Qpn2orexg== dependencies: - "@tryghost/kg-clean-basic-html" "^2.1.1" + "@tryghost/kg-clean-basic-html" "^2.1.2" "@tryghost/limit-service@1.0.0": version "1.0.0"