Feature : Intergration Article draggable menu

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;
+}

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);
+            }
+
+        });
+    });
+})();

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':           '<div class="text-arx">Lorem ipsum dolor si amet</div>'
+  #   '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:
   ~

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' 

src/TwigExtension.php

@@ -7,16 +7,21 @@
 use Bolt\Common\Json;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
+use Twig\Environment;
 use Webmozart\PathUtil\Path;
 
 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('<link rel="stylesheet" href="%s">', $settings['draggable_menu']['css']);
+        }
+
+        return $output;
+    }
+
+    private function getPluginIncludes(): string
     {
         $used = $this->articleConfig->getConfig()['plugins'];
         $plugins = collect($this->articleConfig->getPlugins());

templates/article.html.twig

@@ -3,6 +3,16 @@
 
 {% block field %}
 
-    <textarea type="text" name="{{ name }}" id="{{ id }}" class="article-field d-none">{{ value }}</textarea>
+    <div style="display: flex">
+        <div style="flex: auto;">
+            <textarea type="text" name="{{ name }}" id="{{ id }}" class="article-field d-none">{{ value }}</textarea>
+        </div>
+        {% set article_settings = article_settings()|json_decode() %}
+        {% if article_settings.draggable_menu is defined and article_settings.draggable_menu is not empty %}
+            <div class="arx-container arx-container-1 arx-in-blur" style="padding-left:4px;">
+                {% include article_settings.draggable_menu.template %}
+            </div>
+        {% endif %}
+    </div>
 
 {% endblock %}

templates/injector.html.twig

@@ -1,5 +1,12 @@
 <script src="{{ asset('assets/article/article-editor.min.js', 'public') }}"></script>
 <link rel="stylesheet" href="{{ asset('assets/article/css/article-editor.min.css', 'public') }}">
+
+{% set settings = article_settings()|json_decode() %}
+{% if settings.draggable_menu is defined and settings.draggable_menu is not empty %}
+    <link rel="stylesheet" href="{{ asset(settings.draggable_menu.css, 'public') }}">
+    <script src="{{ asset(settings.draggable_menu.js, 'public') }}">
+{% endif %}
+
 {{ article_includes() }}
 <script>
 ArticleEditor.settings = {