diff --git a/assets/article/css/draggable-menu-default.css b/assets/article/css/draggable-menu-default.css new file mode 100644 index 0000000..f78529a --- /dev/null +++ b/assets/article/css/draggable-menu-default.css @@ -0,0 +1,121 @@ +#toolbar::-webkit-scrollbar-track +{ + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; + background-color: #F5F5F5; +} + +#aside-toolbar .draggable-menu::-webkit-scrollbar +{ + width: 6px; + background-color: #F5F5F5; +} + +#aside-toolbar .draggable-menu::-webkit-scrollbar-thumb +{ + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); + background-color: #555; +} + +nav .drop-down { + -webkit-transition: max-height 0.5s; + -moz-transition: max-height 0.5s; + -ms-transition: max-height 0.5s; + -o-transition: max-height 0.5s; + transition: max-height 0.5s; + max-height: 800px; + list-style: none; + margin: 0 auto; + padding: 0; + text-align: center; +} + +.overflow-hidden { + overflow: hidden; +} + +nav .drop-down.closed { + -webkit-transition: max-height 0.5s; + -moz-transition: max-height 0.5s; + -ms-transition: max-height 0.5s; + -o-transition: max-height 0.5s; + transition: max-height 0.5s; + max-height: 35px; + overflow: hidden; +} + +nav .drop-down a { + display: block; + color: #ffffff; +} + +#aside-toolbar .draggable-menu +{ + width: 107px; + overflow-x: visible; + position: relative; + background-color: #4c6e91; + border-radius: 7px; +} + +#aside-toolbar .item-title +{ + flex: none; + font-size: 12px; +} + +#aside-toolbar +{ + top: 125px; +} + +#aside-toolbar .arx-popup-stack-grid +{ + display: block; + background-color: #FFFFFF; + border-radius: 15px; + margin-top: 15px; + margin-bottom: 15px; +} + +#aside-toolbar div.arx-popup-item-container +{ + color: #FFFFFF; +} + +#aside-toolbar div.arx-popup-item-container:hover +{ + color: rgba(0,0,0,.7); +} + + +.draggable-img { + width: 100%; + transition: all .2s ease-in-out; + cursor: pointer; + margin-top: 8px; + margin-bottom: 8px; + position: relative; +} + +.draggable-img:hover { + -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + transform: scale(4, 4); + z-index: 10; + overflow: visible; +} + +.heading-item +{ + width: 100%; + background-color:rgba(0,0,0,.7); + color: #F6E4E5; + border-radius: 5px; + text-align: center; + padding-top: 4px; + padding-bottom: 4px; + font-size: inherit; +} \ No newline at end of file diff --git a/assets/article/js/draggable-menu.js b/assets/article/js/draggable-menu.js new file mode 100644 index 0000000..03d8ffc --- /dev/null +++ b/assets/article/js/draggable-menu.js @@ -0,0 +1,26 @@ +(function() { + // Bind Click event to the drop down navigation button + document.querySelectorAll('.nav-button').forEach(function(navButton) { + navButton.addEventListener('click', function() { + var currentSection = this.parentNode.parentNode; + // Autorise only one draggable section to open up at a time + document.querySelectorAll('.drop-down').forEach(function(dropDown) { + if (dropDown.classList.contains('closed') == false && dropDown != currentSection) { + dropDown.classList.toggle('overflow-hidden'); + dropDown.classList.toggle('closed'); + } + }, null, currentSection); + + var active = this.parentNode.parentNode + if (active.classList.contains('closed')) { + setTimeout(function() { + active.classList.toggle('closed'); + setTimeout(function(){ + active.classList.toggle('overflow-hidden'); + }, 500, active); + }, 500, active); + } + + }); + }); +})(); \ No newline at end of file diff --git a/config/config.yaml b/config/config.yaml index 5d189dd..6580fb4 100644 --- a/config/config.yaml +++ b/config/config.yaml @@ -4,6 +4,8 @@ default: plugins: [ blockcode, buttonlink, definedlinks, inlineformat, reorder, tags, underline ] source: true + # custom: + # css: ['/theme/base-2021/css/tailwind.css', '/assets/article/css/bolt-additions.css'] grid: classname: 'article-grid' columns: 12 @@ -12,8 +14,49 @@ default: '4|8': 'col-4|col-8' '6|6': 'col-6|col-6' '8|4': 'col-8|col-4' + image: thumbnail: 1000×1000×max + # Draggable Menu Example for Tailwindcss + # + # Uncomment these lines to enable draggable settings with some draggable tailwindcss componants + # Override templates folder in 'config/packages/extension_article.yaml' to use your favorite tailwindcss components in draggable menu + # + # + # draggable_menu: + # template: '@draggable/_draggable_menu.twig' + # css: 'assets/article/css/draggable-menu-default.css' + # js: 'assets/article/js/draggable-menu.js' + # + # draggable: + # 'card-01': '@draggable/components/card/_card_01.twig' + # 'card-02': '@draggable/components/card/_card_02.twig' + # 'paragraph': '@draggable/components/general/_paragraph.twig' + # 'text': '
Lorem ipsum dolor si amet
' + # 'heading-large': '@draggable/components/general/_heading_large.twig' + # 'heading-medium': '@draggable/components/general/_heading_medium.twig' + # 'heading-small': '@draggable/components/general/_heading_small.twig' + # 'header-01': '@draggable/components/headers/_header_01.twig' + # 'image': '@draggable/components/general/_image.twig' + # 'embed': '@draggable/components/general/_embed.twig' + # 'video': '@draggable/components/general/_video.twig' + # 'layer': '@draggable/components/design/_layer.twig' + # 'container': '@draggable/components/design/_container.twig' + # 'line': '@draggable/components/general/_line.twig' + # 'quote': '@draggable/components/general/_quote.twig' + # 'code': '@draggable/components/general/_code.twig' + # 'hero-01': '@draggable/components/heros/_hero_01.twig' + # 'features-01': '@draggable/components/features/_features_01.twig' + # 'testimonial-01': '@draggable/components/testimonials/_testimonial_01.twig' + # 'pricing-01': '@draggable/components/pricing/_pricing_01.twig' + # 'flex-03': '@draggable/components/design/_flex_03.twig' + # 'flex-02': '@draggable/components/design/_flex_02.twig' + # 'flex-04': '@draggable/components/design/_flex_04.twig' + # 'grid-01': '@draggable/components/design/_grid_01.twig' + # 'grid-02': '@draggable/components/design/_grid_02.twig' + # 'grid-03': '@draggable/components/design/_grid_03.twig' + # 'grid-04': '@draggable/components/design/_grid_04.twig' + plugins: ~ diff --git a/config/services.yaml b/config/services.yaml index ee373b5..866cfc9 100644 --- a/config/services.yaml +++ b/config/services.yaml @@ -23,3 +23,8 @@ doctrine: dir: '%kernel.project_dir%/vendor/bolt/article/src/Entity' prefix: 'Bolt\Article' alias: Article + +twig: + paths: + # '%kernel.project_dir%/my-templates-folder/': 'draggable' + '%kernel.project_dir%/vendor/bolt/article/templates/tailwindcss': 'draggable' \ No newline at end of file diff --git a/src/TwigExtension.php b/src/TwigExtension.php index d35383f..46fc762 100644 --- a/src/TwigExtension.php +++ b/src/TwigExtension.php @@ -7,6 +7,7 @@ use Bolt\Common\Json; use Twig\Extension\AbstractExtension; use Twig\TwigFunction; +use Twig\Environment; use Webmozart\PathUtil\Path; class TwigExtension extends AbstractExtension @@ -14,9 +15,13 @@ class TwigExtension extends AbstractExtension /** @var ArticleConfig */ private $articleConfig; - public function __construct(ArticleConfig $articleConfig) + /** @var Environment */ + private $twig; + + public function __construct(ArticleConfig $articleConfig, Environment $twig) { $this->articleConfig = $articleConfig; + $this->twig = $twig; } public function getFunctions(): array @@ -35,10 +40,38 @@ public function articleSettings(): string { $settings = $this->articleConfig->getConfig(); + if(array_key_exists('draggable', $settings)) { + $loader = $this->twig->getLoader(); + foreach ($settings['draggable'] as $key => $component) { + if ($loader->exists($component)) { + $settings['draggable'][$key] = $this->twig->render($component); + } + } + } + return Json::json_encode($settings, JSON_HEX_QUOT | JSON_HEX_APOS); } public function articleIncludes(): string + { + $output = $this->getPluginIncludes(); + $output .= sprintf($output, $this->getSettingsIncludes()); + + return $output; + } + + private function getSettingsIncludes(): string { + $output = ''; + $settings = $this->articleConfig->getConfig(); + + if(array_key_exists('draggable_menu', $settings)) { + $output .= sprintf('', $settings['draggable_menu']['css']); + } + + return $output; + } + + private function getPluginIncludes(): string { $used = $this->articleConfig->getConfig()['plugins']; $plugins = collect($this->articleConfig->getPlugins()); diff --git a/templates/article.html.twig b/templates/article.html.twig index 8bf2666..9c3668d 100644 --- a/templates/article.html.twig +++ b/templates/article.html.twig @@ -3,6 +3,16 @@ {% block field %} - +
+
+ +
+ {% set article_settings = article_settings()|json_decode() %} + {% if article_settings.draggable_menu is defined and article_settings.draggable_menu is not empty %} +
+ {% include article_settings.draggable_menu.template %} +
+ {% endif %} +
{% endblock %} diff --git a/templates/injector.html.twig b/templates/injector.html.twig index e091be0..09048c1 100644 --- a/templates/injector.html.twig +++ b/templates/injector.html.twig @@ -1,5 +1,12 @@ + +{% set settings = article_settings()|json_decode() %} +{% if settings.draggable_menu is defined and settings.draggable_menu is not empty %} + +