extend js from base. move theme specific js in corresponding folders

js/rollup.conf.js

@@ -1,16 +1,18 @@
 import cleanup from 'rollup-plugin-cleanup';
 import {terser} from 'rollup-plugin-terser';
 
-const out_dir = 'src/yafowil/widget/dict/resources';
+const out_dir = 'src/yafowil/widget/dict/resources/default';
+const out_dir_bs5 = 'src/yafowil/widget/dict/resources/bootstrap5';
 
 const outro = `
 window.yafowil = window.yafowil || {};
 window.yafowil.dict = exports;
 `;
 
 export default args => {
-    let conf = {
-        input: 'js/src/bundle.js',
+    // Bootstrap
+    let conf1 = {
+        input: 'js/src/default/bundle.js',
         plugins: [
             cleanup()
         ],
@@ -29,7 +31,7 @@ export default args => {
         ]
     };
     if (args.configDebug !== true) {
-        conf.output.push({
+        conf1.output.push({
             name: 'yafowil_dict',
             file: `${out_dir}/widget.min.js`,
             format: 'iife',
@@ -43,5 +45,40 @@ export default args => {
             interop: 'default'
         });
     }
-    return conf;
+
+    // Bootstrap5
+    let conf2 = {
+        input: 'js/src/bootstrap5/bundle.js',
+        plugins: [
+            cleanup()
+        ],
+        output: [{
+            name: 'yafowil_dict',
+            file: `${out_dir_bs5}/widget.js`,
+            format: 'iife',
+            outro: outro,
+            globals: {
+                jquery: 'jQuery'
+            },
+            interop: 'default'
+        }],
+        external: ['jquery']
+    };
+    if (args.configDebug !== true) {
+        conf2.output.push({
+            name: 'another_bundle',
+            file: `${out_dir_bs5}/widget.min.js`,
+            format: 'iife',
+            plugins: [
+                terser()
+            ],
+            outro: outro,
+            globals: {
+                jquery: 'jQuery'
+            },
+            interop: 'default'
+        });
+    }
+
+    return [conf1, conf2];
 };

js/src/bootstrap5/widget.js

@@ -0,0 +1,88 @@
+import $ from 'jquery';
+import {DictBase} from '../dict.js';
+
+export class DictWidget extends DictBase {
+
+    static initialize(context) {
+        $('table.dictwidget', context).each(function() {
+            let elem = $(this);
+            if (window.yafowil_array !== undefined &&
+                window.yafowil_array.inside_template(elem)) {
+                return;
+            }
+            new DictWidget(elem);
+        });
+    }
+
+    create_row(action) {
+        let key_css = this.row_class(action, 'key'),
+            val_css = this.row_class(action, 'value'),
+            row = '';
+        row += '<tr>';
+        row +=   '<td class="key">';
+        row +=     '<input type="text" class="' + key_css + '" value="" />';
+        row +=   '</td>';
+        row +=   '<td class="value">';
+        row +=     '<input type="text" class="' + val_css + '" value="" />';
+        row +=   '</td>';
+        row +=   '<td class="actions">';
+        row +=     '<div class="dict_actions">';
+        row +=       '<a class="dict_row_add" href="#">';
+        row +=         '<span class="bi-plus-circle-fill"> </span>';
+        row +=       '</a>';
+        row +=       '<a class="dict_row_remove" href="#">';
+        row +=         '<span class="bi-dash-circle-fill"> </span>';
+        row +=       '</a>';
+        row +=       '<a class="dict_row_up" href="#">';
+        row +=         '<span class="bi-arrow-up-circle-fill"> </span>';
+        row +=       '</a>';
+        row +=       '<a class="dict_row_down" href="#">';
+        row +=         '<span class="bi-arrow-down-circle-fill"> </span>';
+        row +=       '</a>';
+        row +=     '</div>';
+        row +=   '</td>';
+        row += '</tr>';
+        return row;
+    }
+
+    on_row_moved(row) {
+        row.addClass('row-moved');
+        setTimeout(function() {
+            row.removeClass('row-moved');
+        }, 1000);
+    }
+
+    up_handle(evt) {
+        evt.preventDefault();
+        let row = this.get_row(evt.currentTarget);
+        row.insertBefore(row.prev());
+        this.reset_indices(row.parent());
+        this.on_row_moved(row);
+    }
+
+    down_handle(evt) {
+        evt.preventDefault();
+        let row = this.get_row(evt.currentTarget);
+        row.insertAfter(row.next());
+        this.reset_indices(row.parent());
+        this.on_row_moved(row);
+    }
+}
+
+//////////////////////////////////////////////////////////////////////////////
+// yafowil.widget.array integration
+//////////////////////////////////////////////////////////////////////////////
+
+function dict_on_array_add(inst, context) {
+    DictWidget.initialize(context);
+}
+
+export function register_array_subscribers() {
+    if (window.yafowil_array !== undefined) {
+        window.yafowil_array.on_array_event('on_add', dict_on_array_add);
+    } else if (yafowil.array !== undefined) {
+        $.extend(yafowil.array.hooks.add, {
+            dictwidget_binder: DictWidget.initialize
+        });
+    }
+}

js/src/bundle_bs5.js → js/src/default/bundle.js

@@ -1,9 +1,9 @@
 import $ from 'jquery';
 
-import {DictWidget} from './widget_bs5.js';
-import {register_array_subscribers} from './widget_bs5.js';
+import {DictWidget} from './widget.js';
+import {register_array_subscribers} from './widget.js';
 
-export * from './widget_bs5.js';
+export * from './widget.js';
 
 $(function() {
     if (window.ts !== undefined) {

js/src/default/widget.js

@@ -0,0 +1,65 @@
+import $ from 'jquery';
+import {DictBase} from '../dict.js';
+
+export class DictWidget extends DictBase {
+
+    static initialize(context) {
+        $('table.dictwidget', context).each(function() {
+            let elem = $(this);
+            if (window.yafowil_array !== undefined &&
+                window.yafowil_array.inside_template(elem)) {
+                return;
+            }
+            new DictWidget(elem);
+        });
+    }
+
+    create_row(action) {
+        let key_css = this.row_class(action, 'key'),
+            val_css = this.row_class(action, 'value'),
+            row = '';
+        row += '<tr>';
+        row +=   '<td class="key">';
+        row +=     '<input type="text" class="' + key_css + '" value="" />';
+        row +=   '</td>';
+        row +=   '<td class="value">';
+        row +=     '<input type="text" class="' + val_css + '" value="" />';
+        row +=   '</td>';
+        row +=   '<td class="actions">';
+        row +=     '<div class="dict_actions">';
+        row +=       '<a class="dict_row_add" href="#">';
+        row +=         '<span class="icon-plus-sign"> </span>';
+        row +=       '</a>';
+        row +=       '<a class="dict_row_remove" href="#">';
+        row +=         '<span class="icon-minus-sign"> </span>';
+        row +=       '</a>';
+        row +=       '<a class="dict_row_up" href="#">';
+        row +=         '<span class="icon-circle-arrow-up"> </span>';
+        row +=       '</a>';
+        row +=       '<a class="dict_row_down" href="#">';
+        row +=         '<span class="icon-circle-arrow-down"> </span>';
+        row +=       '</a>';
+        row +=     '</div>';
+        row +=   '</td>';
+        row += '</tr>';
+        return row;
+    }
+}
+
+//////////////////////////////////////////////////////////////////////////////
+// yafowil.widget.array integration
+//////////////////////////////////////////////////////////////////////////////
+
+function dict_on_array_add(inst, context) {
+    DictWidget.initialize(context);
+}
+
+export function register_array_subscribers() {
+    if (window.yafowil_array !== undefined) {
+        window.yafowil_array.on_array_event('on_add', dict_on_array_add);
+    } else if (yafowil.array !== undefined) {
+        $.extend(yafowil.array.hooks.add, {
+            dictwidget_binder: DictWidget.initialize
+        });
+    }
+}

js/src/widget.js → js/src/dict.js

@@ -1,17 +1,6 @@
 import $ from 'jquery';
 
-export class DictWidget {
-
-    static initialize(context) {
-        $('table.dictwidget', context).each(function() {
-            let elem = $(this);
-            if (window.yafowil_array !== undefined &&
-                window.yafowil_array.inside_template(elem)) {
-                return;
-            }
-            new DictWidget(elem);
-        });
-    }
+export class DictBase {
 
     constructor(elem) {
         elem.data('yafowil-dict', this);
@@ -20,7 +9,6 @@ export class DictWidget {
             add_handle = this.add_first_handle.bind(this);
         $('a.dict_row_add', head_actions).off().on('click', add_handle);
         this.bind_actions();
-
     }
 
     bind_actions() {
@@ -58,34 +46,7 @@ export class DictWidget {
     }
 
     create_row(action) {
-        let key_css = this.row_class(action, 'key'),
-            val_css = this.row_class(action, 'value'),
-            row = '';
-        row += '<tr>';
-        row +=   '<td class="key">';
-        row +=     '<input type="text" class="' + key_css + '" value="" />';
-        row +=   '</td>';
-        row +=   '<td class="value">';
-        row +=     '<input type="text" class="' + val_css + '" value="" />';
-        row +=   '</td>';
-        row +=   '<td class="actions">';
-        row +=     '<div class="dict_actions">';
-        row +=       '<a class="dict_row_add" href="#">';
-        row +=         '<span class="icon-plus-sign"> </span>';
-        row +=       '</a>';
-        row +=       '<a class="dict_row_remove" href="#">';
-        row +=         '<span class="icon-minus-sign"> </span>';
-        row +=       '</a>';
-        row +=       '<a class="dict_row_up" href="#">';
-        row +=         '<span class="icon-circle-arrow-up"> </span>';
-        row +=       '</a>';
-        row +=       '<a class="dict_row_down" href="#">';
-        row +=         '<span class="icon-circle-arrow-down"> </span>';
-        row +=       '</a>';
-        row +=     '</div>';
-        row +=   '</td>';
-        row += '</tr>';
-        return row;
+        // ...
     }
 
     get_row(action) {
@@ -156,21 +117,3 @@ export class DictWidget {
         this.reset_indices(row.parent());
     }
 }
-
-//////////////////////////////////////////////////////////////////////////////
-// yafowil.widget.array integration
-//////////////////////////////////////////////////////////////////////////////
-
-function dict_on_array_add(inst, context) {
-    DictWidget.initialize(context);
-}
-
-export function register_array_subscribers() {
-    if (window.yafowil_array !== undefined) {
-        window.yafowil_array.on_array_event('on_add', dict_on_array_add);
-    } else if (yafowil.array !== undefined) {
-        $.extend(yafowil.array.hooks.add, {
-            dictwidget_binder: DictWidget.initialize
-        });
-    }
-}