fix

tests/cheatsheet.php

@@ -194,12 +194,12 @@ $APPLICATION->ShowHead();
     </div>
 
 
+    <h2>Modals</h2>
     <div class="d-flex justify-content-between flex-wrap">
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
             Vertically centered scrollable modal
         </button>
     </div>
-
     <?
     service()->templater()->render('kit:modal', [
         'ID' => 'exampleModalCenteredScrollable',
@@ -210,8 +210,22 @@ $APPLICATION->ShowHead();
         'FOOTER' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     <button type="button" class="btn btn-primary">Save changes</button>',
     ]);
-
     ?>
+
+
+
+    <h2>Inputs</h2>
+    <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'color',
+                'HINT' => 'color picker by xu-ui',
+                'NAME' => 'color',
+                'VALUE' => '',
+                'LABEL' => 'color',
+            ]); ?>
+        </div>
+    </div>
     <div class="flex-list" style="--col-count: 3">
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
@@ -420,6 +434,8 @@ $APPLICATION->ShowHead();
         </div>
     </div>
 
+
+    <h2>Buttons</h2>
     <div class="flex-list" style="--col-count: 7;">
         <div class="flex-list-item"></div>
         <div class="flex-list-item">bordered</div>
@@ -475,6 +491,62 @@ $APPLICATION->ShowHead();
 
 
 
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'test ',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
 
 
 

tests/menu.php

