From f6fc56d303296fb7c6c9f035d85189d3a886f9ae Mon Sep 17 00:00:00 2001 From: Joshua Pease Date: Wed, 13 Dec 2023 11:55:40 -0800 Subject: [PATCH] [#72] Remove asset bundle. Inline edit button css --- src/Bundle.php | 32 ---- src/Module.php | 20 +- src/resources/css/parts-kit.css | 231 ----------------------- src/resources/css/style.css | 13 -- src/resources/icons/caret.svg | 3 - src/resources/icons/close-circle.svg | 4 - src/resources/icons/pk-component.svg | 1 - src/resources/icons/pk-expand.svg | 1 - src/resources/icons/pk-sidebar.svg | 1 - src/resources/icons/search.svg | 1 - src/resources/js/parts-kit.js | 267 --------------------------- 11 files changed, 13 insertions(+), 561 deletions(-) delete mode 100644 src/Bundle.php delete mode 100644 src/resources/css/parts-kit.css delete mode 100644 src/resources/css/style.css delete mode 100644 src/resources/icons/caret.svg delete mode 100644 src/resources/icons/close-circle.svg delete mode 100644 src/resources/icons/pk-component.svg delete mode 100644 src/resources/icons/pk-expand.svg delete mode 100644 src/resources/icons/pk-sidebar.svg delete mode 100644 src/resources/icons/search.svg delete mode 100644 src/resources/js/parts-kit.js diff --git a/src/Bundle.php b/src/Bundle.php deleted file mode 100644 index a943f38..0000000 --- a/src/Bundle.php +++ /dev/null @@ -1,32 +0,0 @@ -sourcePath = '@viget/base/resources'; - - $css = [ - 'css/style.css' - ]; - - // Is this a parts kit request - if (PartsKit::isRequest()) { - $css[] = 'css/parts-kit.css'; - - $this->js = [ - 'js/parts-kit.js', - ]; - } - - $this->css = $css; - - parent::init(); - } -} diff --git a/src/Module.php b/src/Module.php index c31a541..9037916 100644 --- a/src/Module.php +++ b/src/Module.php @@ -7,8 +7,6 @@ use yii\base\Event; use craft\events\RegisterCpNavItemsEvent; use craft\events\RegisterTemplateRootsEvent; -use craft\events\RegisterUrlRulesEvent; -use craft\web\UrlManager; use craft\web\twig\variables\Cp; use craft\web\View; use craft\web\twig\variables\CraftVariable; @@ -52,10 +50,6 @@ public function bootstrap($app) $this->_bindEvents(); Craft::$app->view->registerTwigExtension(new Extension()); - - if (!Craft::$app->request->getIsAjax() && !Craft::$app->request->getIsConsoleRequest()) { - Craft::$app->view->registerAssetBundle(Bundle::class); - } } if (Craft::$app->request->getIsCpRequest()) { @@ -141,7 +135,19 @@ static function (Event $e) { echo ' diff --git a/src/resources/css/parts-kit.css b/src/resources/css/parts-kit.css deleted file mode 100644 index b124568..0000000 --- a/src/resources/css/parts-kit.css +++ /dev/null @@ -1,231 +0,0 @@ -.parts-kit { - background: var(--pk-background); - display: flex; -} - -.parts-kit__sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.parts-kit__button { - background: none; - border: none; - box-sizing: border-box; - color: inherit; - cursor: pointer; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - line-height: inherit; - margin: 0; - padding: 0; - text-transform: inherit; -} - -/* Sidebar */ -.parts-kit__sidebar { - background: var(--pk-background); - box-sizing: border-box; - color: var(--pk-text); - flex-shrink: 0; - font-family: BlinkMacSystemFont, sans-serif; - height: 100vh; - overflow-y: auto; - padding: 2rem 0 .75rem; - position: sticky; - top: 0; - width: 210px; -} - -.parts-kit__sidebar.hidden { - display: none; -} - -.parts-kit__sidebar.hidden + .parts-kit__main { - margin-right: 0; -} - -.parts-kit__sidebar * { - font: inherit; - font-size: 100%; - margin: 0; - padding: 0; -} - -.parts-kit__sidebar *, -.parts-kit__sidebar *:before, -.parts-kit__sidebar *:after { - box-sizing: inherit; -} - -.parts-kit__sidebar ol { - list-style: none; -} - -.parts-kit__sidebar .flex { - align-items: flex-start; - display: flex; -} -/* Search */ -.parts-kit__search { - margin-bottom: 8px; - padding: 0 18px; - position: relative; -} - -.parts-kit__search-icon { - border-color: var(--pk-text); - bottom: 0; - fill: none; - height: 16px; - left: 18px; - margin: auto 0; - opacity: .5; - position: absolute; - top: -2px; - width: 16px; -} - -.parts-kit__search-input { - appearance: none; - background: transparent; - border-bottom: 1px solid currentColor; - border: none; - color: var(--pk-text); - display: block; - font-size: .875rem; - opacity: .5; - padding: 4px 4px 4px 20px; - width: 100%; -} - - .parts-kit__search-input:focus { - border-color: var(--pk-nav-subitem-background-active); - opacity: .8; - } - - .parts-kit__search-input:focus + .parts-kit__search-icon { - color: var(--pk-nav-subitem-background-active); - opacity: 1; - } - -.parts-kit__search-input::placeholder { - color: currentColor; -} - -/* Nav */ -.parts-kit__nav { - font-size: .875rem; -} - -.parts-kit__nav-button { - padding: .25rem; - text-align: left; - width: 100%; -} - -.parts-kit__nav-button:hover { - background-color: var(--pk-nav-item-background-hover); - color: var(--pk-nav-item-text-hover); -} - -.parts-kit__nav-caret, -.parts-kit__nav-component, -.parts-kit__nav-story { - display: block; - fill: var(--pk-nav-icon); - flex-shrink: 0; - margin-right: .25rem; - margin-top: .375rem; - width: .625rem; -} - -.parts-kit__nav-caret { - transform: rotate(180deg); -} - -.parts-kit__nav-sub-items[data-togglee] { - opacity: 1; - transition: all .15s; - visibility: visible; -} - -.parts-kit__nav-sub-items.collapsed { - max-height: 0!important; - opacity: 0; - overflow: hidden; - visibility: hidden; -} - -.parts-kit__nav-sub-items a { - color: inherit; - display: block; - font-size: .875rem; - padding: .25rem 1.5rem; - text-decoration: none; -} - -.parts-kit__nav-sub-items a:hover { - background-color: var(--pk-nav-subitem-background-hover); - color: var(--pk-nav-subitem-text-hover); -} - -.parts-kit__nav-sub-items a.active { - background: var(--pk-nav-subitem-background-active); - color: var(--pk-nav-subitem-text-active); -} - -.parts-kit__nav-sub-items a.active .parts-kit__nav-story { - fill: currentColor; -} - -/* Search state */ -.search-active .parts-kit__nav > li:not(.in-search), -.search-active .parts-kit__nav-sub-items > li:not(.in-search) { - display: none; -} - -/* Main Container */ -.parts-kit__main { - flex-grow: 1; - margin-right: .5rem; - min-height: 100vh; - min-width: 0; - padding: .5rem 0; -} - -.parts-kit__main-header { - border-bottom: 1px solid var(--pk-controls-border); - color: var(--pk-controls-text); - display: flex; - justify-content: flex-end; - padding: .375rem .75rem; -} - -.parts-kit__main-header button.hidden { - display: none; -} - -.parts-kit__main-header svg { - display: block; - fill: currentColor; - width: 1rem; -} - -.parts-kit__main-wrapper { - background: var(--pk-main-background); - border-radius: .25rem; - box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25); - height: auto; -} - -.parts-kit__main-container { - position: relative; -} diff --git a/src/resources/css/style.css b/src/resources/css/style.css deleted file mode 100644 index 7ba6193..0000000 --- a/src/resources/css/style.css +++ /dev/null @@ -1,13 +0,0 @@ -.edit-entry { - background: #e5422b; - border-top-right-radius: 5px; - bottom: 0; - color: #fff; - font-size: 14px; - left: 0; - line-height: 1; - padding: 10px; - position: fixed; - text-decoration: none; - z-index: 10; -} diff --git a/src/resources/icons/caret.svg b/src/resources/icons/caret.svg deleted file mode 100644 index 72b5cd8..0000000 --- a/src/resources/icons/caret.svg +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/resources/icons/close-circle.svg b/src/resources/icons/close-circle.svg deleted file mode 100644 index 6ccbc4b..0000000 --- a/src/resources/icons/close-circle.svg +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/src/resources/icons/pk-component.svg b/src/resources/icons/pk-component.svg deleted file mode 100644 index 598a247..0000000 --- a/src/resources/icons/pk-component.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/resources/icons/pk-expand.svg b/src/resources/icons/pk-expand.svg deleted file mode 100644 index d6ce0a9..0000000 --- a/src/resources/icons/pk-expand.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/resources/icons/pk-sidebar.svg b/src/resources/icons/pk-sidebar.svg deleted file mode 100644 index 0f296eb..0000000 --- a/src/resources/icons/pk-sidebar.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/resources/icons/search.svg b/src/resources/icons/search.svg deleted file mode 100644 index e13262e..0000000 --- a/src/resources/icons/search.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/resources/js/parts-kit.js b/src/resources/js/parts-kit.js deleted file mode 100644 index 3c3498d..0000000 --- a/src/resources/js/parts-kit.js +++ /dev/null @@ -1,267 +0,0 @@ -// Slide class for animating hiding/showing -class Slide { - constructor(el, collapsedClass = "collapsed") { - this.el = el; - this.collapsedClass = collapsedClass; - this.resetHeight = this.resetHeight.bind(this); - } - - toggle() { - this.change("toggle"); - } - - open() { - this.change("remove"); - } - - close() { - this.change("add"); - } - - change(method) { - this.el.addEventListener("transitionend", this.resetHeight, false); - this.el.style.maxHeight = this.el.scrollHeight + "px"; - this.el.style.overflow = "hidden"; - - // Wait a tick so height has applied - requestAnimationFrame(() => { - requestAnimationFrame(() => { - this.el.classList[method](this.collapsedClass); - }); - }); - } - - resetHeight(e) { - if (e.target === this.el) { - this.el.style.overflow = ""; - this.el.style.maxHeight = "none"; - this.el.removeEventListener( - "transitionend", - this.resetHeight, - false - ); - } - } -} - -// Toggle class for sidebar navigation -// Initialized in our PartsKit class -class Toggle { - constructor(el) { - this.el = el; - this.config = { - onOpen: null, - onClose: null, - onToggle: null, - }; - - this.setVars(); - this.bindEvents(); - } - - setVars() { - this.togglers = this.el.querySelectorAll("[aria-controls]"); - this.toggleeEl = this.el.querySelector("[data-togglee]") || this.el; - this.toggleeClass = this.toggleeEl.getAttribute("data-togglee"); - this.togglee = this.toggleeClass - ? new Slide(this.toggleeEl, this.toggleeClass) - : new Slide(this.toggleeEl); - - this.isOpen = - this.togglers.length && - this.togglers[0].getAttribute("aria-expanded") === "true"; - } - - bindEvents() { - this.togglers.forEach((el) => - el.addEventListener("click", this.handleToggleClick) - ); - } - - handleToggleClick = () => { - if (this.isOpen) { - this.close(); - } else { - this.open(); - } - - this.callback("onToggle"); - }; - - close = () => { - if(!this.isOpen) return; - this.isOpen = false; - this.togglee.close(); - this.togglers.forEach((el) => - el.setAttribute("aria-expanded", "false") - ); - this.el.removeAttribute("open"); - - this.callback("onClose"); - }; - - open = () => { - if(this.isOpen) return; - this.isOpen = true; - this.togglee.open(); - this.togglers.forEach((el) => el.setAttribute("aria-expanded", "true")); - this.el.setAttribute("open", "true"); - - this.callback("onOpen"); - }; - - callback(prop) { - typeof this.config[prop] === "function" && this.config[prop](); - } - - handleKeydown = ({ key }) => { - if (this.isOpen && key === "Escape") { - this.close(); - } - }; -} - -// Parts kit class for expanding/collapsing sidebar -class PartsKit { - constructor(el) { - this.el = el; - this.setVars(); - this.bindEvents(); - this.initSidebar(); - } - - setVars() { - this.sidebar = this.el.querySelector("[data-sidebar]"); - this.lsSidebar = "pk-sidebar-hidden"; - this.fullscreenExpandBtn = this.el.querySelector( - "[data-fullscreen-expand]" - ); - this.fullscreenCloseBtn = this.el.querySelector( - "[data-fullscreen-close]" - ); - - // Set up toggle classes - const toggleElements = document.querySelectorAll("[data-parts-kit-toggle]"); - this.toggles = [...toggleElements].map(el => new Toggle(el)); - - /** @type {HTMLInputElement} */ - this.sidebarSearch = this.el.querySelector("[data-sidebar-search]"); - /** @type {NodeListOf} */ - this.sectionItems = this.el.querySelectorAll("[data-section-item]"); - this.searchList = [...this.sectionItems].map(el => { - const toggleEl = el.closest("[data-parts-kit-toggle]"); - return { - el, - searchText: el.getAttribute('data-search-text')?.toLowerCase(), - toggleEl, - toggle: this.toggles.find(x => x.el === toggleEl) - } - }); - } - - bindEvents() { - document.addEventListener("keydown", this.handleKeydown); - this.fullscreenExpandBtn.addEventListener("click", this.toggleSidebar); - this.fullscreenCloseBtn.addEventListener("click", this.toggleSidebar); - this.sidebarSearch.addEventListener("input", this.handleSearchInput); - this.sidebarSearch.addEventListener("focus", ({target}) => { - target.setAttribute('data-blur-placeholder', target.getAttribute('placeholder')) - target.setAttribute('placeholder', target.getAttribute('data-focus-placeholder')) - }) - this.sidebarSearch.addEventListener("blur", ({target}) => { - target.setAttribute('placeholder', target.getAttribute('data-blur-placeholder')) - }) - } - - hasUserInput = () => document.activeElement.tagName === 'INPUT' - - handleKeydown = ({key, metaKey, ctrlKey}) => { - const hasModifier = metaKey || ctrlKey - - // Short circuit if a user is typing in an input or pressing a modifying key - if (this.hasUserInput() || hasModifier) { - return; - } - - if (['f', 'Escape'].includes(key)) { - this.toggleSidebar(); - } - - if (key === "/") { - this.focusOnSearch(); - } - }; - - focusOnSearch() { - if(this.sidebar.classList.contains("hidden")) { - this.toggleSidebar(); - } - - // Wait for sidebar to show. Prevents typing / in the search input - requestAnimationFrame(() => { - this.sidebarSearch.focus(); - }) - } - - handleSearchInput = (e) => { - this.doSearch(this.sidebarSearch.value); - } - - clearSearch() { - this.sidebar.classList.remove("search-active") - this.searchList.forEach(item => { - item.el.classList.remove("in-search") - item.toggleEl.classList.remove("in-search") - - if (item.toggleEl.hasAttribute('data-active-section')) { - item.toggle.open(); - } else { - item.toggle.close() - } - }); - } - - /** - * - * @param {String} searchText - */ - doSearch(searchText) { - const formattedText = searchText.trim().toLowerCase(); - - this.clearSearch() - - if(!formattedText) { - return; - } - - this.sidebar.classList.add("search-active"); - - const searchResults = this.searchList - .filter(x => x.searchText.includes(searchText)); - - searchResults.forEach(item => { - item.el.classList.add("in-search"); - item.toggleEl.classList.add("in-search"); - item.toggle.open(); - }) - } - - initSidebar() { - const isHidden = localStorage.getItem(this.lsSidebar) === "true"; - this.sidebar.classList.toggle("hidden", isHidden); - this.fullscreenExpandBtn.classList.toggle("hidden", isHidden); - this.fullscreenCloseBtn.classList.toggle("hidden", !isHidden); - } - - toggleSidebar = () => { - const isHidden = this.sidebar.classList.toggle("hidden"); - this.fullscreenExpandBtn.classList.toggle("hidden"); - this.fullscreenCloseBtn.classList.toggle("hidden"); - - localStorage.setItem(this.lsSidebar, isHidden); - }; -} - -// Init the parts kit class -const partsKitEl = document.querySelector("[data-parts-kit]"); -new PartsKit(partsKitEl);