Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace webcomponents import #486

Merged

Conversation

elgarfo
Copy link
Contributor

@elgarfo elgarfo commented Dec 17, 2018

@jkandasa in reference to this thread: https://forum.mycontroller.org/topic/376/custom-widget-send-command-to-node/8

this PR resolves multiple problems which became obvious in the above mentioned thread:

  • webcomponents import is not widely supported, was recently deprecated and will be removed in near future by chrome. (see: https://www.chromestatus.com/feature/5144752345317376)
  • the polyfill does a good job of loading additional files but will be problematic if additional angular modules are included that way (modules will be loaded after angulars bootstrap, which causes the frontend to crash if additional modules are defined in app.js)
  • there is no way to specify loading of additional modules through mycontrollers frontend

to combat a race condition between angulars bootstrap process, slower internet connections and the process of loading additional JS from local or remote servers, i opted to:

  1. defer angulars bootstrapping process. (see: https://docs.angularjs.org/guide/bootstrap)
  2. load additional JS resources via $.getScript (see: https://api.jquery.com/jquery.getscript/)
  3. use promises to handle the asynchronous process
  4. test if the specified additional angularJS modules can be loaded (angular crashes if modules can not be loaded)
  5. finally resume angulars bootstrap and pass additional modules to load

this has been tested so far on windows 10 x64 1806 with firefox 63.0.3 64-bit and is working fine for me.
i've been able to plug your custom slider widget example right into the frontend without modifying app.js. as far as i can tell, the websites is working flawless, on first an subsequent visits, with or without additional modules specified.

@jkandasa
Copy link
Member

@elgarfo Thank you for the awesome work!
I will review this PR soon and merge it if everything goes well.

@jkandasa
Copy link
Member

@elgarfo All works great! Thank you so much for your contributions!
There are minor update needs,

  • We should not touch locale files (ie: mc_locale_gui-de_de.json), We should update only mc_locale_gui_source_en.json, other files should be updated from https://transifex.com/mycontrollerorg/ I can push the source and make available your change in https://transifex.com/mycontrollerorg/ once I merge this PR.
  • Can you add mcv=${mc.gui.version} for newly created files?
    • <script src="angular_defer_bootstrap.js?mcv=${mc.gui.version}"></script>
    • <script src="/_configurations/additional.js?mcv=${mc.gui.version}"></script>
    • <link rel="stylesheet" type="text/css" href="/_configurations/additional.css?mcv=${mc.gui.version}">
  • Update mc.gui.version to 28

@jkandasa
Copy link
Member

@elgarfo I have updated the changes. Thanks!

@jkandasa jkandasa merged commit a0de0de into mycontroller-org:development Dec 25, 2018
@elgarfo
Copy link
Contributor Author

elgarfo commented Dec 28, 2018

@jkandasa thanks for taking the time to fix this. sorry for not pushing the requested changes, i simply had not enough time before and during the holidays. i guess everything is working well, or did you encounter any difficulties with any browser?

@elgarfo elgarfo deleted the replace-webcomponents-import branch December 28, 2018 20:42
@jkandasa
Copy link
Member

@elgarfo I tested only on Chrome and I do not face any issue. It was a simple change I made.
Thank you for your great PR.

@wanvo
Copy link

wanvo commented Dec 31, 2018

I checked this widget with new SNAPSHOT in Chrome, it works great.
In Firefox, all menus look like this ({{variable}}.

@elgarfo
Copy link
Contributor Author

elgarfo commented Jan 1, 2019

@wanvo which version of firefox and what OS did u use? can you try with a new firefox profile?

@wanvo
Copy link

wanvo commented Jan 1, 2019

@elgarfo I am using Windows7 x64, the latest version of Firefox x64. I created a new firefox profile and I tried the widget in it.The menus look the same {{variable}}.
After I replased lines in "HTML additional headers":
https://localhost:8443/mylib/rzslider.min.css https://localhost:8443/mylib/gauge.min.js https://localhost:8443/mylib/rzslider.min.js
to the lines
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.0/rzslider.min.css https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.6.0/rzslider.min.js
and cleared the firefox cache, everything started to work fine.

Then I returned everything to the original situation. I registered the paths to the css and js files in the local mylib.
Firefox began to render the frontend correctly and the widgets work well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants