Bootstrap 5

.github/workflows/test_js.yaml

@@ -1,34 +1,25 @@
 name: JS Test array
 
-on:
-  push:
-    paths:
-    - '**.js'
+on: [push]
 
 jobs:
   test:
-    name: TEST ARRAY
+    name: Test
 
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
-      - name: Install
-        run: |
-          npm --save-dev install \
-            qunit \
-            karma \
-            karma-qunit \
-            karma-coverage \
-            karma-chrome-launcher \
-            karma-module-resolver-preprocessor
-          npm --no-save install https://github.com/jquery/jquery#main
+    - name: Corepack
+      run: |
+        npm install --global corepack@latest
+        corepack enable
 
-      - name: Run tests
-        run: |
-          node_modules/karma/bin/karma start js/karma.conf.js
+    - name: Install
+      run: |
+        corepack enable
+        make nodejs
 
-      - name: Run coverage
-        run: |
-          npm run karma-test:coverage
+    - name: Run tests
+      run: make wtr

.github/workflows/test_py.yaml

@@ -1,9 +1,6 @@
 name: PY Test array
 
-on:
-  push:
-    paths:
-    - '**.py'
+on: [push]
 
 jobs:
   test:
@@ -19,11 +16,12 @@ jobs:
           - macos-latest
 
         python:
-          - "2.7"
-          - "3.7"
           - "3.8"
           - "3.9"
           - "3.10"
+          - "3.11"
+          - "3.12"
+          - "3.13"
 
     steps:
       - uses: actions/checkout@v2
@@ -37,16 +35,16 @@ jobs:
         run: |
           pip install wheel
           pip install coverage
-          pip install lxml
-          pip install zope.testrunner
           pip install https://github.com/conestack/webresource/archive/master.zip
           pip install https://github.com/conestack/yafowil/archive/master.zip
           pip install -e .[test]
+
       - name: Run tests
         run: |
           python --version
-          python -m yafowil.widget.array.tests
+          python -m pytest src/yafowil/widget/array/tests
+
       - name: Run coverage
         run: |
-          coverage run --source=src/yafowil/widget/array --omit=src/yafowil/widget/array/example.py -m yafowil.widget.array.tests
+          coverage run --source=src/yafowil/widget/array --omit=src/yafowil/widget/array/example.py -m pytest src/yafowil/widget/array/tests
           coverage report --fail-under=99

CHANGES.rst

@@ -4,7 +4,29 @@ Changes
 2.0a2 (unreleased)
 ------------------
 
-- Nothing changed yet.
+- Update jQuery to version ``4.0.0-beta.2``.
+  [lenadax]
+
+- Use ``bootstrap-icons`` font instead of glyphicons.
+  [lenadax]
+
+- Add visual effects to distinguish rows that have been moved or created.
+  [lenadax]
+
+- Implement dark theme for ``Bootstrap5`` dark theme mode.
+  [lenadax]
+
+- Use rollup for bundling scss. Use ``make rollup`` to compile js and scss.
+  [lenadax]
+
+- Use ``webtestrunner`` instead of ``karma`` for js tests. Use ``make wtr`` to run tests.
+  [lenadax]
+
+- Use ``pnpm`` as package manager.
+  [lenadax]
+
+- Create Bootstrap5 widget version.
+  [lenadax]
 
 
 2.0a1 (2023-05-15)

js/rollup.conf.js