@@ -0,0 +1,303 @@
+<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
+<?
+if(\Bitrix\Main\Loader::includeModule('wt.core')) {
+    app()->service()->assets()->setPlugins([
+        'kit:config',
+        'kit:flex-kit',
+        'kit:core',
+        'kit:bsCore',
+        'kit:collapse',
+        'kit:site',
+        'kit:toolkit',
+        'kit:theme',
+    ])->render();
+}
+$APPLICATION->ShowHead();
+?>
+
+<style  type="text/css">
+    .chat-message {
+        border: 1px solid;
+    }
+    .chat-message--manager-item {
+        min-width: 55px;
+        align-self: flex-start;
+        background: aliceblue;
+    }
+    .chat-message--manager-item-menu {
+        cursor: pointer;
+    }
+
+</style>
+
+<body>
+    <div class="kit-wrapper" style="background: beige; --width-wrapper: 800px;">
+        <div class="flex-col">
+
+
+
+            <div class="chat-message      flex-line flex-box-fill flex-aspect-ratio" id="chat-message-13">
+                <div class="chat-message--manager-item">
+                    <div>13</div>
+                </div>
+                <div class="flex-cell-aspect-auto">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                    </div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div class="chat-message--manager-item-menu">|||</div>
+                </div>
+            </div>
+
+
+
+            <div class="chat-message      flex-line flex-box-fill flex-aspect-ratio" id="chat-message-14">
+                <div class="chat-message--manager-item">
+                    <div>14</div>
+                </div>
+                <div class="flex-cell-aspect-auto">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                    </div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div>Q</div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div class="chat-message--manager-item-menu">|||</div>
+                </div>
+            </div>
+
+
+
+
+            <div class="chat-message      flex-line flex-box-fill flex-aspect-ratio" id="chat-message-15">
+                <div class="chat-message--manager-item">
+                    <div>15</div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div id="change-context-menu-r" style="font-size: 40px">R</div>
+                </div>
+                <div class="flex-cell-aspect-auto">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut fugiat inventore, modi provident quia repellendus saepe sed sequi sit, tempora veritatis voluptas. Architecto corporis dicta minus necessitatibus similique voluptates?
+                    </div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div>Q</div>
+                </div>
+                <div class="chat-message--manager-item">
+                    <div id="change-context-menu-x" class="chat-message--manager-item-menu"><span style="
+                        font-size: 10px;
+                        text-align: center;
+                        color: red;
+                        font-weight: bold;
+                        ">click me</span></div>
+                </div>
+            </div>
+
+
+
+
+
+        </div>
+    </div>
+
+<script>
+kit.ready(['menu', 'animations'], function () {
+
+
+
+    console.log('menu init');
+    /**
+     *
+     * тут управление
+     *
+     * схема: menu - item
+     *
+     * возможность создавать меню через классы и через options
+     *
+     * для итема можно использовать слудующие колбеки:
+     * - click
+     * - dblclick
+     * аргументы:
+     * event - текущее событие,
+     * menuItem - объект итема,
+     * menu - объект меню в котором лежит итем
+     *
+     *
+     *
+     *
+     */
+    window.i = 0;
+    window.otherMenu = function() {
+        window.i++;
+        if(window.i > 20) {
+            return null;
+        }
+        var menu;
+        menu = kit.menu.getInstance({
+            alignOffset: [0, 5],
+            eventType: 'click',
+        }, [
+            {
+                label: 'еще (' + window.i + ')',
+                click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+                child: otherMenu()
+            }
+        ]);
+        menu.addItem({
+            label: '<b>деф</b> колбек',
+            href: window.location.href
+        });
+
+        //menu.init();
+        return menu;
+    };
+
+
+
+    window.menuBuilder = (function(){
+        console.log('menuBuilder');
+        window.menuBase = null;
+
+        var menuBase = new kit.menu.Class();
+        menuBase.setOptions({
+            animation: kit.animations.scaleIn,
+            alignOffset: [5, 5],
+            hideDelay: 1000,
+            parent: '#chat-message-15 .chat-message--manager-item-menu',
+            /**
+             * доступно 2 режима click / hover,
+             * понимать так: данное меню появляется по Клику на родитя (по дефолту hover)
+             */
+            eventType: 'click',
+        });
+
+        /**
+         * тут построение дерева через options
+         */
+        menuBase.addItem({
+            label: 'create by options - child: [{}, {}]',
+            click: function(e, menuItem, menu) {console.log('клик by ' + menuItem.options.label);},
+            child: [
+                {
+                    label: 'example',
+                    child: [
+                        {
+                            label: 'LVL 3',
+                            click: function(e, menuItem, menu) {console.log('клик by ' + menuItem.options.label);},
+                        },
+                        {
+                            label: 'LVL 3 (+)',
+                            click: function(e, menuItem, menu) {console.log('клик by ' + menuItem.options.label);},
+                        }
+                    ],
+                },
+                {
+                    label: 'Малява',
+                    click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+                }
+            ],
+        });
+
+        /**
+         * тут в child отдаем класс Menu
+         */
+        menuBase.addItem({
+            label: 'открыть по клику',
+            click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+            child: otherMenu(),
+        });
+
+
+        menuBase.addItem({
+            label: 'Игнор',
+            click: function(e, menuItem) {console.log('клик by ' + menuItem.options.label);},
+        });
+
+        /**
+         * пример
+         * по клику на себя инкримент (инк лежит в самом классе итема)
+         */
+        menuBase.addItem({
+            label: 'change label',
+            sort: 5,
+            click: function(e, menuItem, menu) {
+                console.log('клик by ' + menuItem.options.label);
+                !menuItem.customToggle && (menuItem.customToggle = 0);
+                menuItem.setLabel('change label (' + (++menuItem.customToggle) + ')');
+            },
+        });
+        /**
+         * пример
+         * добавить на лету итем с колбеком по клику удаляющий себя
+         */
+        window.i = 0;
+        menuBase.addItem({
+            label: 'Добавить сюда меню',
+            click: function(e, menuItem, menu) {
+                console.log('клик by ' + menuItem.options.label);
+                console.log(menu);
+                menu.addItem({
+                    label: '--- remove me (' + (++window.i) + ') ---',
+                    sort: 4000,
+                    click: function(e, menuItem, menu) {
+                        console.log('клик by ' + menuItem.options.label);
+                        menuItem.remove();
+                    },
+                });
+                menu.reInit();
+            },
+        });
+        /**
+         * пример
+         * переселяем меню к другому родителю
+         */
+            // var item1 = new menuBase.MenuItem(menuBase.id);
+            // item1.setLabel()
+            // var item2 = new menuBase.MenuItem(menuBase.id);
+        var item1 = menuBase.addItem({
+
+                label: 'меняем предка на R',
+                click: function(e, menuItem, menu) {
+                    console.log('клик by ' + menuItem.options.label);
+                    menu.setParent(document.querySelector('#change-context-menu-r'));
+                    menuItem.setVisible(false);
+                    var tMenu = menu.getItemById(item2.getId());
+                    if(tMenu) {
+                        tMenu.setVisible(true);
+                    }
+                    // kit.menu.reInitAllMenu();
+                    // todo перерасчет только внутренних меню
+                },
+            }, true);
+        var item2 = menuBase.addItem({
+            label: 'меняем предка на X',
+            visible: false,
+            click: function(e, menuItem, menu) {
+                console.log('клик by ' + menuItem.options.label);
+                menu.setParent(document.querySelector('#change-context-menu-x'));
+                menuItem.setVisible(false);
+                var tMenu = menu.getItemById(item1.getId());
+                if(tMenu) {
+                    tMenu.setVisible(true);
+                }
+                // kit.menu.reInitAllMenu();
+            },
+        }, true);
+
+        menuBase.init();
+
+    });
+
+
+    menuBuilder();
+})
+
+
+</script>
+
+</body>