The jQuery VideoControl is documented here:
https://developers.google.com/tv/web/lib/jquery/#gtv.jq.VideoControl
It takes a set of VideoParms. That are not specified.
It is used in the sample templates on this page:
https://developers.google.com/tv/web/docs/gtv-templates
I've taken apart the templates, but I'm having difficulty creating a simple example of a standalone video control. In the templates, the sidenav and carousel code are tied to how the videocontrol works. There is a relationship between the keyController and behavior (behaviorZones) that I can not find an explanation for.
Is there a standalone example somewhere? What needs to be setup with keycontroller, css, and behavior to get this going?
I'm not aware that there is a standalone videocontrol.js sample but it should be possible to set it up. Most of the necessary pieces are inside videocontrol.js, in particular in the videocontrol's constructor and this function: gtv.jq.VideoControl.prototype.makeControl.
keycontroller mapping is used to handling key inputs and some of the CSS are dynamically controlled within JS so there might be errors if you just rip them apart straight from the Template. You'd have to debug it using a solid tool like Chrome Developer Tools. You can watch tutorials of this tool here: http://www.youtube.com/results?search_query=chrome+developer+tools&oq=chrome+develop&aq=0&aqi=g3g-m2&aql=&gs_sm=3&gs_upl=1972l4015l0l6142l14l11l0l0l0l0l207l1476l3.5.3l11l0
Otherwise please send your error traces and/or code snippet for debugging help.
S
Related
Creating Modified Blog Entries
I am new to React, and very much to Docusaurus, however, I've managed to get a decent looking DS site going. I am trying to capture some simple snippets to as "blog entries", just small factual snippets, etc. simple project summaries. I’ve hit the limit of the Docusaurus.config options and not sure how to expand the out of box components.
How do I begin to alter and edit Docusaurus to change the Blog page to be like "Cards" in component-speak? Ive seen some example in Infima, but not sure how to bridge that gap?
How can I easily replicate the Announcement Bar to also be at the bottom, like a Banner?
Thank You!
One possible arena for you to use is Bootstrap — specifically React-Bootstrap. They have a card component you could use where you link individual blog entries to that card. If you're comfortable with JavaScript, there's probably an automation you can build there, but hand-coded text is somewhat part and parcel with static-site generators.
If you want a different solution with the CSS code in your src file outright, CSSCodeLab has a React Card layout entry with an attached source code file. Some hand-coded text required, and not automatically integrated with a separate blog setup, but YMMV.
Otherwise Docusaurus' Showcase page does provide the card formatting. The source code for the page (coded at index.tsx) as well as the components are available.
I have an Elm app. A while ago I realized that my app was crashing locally when I used FontAwesome icons. I came to understand that it happened because I chose SVG icons and therefore FontAwesome was modifying the DOM. That conflicted with Elm's VDOM mechanism.
This was easy to fix--I migrated to the CSS version of FontAwesome that uses pseudo elements. Recently some users complained that the app in production freezes and they showed screenshots of states that were not matching the log data I had. It took a while until I realized that all these users had Google Translate automatically translated the page for them. Google Translate clearly alters the DOM, so I'm not surprised that it made Elm crash.
How can I prevent my Elm app from crashing? Is there a way to be notified if a 3rd party changes the DOM? So that I could even notify the user that they have an extension that interferes with the app.
I had the same problem as you and solved it by migrating to the Elm-FontAwesome library. Basically all you have to do is replace this syntax:
i [ Svga.class "fas fa-check" ] []
with this one:
Icon.viewIcon Icon.check
You can have a look to the example project for more details: https://github.com/Lattyware/elm-fontawesome-example
Have a look here - How we made Elm and Google Translate work together.
Their approach is to hijack the Elm replaceData method that is called by Elm during dom updates using the function below. You would run this just before giving Elm control of the dom.
HTMLFontElement.prototype.replaceData =
function replaceData(_0, _1, string) {
this.parentNode.replaceChild(
document.createTextNode(string),
this
);
};
Apparently, "Google Translate replaces every text node in the DOM with a tag containing at least one more tag – one for each sentence". For example:
<span>Insurello. Rätt ersättning till alla</span>
is translated into
<span><font><font>Insurello. </font><font>The right compensation for everyone</font></font></span>
This method avoids attempting to edit the span and instead replace it with a new one. Once the node is added, Google Translate will translate that text.
I don't know about preventing the crashes, but I think you should be able to register changes to the DOM with the current mutation observer API.
Before that were several deprecated mutation events like DOMSubtreeModified that could also help, but well they are deprecated.
This problem is very closely linked to that of Google Maps or Google Places Autocomplete in Elm. The solution I've used in the past is to provide a childless div with an id I can point to from JavaScript.
Because the div is childless, Elm does not look under the hood to check whether it has changed internally.
Check out this blog post or google "maps in elm" for instructions on how to do this
-- EDIT --
Ive read the question better and this will probably not work for Google translate issues as it changes all text in the entire DOM. Ill leave it here incase the question brings otger people who have more regular problems caused when a 3rd party changes the DOM
How can I include a popup context menu in my app, just like the ones DroneDeploy use?
What's the CSS, JS lib that you use???
I know how to do this using vanilla JavaScript, but I want it to look like yours, to keep the theme in tact!
I've looked at the source and can see you are using Angular CDK's OverlayModule to provide popups.
I'm not using Angular, so I'll have to just style the popup so it looks like you themes myself.
The doc is the best way to follow up in this case. There you can see what's possible or not. Did you see this point? Here you can follow a checklist to apply in your App and build App in Drone Deploy style. You'll need to follow another way to interact with users.
I'm trying out the mobile pattern, and have been trying to crate my own custom pattern that is now supposedly supported in Worklight 6.1.
When I tried creating jquery UI pattern, several issues:
1. The rich page editor for the pattern.html does not display the jquery component correctly on the design page (e.g button is displayed as link).
2. When I added a new page (into a jquery hybrid app) based on the custom UI pattern, it does not create a new page. It only adds the content code into the index.html, and I had to create the page myself.
Is this the correct behaviour?
I'm also having difficulty in creating Dojo UI pattern… as there is no Dojo component available on the palette when I open up the dojo > pattern.html file.
Do I have to add the libraries and code manually (i.e. no Drag-and-Drop)?
Appreciate any pointers on this.
PS: I'm using Eclipse Juno R2
1) For jQuery based patterns you need to append a jQuery core file to the project besides the jQuery mobile ones, for example, append this one: http://code.jquery.com/jquery-1.10.2.js to your project, next to jquery mobile JS file. This is just because "UI Pattern" projects don't have this file available, but they need it to handle a proper preview.
2) For Dojo patterns, there is still no official support (for example Drag and drop), so even you can modify pattern.html to get some "insertable" code, you may still need some additional tuning to get a valid pattern.
Trying to get access to a page's DOM after rendering. I do not need to view the page and plan to apply this programmatically without any GUI or interaction.
The reason I am interested in post-rendering is that I want to know where objects appear. Some location information is coded in the HTML (e.g., via offsetLeft), but much is not. Also, Javascript can change the ultimate positioning. I want positions that are as close to what the user will see as possible.
I've looked into Chromium code and think there is a way to do this but there is not enough documentation to get started.
Putting it VERY simply I'd be interested in pseudo-code like this:
DOMRoot *r = new Page("http://stackoverflow.com")->getDom();
Any tips on starting points?
You should use the Web API wrapper that Chromium exposes; specifically, the WebDocument class contains the functionality that you need. You can call it like this:
WebFrame * mainFrame = webView->mainFrame();
WebDocument document = mainFrame->document();
WebElement docElement = document->docElement();
// Manipulate the DOM here using docElement
...
You can browse the source code for Chromium's Web API wrapper here. Although there's not much in the way of documentation, the header files are fairly well-commented and you can browse Chrome's source code to see the API in action.
It's difficult to get started using Chromium. I recommend looking at the test_shell application. Also, a framework like the Chromium Embedded Framework (CEF) simplifies the process of embedding Chromium in your application; I use CEF in my current project and I'm very satisfied with it.