I have a custom element that I'd like to be themeable. The link element that I put in my template, though, appears to be replaced by Polymer with a style element containing the contents of the URL (even in Dartium), which means I can neither bind the href attribute (which I hear doesn't work anyway) nor change it programatically on an event.
Actually, even without being able to switch it, I'd like to be able to set it once when the element is created, so I can create different instances of the element with different themes.
Is there a way to do this?
It turns out that you can programatically specify a stylesheet if you add a style element with a CSS import:
factory MyView(String themeUrl) {
MyView view = new Element.tag('my-view');
view.shadowRoot.append(new StyleElement()
..id = 'theme'
..appendText("#import url('$themeUrl');"));
return view;
}
I was able to switch it like this:
void switchTheme(String themeUrl) {
StyleElement theme = shadowRoot.getElementById('theme');
theme.replaceWith(new StyleElement()
..id = 'theme'
..appendText("#import url('$themeUrl');"));
}
Related
I am new to ASP.NET.
I needed to show a list of items. I made a partial view to represent each item. It works fine.
I needed to add a script in the partial view. So I created a new javascript file in wwwroot > js. Then referenced it from the partial view, like this:
<script src="~/js/testjs.js"></script>
And this is the javascript file:
var upbtn = document.getElementById("upbtn");
var dnbtn = document.getElementById("dnbtn");
upbtn.onclick = upbtn_click;
dnbtn.onclick = dnbtn_click;
function upbtn_click() {
upbtn.children[0].children[0].style.fill = "green";
dnbtn.children[0].children[0].style.fill = "gray"
}
function dnbtn_click() {
upbtn.children[0].children[0].style.fill = "gray";
dnbtn.children[0].children[0].style.fill = "green";
}
The problem is with the script. It only executes fot the first partial view, not for the others.
So, for the first partial view, when I click the buttons, I can see the changes. But for the rest of the partial views, they have no effect. What should I do to make the script work for all partial views?
The project is using ASP.NET Core.
The reason you are seeing your functions only get called for the first partial view is due to how that javascript code works and the fact that the same element id's and javascript is being repeated in each partial view.
For example, the first partial view gets rendered and your onclick events get hooked up for your two elements with id's "upbtn" and "dnbtn". When the second partial view gets rendered (and any others after that), that document.getElementById runs, and finds the first element with that id in the document, which will be that of the first partial. (also element id's should be unique throughout a page, so you should look at ways to get unique id's in repeated partial views after you get this working. I didn't add that to this answer so as to keep focused on this question/answer)
In order to get this working, you need to re-design how the elements in your partials are calling the js functions, and you can move the js out to the parent view or to a single shared js file for your site. Note I'm making some assumptions/estimates on html elements below since you did not share that code.
For your upbtn/dnbtn elements, you can change them to something like below. The "buttonsParentElement" div is so we can get to the other btn elements children upon any click.
<div id="buttonsParentElement">
<div id="upbtn" onclick="upbtn_click(this)">UP</div>
<div id="dnbtn" onclick="dnbtn_click(this)">DOWN</div>
</div>
Then update your js methods (again, not in the partial but either in the parent view, or a shared js file):
function upbtn_click(element) {
element.children[0].children[0].style.fill = "green";
var relatedDnBtn = element.closest("#buttonsParentElement").querySelector("#dnbtn");
relatedDnBtn.children[0].children[0].style.fill = "gray"
}
function dnbtn_click(element) {
var relatedUpBtn = element.closest("#buttonsParentElement").querySelector("#upbtn");
relatedUpBtn.children[0].children[0].style.fill = "gray";
element.children[0].children[0].style.fill = "green";
}
I am using Google Sites for my webpage and I want parts of it to be kind of dynamic. Hence, what I want to achieve is to change the CSS class associated with certain HTML element in the presence of an on click event.
E.g.:
Initial situation:
<div class="foo">Hello</div>
World
After clicking on "World":
<div class="bar">Hello</div>
World
Add an ID to the div, then:
function method() {
var myDiv = document.getElementById("myDIV");
myDiv.className = "bar";
}
Alternatively you can get all elements with that particular class name, then loop through them to change their class name.
function method() {
var myDivs = document.getElementsByClassName("foo");
for (var i = 0; i < myDivs.length; i++)
myDivs[i].className = "bar";
}
Now of course you can add if/else statements to check for certain conditions before making changes.
Now that I understand what you are looking for, Check this link.
There is a get and set method for the HTML content of the page requested. By manipulating the generated string, it should be possible to then change the div to the required class and other such things. This should be a good start, we'll have to play around with the rest.
This might also be helpful, but I believe it has several limitations.
Using Magnolia CMS, I am trying to make a property inherit through all child pages.
The property gets set from a base page dialog.
Essentially its just a checkbox that toggles a show/hide Boolean that gets tested in the main page template (which child pages also use).
The dialog control component 'hideHeader' has this structure:
::hideHeader
.buttonLabel: Hide
.class: info.magnolia.ui.form.field.definition.CheckboxFieldDefinition;
.defaultValue: true;
.i18n: true;
.inheritable: true;
.label: hide;
.type: Boolean;
Which is added to the base page dialog.
I access the property in the template like:
[#assign hideHeader = false /]
[#if content.hideHeader?? && content.hideHeader?has_content ]
[#assign hideHeader = content.hideHeader /]
[/#if]
I cant get it to work in the child pages. It doesn't pick up on the set value from the dialog, just the default 'false' value.
What am I missing?
In order to inherit property from anywhere up in the hierarchy of pages, you need to use cmsfn.inheritProperty(content, "your-prop-name").
Using only stkfn.siteRoot(content) as suggested above, will return you root node of the site, so if value was overridden anywhere in the hierarchy you would not see that.
HTH,
Jan
so after suffering from 'code' blindness, I realised to implement the behaviour I wanted I needed to get the property using:
stkfn.siteRoot(content)
this now enables all sub pages to receive the parent pages properties.
Instead of all code above you can just use:
[#assign hideHeader = content.hideHeader!false]
To inherit property you have function in TemplatingFunctions
public Property inheritProperty(Node content, String relPath)
in freemarker you should do something like:
cmsfn.inheritProperty(content, "hideHeader ");
I have GWT CellList and after adding items via a DataProvider I use the following code to add styling to each item.
members... we can styling if a matched item is also in members
matched... passed in as a MetaJsArray<Contact>
CellList<Contact> list = getView().getResults();
for (int i=0; i<matched.length(); i++) {
if (members.isExistingEntry(matched.get(i))) {
list.getRowElement(i).addClassName("RED");
}
}
This code works until... I click items in the list.
onCellPreview() is called for each item clicked, but the previously clicked item loses its "RED" styling.
Do I need to add styling differently? Or how do I stop the loss of "RED"?
My guess its something to do the way GWT generates the javascript. When you manually set the cell on load its all good. When you select it, the javascript changes the object to use the selected CSS and when you un select it, the CSS changes to the default GWT CSS style for the cell.
Only way I can think of is to have a handler on select. When you select an item:
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
// get item last selected
// check if needs re styling
// restyle
// do things with the new selected object
}
});
Add another check through the cell list and mark the ones that got unmarked.
This way might be inefficient, but its one way of avoiding your problem that I can think of. hope it helps.
After trying various approaches the only want that works, without hacks, is to define the style at the point of rendering.
With my own ContactCell extending AbstractCell the render() function can pass in a styling value into the contactcell.ui.xml file.
#Override
public void render(Context context, Contact value, SafeHtmlBuilder sb) {
if (value == null) {
return;
}
String styling = value.getStyling();
uiRenderer.render(sb, styling);
}
and then in contactcell.ui.xml file
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:with field='styling' type='java.lang.String'/>
<div class="{styling}"> ... </div>
GWT will mangle the style name so define your own CssResource class to access the class name thru so that the class name is mangled throughout the app.
i used blue.css and also beige.css in flex .i have theme combobox for user changed theme dynamically so i stroed
[Bindable]
private var pickcss:Array=["blue.css","beige.css"];
private function css_initializeHandler(event:Event):void
{
pickcssComboBox.selectedIndex = pickcss.indexOf(0);
}
private function css_changeHandler(event:Event):void
{
//here how will i apply
styleid= [ pickcssComboBox.selectedItem ];
}
" mx:Label text="Theme"/>
"mx:ComboBox id="pickcssComboBox" dataProvider="{pickcss}"
initialize="css_initializeHandler(event)"
change="css_changeHandler(event)" width="110"/>"
i used in style not have id so how can i do ? if u know plz explain
First, to load style sheets dynamically you need to compile them into separate .swf files. This can be done with mxmlc (or in Flex Builder by right-clicking on the css file and choosing "Compile CSS to SWF").
Then, to load the style-swf, you use the StyleManager
StyleManager.loadStyleDeclarations("blue.swf");
When you want to switch between styles, you'll also want to unload the previous style. So, assuming you put the name of css file in your combobox, in your css_changeHandler you'll do something like this:
StyleManager.unloadStyleDeclarations(styleid)
styleid = pickcssComboBox.selectedItem;
StyleManager.loadStyleDeclarations(styleid);
See Loading style sheets at run time for more details.