Loading of DOM and CSS? - dom

Is Dom loaded before CSS in our webpage ?

Yes. Since the browser uses the DOM to locate elements to be styled, it needs to load the DOM first to do that. This is NOT true of javascript, though (as an aside).

Related

Sortable div with TinyMCE inline

The code posted by vijayscode (https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs/59896435#59896435) doesn't work for me.
TinyMCE doesn't work even before I start ordering. Does sorting work with TinyMCE in when using inline mode?
For example, if I add the inline: true option to this code ... TinyMCE is not loaded immediately
http://fiddle.tinymce.com/33faab
Can you show me a working example on http://fiddle.tinymce.com/
You are really asking two questions so let me try to answer them separately...
 
Inline Mode
In order to use inline mode you need to target a block element (e.g. div) on the page as opposed to a textarea. This is explained in the documentation:
https://www.tiny.cloud/docs/configure/editor-appearance/#inline
If you want to use TinyMCE in inline mode you will need to adjust your HTML accordingly.
 
Sorting
As is discussed in SO post you linked to the act of dragging and dropping parts of the DOM impacts TinyMCE because the underlying DOM element that is linked to TinyMCE technically gets removed from the DOM when you start dragging and then a new element is inserted when you perform the drop. Because of this what you want to do is remove() TinyMCE before the DOM element is removed and then init() again after the new DOM element is placed back into the DOM.
I would not recommend using the mceAddEditor and mceRemoveEditor to do this work. Instead I would:
Call remove() to detach TinyMCE from the DOM element.
Let the drag/drop complete
Call init() on the DOM element after its placed back into the page.
Calling init() after the element is back in the page would allow you to determine the element's class/id/etc and call init() with the correct configuration.

XMSerializer with Polymer elements exposes shadow dom

Using XMLSerializer on a DOM that contains polymer elements, exposes the shadow dom of those elements (using polymer 1.0 and and chrome 54). Not sure what to make of it, possibly it is to be expected, but perhaps someone has a solution to not having the shadow DOM exposed without performing serialization "by hand".
As an example, please see https://gist.github.com/jcage2010/5a92686317bef63d711bac74bc6d5944
This doesn't look you're running with native shadow DOM. (Note the 'style-scope' attributes, for example. To turn on native shadow DOM, see:
https://www.polymer-project.org/1.0/docs/devguide/settings
I would be surprised if this was the case with native shadow DOM, but I'd expect to see all of the nodes in shady DOM.

Is there a way to know when the DOM of a partial view is ready after it is inserted into the DOM of your web page?

I'm writing an application using Knockout. I have subviews I'm inserting via jQuery's append() function. I'm using the text plugin for RequireJS to dynamically retrieve the HTML, then I'm using append() to attach it to an element in my web page:
$("#parentElement").append(theHTML);
After that, I need to bind "theHTML" to my ViewModel:
ko.applyBindings(myViewModel, $("#subViewElement")[0]);
It seems like the jQuery onDomReady() function is only used in the initial loading of the web page. Is there a way to make sure the DOM in "theHTML" is ready before calling "applyBindings" on it?

How to keep NPAPI plugins alive in ExtJS tabbed views

I'm trying to use a custom video player NPAPI plugin (view FireBreath) inside an tabbed ExtJS application. The plugin lives in one tab, and the others contain presentations of other non-video data.
When switching from tab to tab, the element that contains the plugin is destroyed, and all plugin state is lost. Is there any way to configure an ExtJS tabbed panel so that the html contained in it is not altered when switching to another tab (just hidden)? The alternative is to re-populate the plugin state when returning to the tab, but this would be associated with an unacceptable delay (mostly while waiting for video key frames).
Thanks,
O
I don't know about your ExtJS approach, if you can solve it on that side that would of course be preferrable.
However, if you can't, you can avoid the reinitialization by moving the stream handling to a helper application that is running in the background. The plugin would launch it as needed and receive the stream data from it after registering for it.
The helper would be told when to kill a stream and possibly kill it by itself after some timeout (to avoid session leaks in case of crashing plugins etc.).
I was about to consider a helper application as recommended above, or look into rewriting the plugin to be windowless. Both might be more robust solutions for other JS frameworks.
Fortunately, the solution ended up being simpler than this, at least for ExtJS. By default, ExtJS sets "display: none" on the tabbed view's div whenever it is undisplayed, which calls the plugin destructor. After doing a little more looking through their enormous API, ExtJS has a parameter hideMode as part of the Ext.panel.Panel base class:
'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.
Defaults to: "display"
Setting the parent Panel that contains the plugin to hideMode: 'offsets' fixed the problem perfectly.

How to prevent GWT onload flicker in the Web Application Starter Project?

I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
The text loads without the CSS first
It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
Basic layout HTML,
All JavaScript, and CSS
Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.
To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.
To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);
That should show the spinner till GWT loads itself.
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
<div id="loading">
<div id="loading-msg">
<img src="icons/loading-page.gif" lt="loading">
<span>Loading the application, please wait...</span>
</div>
</div>
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
DOM.removeChild(RootPanel.getBodyElement(),
loading.getElement());
}
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.