TinyMCE inside Durandal widget - callback after routing transition? - tinymce

I'm trying to use TinyMCE in a widget but it fails. I think the problem is that view is still hidden when "viewAttached" is fired. It seems that TinyMCE has a bug/feature (read last paragraph) and can't be displayed when the target (textarea) is hidden (or inside a hidden div).
I got it working by doing the job in a setTimeout but it's crappy.
Is there a callback that I could attached to which is fired after the view is unhided (after the transition is completed)?

I found one solution:
Explicitly subscribe to the "isNavigating" observable of the router and add TinyMCE when "isNavigating" value becomes false.
Still : this has the effect of flickering - you see the textarea and then it is replaced by TinyMCE... but this is not a Durandal problem IMO.
Edit 1
Finally, I think the the best solution (for now... follow the link below for the thread on the subject) is to do a setTimeout(xyz(), 0) - I have seen a lot of people using this technique and it prevents the flickering.
https://groups.google.com/forum/?fromgroups#!topic/durandaljs/5NpSwMBnrew

Durandal does have a callbacks when you're using composition - you just put a function on to your viewModel with the correct name. In your case, you would use viewAttached:
Here's the docs:
http://durandaljs.com/documentation/Interacting-with-the-DOM/

Related

Fancytree dnd5 triggering multiple loads of lazy nodes on hover

I just updated my application from the old Dnd extension to Dnd5 and I'm now seeing multiple/many server AJAX calls (usually 5 or 6) when I hover over lazy-load nodes while dragging. I have only implemented the dragStart, dragEnter, and dragDrop callbacks, and I only see the dragEnter callback being called once when I hover. Is there some special handling or response required from the lazyLoad callback to prevent this? I should also point out that I also updated to the latest version of Fancytree (2.34.0) so perhaps something else has changed that is causing this? (My tree works fine otherwise.)
Thanks!
Seems you found a bug. This will be fixed in Fancytree 2.34.1

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.

Woodwing: how to trigger the ModalViewController using custom web/html embedded content

Using Woodwing, we have a page that has custom html in it, using the custom web widget.
That widget has an anchor tag, that when tapped, opens a page in safari.
However, if we create the same page using the HTML widget, and a link overlay, that triggers a ModalView to display.
I'm assuming this has something to do with WoodWing's (un)documented protocols for the anchor tags, that are captured by the WoodWing shell application and used to trigger the "ModalView" display. Since everything in Woodwing generates an XML that is parsed when the app is loaded, and I've done numerous applications, this seems reasonable. However, there is very little technical documentation.
My question is: does anyone know any documentation on those protocols, or a way I can use custom-html to trigger the ModalView? I've tried replacing "http" with "ww" but no dice. It's possible it's javascript but I'm suspecting protocols...
The UIWebViewDelegate defines the webView:shouldStartLoadWithRequest:navigationType: method that your view controller can implement. In this implementation, your code shoudl decide if it wants to handle the request (user click) or let the UIWebView handle it normally.
For displaying a modal as a result of a click, this method would display the modal and return NO.
The default HTML widget implementation doesn't support this out of the box. There are two ways that you can do to achieve this;
Implement what they call a 'custom object'. They documented this feature, if you have access to their documentation this should be relatively easy to figure out. It allows you to write native objects and inject them into both the .ofip format and the application.
Implement a modal dialog within the widget (in HTML). This is less convenient but possible to do (if you have a fullscreen widget).
Create the specific URL for open as you mention in your comment(ww://string.string).
Then in UIWebView Delegate method (webView: shouldStartLoadWithRequest: navigationType:) get the redirect URL. If redirect URL is equal to you mention before then perform your action.
Let me know if this answer help you.
Thanks,

webView:shouldStartLoadWithRequest:navigationType: not always triggered

As can be seen in the screencast below, I'm having a devil of a time getting webView:shouldStartLoadWithRequest:navigationType: to be called consistently.
In the screencast below, you'll see a UIWebview with three size selectors. When clicking on any of these three, webView:shouldStartLoadWithRequest:navigationType: should be getting triggered. Unfortunately, that doesn't always seem to be happening. It doesn't event seem to happen consistently.
http://screencast.com/t/ww6uwP1Je
So what's causing this? Is there an error method of UIWebViewDelegate that I could hook into to pick up some of what's going on internally?
It seems like you aren't setting the UIWebViewDelegate properly. I noticed in the screencast that it worked once you clicked the 'L' (presumedly "large") button. Is that method setting the delegate? If not, please paste a code snippet that shows the issue.
Since the other two buttons generate calls to the delegate we know your web view delegate is properly assigned.
The simplest explanation for the failure is that S button is not configured in HTML properly and does not generate a actual request for the web view to load. With no request, the delegate methods are never called in the first place.
Ok, turns out I didn't provide anyone enough information for anyone to answer the question - I even removed the relevant parts from the webview gist given above. Sorry!
Here's the full template:
https://gist.github.com/521d17e0377133725d9a
Turns out there was an onclick handler on the li surounding the link (see the gist above - "#sizes_slider li"). Removing that onclick handler did the trick.

Unable to call getValues() on an Ext Js FormPanel on initialization of a container Panel

I have an Ext Js panel that I am adding to my main TabPanel. The panel I am adding contains a FormPanel as one of it's items and inside the FormPanel I have a Name field. What I want to do is change the name of the Tab based on the name in the form field.
The problem is that if I call the FormPanel's getForm().getValues() inside of the panel's initComponent, I get the following javascript error:
Uncaught TypeError: Cannot read property 'dom' of undefined
If I do this outside of initComponent (e.g. on a button press) everything works fine. After doing some testing, I think the issue is that the FormPanel isn't actually rendered yet (and thus the dom doesn't exist), getValues() fails. However, I can't seem to figure out a way to get my FormPanel's values from the Panel on load.
I tried to listen for events. I tried:
this.detailForm.on('afterrender', function () { alert('test'); });
but doing this showed that AfterRender is called prior to the form actually being rendered (it's not visible on the screen). Changing the alert to my custom function handler produces the previous dom exception. I attempted to use the activate and enable events instead of afterrender, but even though the API says that FormPanel fires those events, the alert('test') never gets called.
I can't seem to find any way for my panel to get the inner FormPanel's values upon loading my panel. Does anyone have any ideas?
Using getFieldValues() in place of getValues() will collect values by calling each field instance's getValue() method instead of by reading from the DOM. This should allow you to get your values regardless of the form's rendered state.
I've got the same problems on one of my projects, I managed to fix it using the afterlayout event.
I'd give setting .deferredRender:false a try.
Ext.TabPanel.deferredRender
Probably best to roll out of your afterlayout changes, then test with just a straight deferredRender:false config item.
I believe the problem is caused because the inactive tabs are not rendered until they become active. In your scenario, you cannot get the values, because they don't exist until the tab is activated/shown.
Setting deferredRender:false will render the items within all tabs. There could be a performance hit by setting deferredRender:false, so testing you must do.
Hope this helps.