cztomczak / phpdesktop

Develop desktop GUI applications using PHP, HTML5, JavaScript and SQLite
https://groups.google.com/d/forum/phpdesktop
2.7k stars 574 forks source link

Bootstrap 5 off canvas, modals, burgur menu dropdowns is not working in php-desktop for windows. #313

Open BlackBeardo opened 2 years ago

BlackBeardo commented 2 years ago

Is there any way to work with bootstrap 5 and php-desktop for windows. BS 4 is working fine with php-dektop. but i have to use bootstrap 5.

can any one tell me what's the issue with bs5?

can we update chrome version? how?

DBoutesfira commented 2 years ago

same problem

demo7up commented 1 year ago

Ive figured out the bootstrap issue, but unfortunately I do not know enough javascript to refactor the code. Its a problem with Spread syntax (...) bs5 uses this to allow an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. Im trying to figure out a way to replace this. Any help from some javascript guys would be appreciated.

Its not an issue with arrays or functions because they are supported in Chrome since version 46 but its an issue with objects.

Spread in object literals is only supported in Chrome 60+ Spread in object literals

_mergeConfigObj(t, e) { const i = o(e) ? B.getDataAttribute(e, "config") : {}; return { ...this.constructor.Default, ...("object" == typeof i ? i : {}), ...(o(e) ? B.getDataAttributes(e) : {}), ...("object" == typeof t ? t : {}), }; }

oleteacher commented 1 year ago

This may help, but I have not tried it personally: https://github.com/coliff/bootstrap-ie11

caendesilva commented 1 year ago

Unfortunately the bundled Chromium version is extremely outdated and many modern features simply do not work.

Iam-Makafui commented 6 months ago

i had similar issue and did this temporary fix

  1. Install Babel and Dependencies: Run the following command in your terminal to install Babel and its necessary dependencies: npm install --save-dev @babel/core @babel/cli @babel/preset-env

  2. Create Babel Configuration: Create a Babel configuration file named .babelrc in the root directory of your project. Inside this file, specify the presets you want to use. For example: { "presets": ["@babel/preset-env"] }

  3. Transpile Your JavaScript: Transpile your bootstrap.bundle.min.js file using Babel. Run the following command in your terminal: npx babel path/to/the/bootstrap.bundle.min.js --out-file new/path/to/the/outputfile/bootstrap.bundle.min.js

Replace path/to/the/bootstrap.bundle.min.js with the path to your original JavaScript file, and new/path/to/the/outputfile/bootstrap.bundle.min.js with the desired output path.

  1. Include Transpiled File in Laravel: Once transpilation is complete, include the transpiled JavaScript file (bootstrap.bundle.min.js) in your project. You can do this in your template file or wherever you include JavaScript files.

<script src="new/path/to/the/outputfile/bootstrap.bundle.min.js"></script>

By following these steps, you'll integrate Babel into your project to transpile the Bootstrap bundle script, ensuring compatibility with older environments.