@@ -10,14 +10,20 @@ window.yafowil.array = exports;
 `;
 
 export default args => {
-    let conf = {
-        input: 'js/src/bundle.js',
+    let conf = [];
+
+    ////////////////////////////////////////////////////////////////////////////
+    // DEFAULT
+    ////////////////////////////////////////////////////////////////////////////
+
+    let bundle_default = {
+        input: 'js/src/default/bundle.js',
         plugins: [
             cleanup()
         ],
         output: [{
             name: 'yafowil_array',
-            file: `${out_dir}/widget.js`,
+            file: `${out_dir}/default/widget.js`,
             format: 'iife',
             outro: outro,
             globals: {
@@ -30,9 +36,9 @@ export default args => {
         ]
     };
     if (args.configDebug !== true) {
-        conf.output.push({
+        bundle_default.output.push({
             name: 'yafowil_array',
-            file: `${out_dir}/widget.min.js`,
+            file: `${out_dir}/default/widget.min.js`,
             format: 'iife',
             plugins: [
                 terser()
@@ -45,10 +51,10 @@ export default args => {
         });
     }
     let scss_default = {
-        input: ['scss/widget_default.scss'],
+        input: ['scss/default/widget.scss'],
         output: [
           {
-            file: `${out_dir}/default/widget.css`,
+            file: `${out_dir}/default/widget.min.css`,
             format: 'es',
             plugins: [terser()],
           },
@@ -63,11 +69,17 @@ export default args => {
           }),
         ],
     };
+    conf.push(bundle_default, scss_default);
+
+    ////////////////////////////////////////////////////////////////////////////
+    // BOOTSTRAP
+    ////////////////////////////////////////////////////////////////////////////
+
     let scss_bootstrap = {
-        input: ['scss/widget_bootstrap.scss'],
+        input: ['scss/bootstrap/widget.scss'],
         output: [
           {
-            file: `${out_dir}/bootstrap/widget.css`,
+            file: `${out_dir}/bootstrap/widget.min.css`,
             format: 'es',
             plugins: [terser()],
           },
@@ -82,11 +94,17 @@ export default args => {
           }),
         ],
     };
+    conf.push(scss_bootstrap);
+
+    ////////////////////////////////////////////////////////////////////////////
+    // PLONE5
+    ////////////////////////////////////////////////////////////////////////////
+
     let scss_plone5 = {
-        input: ['scss/widget_plone5.scss'],
+        input: ['scss/plone5/widget.scss'],
         output: [
           {
-            file: `${out_dir}/plone5/widget.css`,
+            file: `${out_dir}/plone5/widget.min.css`,
             format: 'es',
             plugins: [terser()],
           },
@@ -101,5 +119,64 @@ export default args => {
           }),
         ],
     };
-    return [conf, scss_default, scss_bootstrap, scss_plone5];
+    conf.push(scss_plone5);
+
+    ////////////////////////////////////////////////////////////////////////////
+    // BOOTSTRAP5
+    ////////////////////////////////////////////////////////////////////////////
+
+    let bundle_bs5 = {
+        input: 'js/src/bootstrap5/bundle.js',
+        plugins: [
+            cleanup()
+        ],
+        output: [{
+            name: 'yafowil_array',
+            file: `${out_dir}/bootstrap5/widget.js`,
+            format: 'iife',
+            outro: outro,
+            globals: {
+                jquery: 'jQuery'
+            },
+            interop: 'default'
+        }],
+        external: [
+            'jquery'
+        ]
+    };
+    if (args.configDebug !== true) {
+        bundle_bs5.output.push({
+            name: 'yafowil_array',
+            file: `${out_dir}/bootstrap5/widget.min.js`,
+            format: 'iife',
+            plugins: [
+                terser()
+            ],
+            outro: outro,
+            globals: {
+                jquery: 'jQuery'
+            },
+            interop: 'default'
+        });
+    }
+    let scss_bs5 = {
+        input: ['scss/bootstrap5/widget.scss'],
+        output: [{
+            file: `${out_dir}/bootstrap5/widget.min.css`,
+            format: 'es',
+            plugins: [terser()],
+        }],
+        plugins: [
+            postcss({
+                extract: true,
+                minimize: true,
+                use: [
+                    ['sass', { outputStyle: 'compressed' }],
+                ],
+            }),
+        ],
+    };
+    conf.push(bundle_bs5, scss_bs5);
+
+    return conf;
 };

js/src/widget.js → js/src/base/array.js

@@ -1,47 +1,6 @@
 import $ from 'jquery';
 
-// B/C. Deprecated. Use ``on_array_event``
-export let hooks = {
-    before_add: {},
-    add: {},
-    remove: {},
-    before_up: {},
-    up: {},
-    before_down: {},
-    down: {},
-    index: {}
-};
-
-// global array subscribers, gets called from every array instance
-let _array_subscribers = {
-    on_before_add: [],
-    on_add: [],
-    on_remove: [],
-    on_before_up: [],
-    on_up: [],
-    on_before_down: [],
-    on_down: [],
-    on_index: []
-}
-
-export function on_array_event(event, subscriber) {
-    _array_subscribers[event].push(subscriber)
-}
-
-export function inside_template(elem) {
-    return elem.parents('.arraytemplate').length > 0
-}
-
-export class ArrayWidget {
-
-    static initialize(context) {
-        $('div.array', context).each(function() {
-            let wrapper = $(this);
-            if (wrapper.attr('id').indexOf('-TEMPLATE') === -1) {
-                new ArrayWidget(wrapper);
-            }
-        });
-    }
+export class ArrayBase {
 
     constructor(wrapper) {
         wrapper.data('yafowil-array', this);
@@ -90,20 +49,20 @@ export class ArrayWidget {
             row +=   '<div class="array_actions">';
             if (css.indexOf('array-add') > -1) {
                 row += '<a class="array_row_add" href="#">';
-                row +=   '<span class="icon-plus-sign"> </span>';
+                row +=   `<span class="${this.icon_add}"> </span>`;
                 row += '</a>';
             }
             if (css.indexOf('array-remove') > -1) {
                 row += '<a class="array_row_remove" href="#">';
-                row +=   '<span class="icon-minus-sign"> </span>';
+                row +=   `<span class="${this.icon_remove}"> </span>`;
                 row += '</a>';
             }
             if (css.indexOf('array-sort') > -1) {
                 row += '<a class="array_row_up" href="#">';
-                row +=   '<span class="icon-circle-arrow-up"> </span>';
+                row +=   `<span class="${this.icon_up}"> </span>`;
                 row += '</a>';
                 row += '<a class="array_row_down" href="#">';
-                row +=   '<span class="icon-circle-arrow-down"> </span>';
+                row +=   `<span class="${this.icon_down}"> </span>`;
                 row += '</a>';
             }
             row +=   '</div>';
@@ -126,7 +85,7 @@ export class ArrayWidget {
     }
 
     trigger(event, ...args) {
-        let event_hooks = hooks[event.substring(3, event.length)];
+        let event_hooks = this.hooks[event.substring(3, event.length)];
         if (Object.entries(event_hooks).length) {
             console.log(
                 'Array hooks are deprecated. Use ``on_array_event`` instead.'
@@ -137,7 +96,7 @@ export class ArrayWidget {
             }
         }
         args.splice(0, 0, this);
-        for (let subscriber of _array_subscribers[event]) {
+        for (let subscriber of this._array_subscribers[event]) {
             subscriber.apply(null, args);
         }
     }
@@ -193,7 +152,7 @@ export class ArrayWidget {
 
     init_row(container, row) {
         this.reset_indices(container);
-        ArrayWidget.initialize(row);
+        this.array_widget.initialize(row);
         this.trigger('on_add', row);
     }