I want to change some part of the site based on selected language without any refresh. All worked but I have tried multiple ways to bind background-image dynamically on no refresh site language change (i18n). But no success.
<div :style="{'background-image' : mainBackground}">
test div
</div>
I have created a computed to return currently used link based on language.
mainBackground(){
return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'
}
But after change site language by dropdown all other elements src are updated to use the selected language image file. But only this background path is not updating. Also style attribute is deleted on the element itself. I can not figure out why this solution not worked properly. Also rendered mainBackground computed into the div element. And returned link is updated based on language.
I have solved the problem by using class binding. 1 class for Turkish lang, and main class for all other languages. And used them in conditional class binding. Solution:
:class="[isTurkishSite ? 'bg-turkish' : '']"
It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)
Related
I am using vue2-editor and i want to toggle the content view of the editor like ckeditor or mailchimp editor does
It is possible using vue2-editor or quill?
You can have a computed property that either returns the actual text or uses a library like hypertext to generate html, the return value of the html would be contingent on another computed property and returns the html you want.
I also have a simpler solution, which I used once but need to take a look at my code in a few hours which is not in front of me.
I am suing https://github.com/DominikSerafin/vuebar directive in my project. Now depending on some var i want to use it in html or not.
Like this
<div v-bar>
//this div contains huge html like 1200 lines of code and doing
// v-if is not option since i will have to duplicate all of its content
</div>
So to sumarize:
<div v-bar v-if="somevar"></div> // is not and option bceuse that div contains 1200 of code
Is there any way that i can say something like:
<div some_var ? v-bar:''></div>
Or to make my directive that sort of inherits that v-bar and renders?
Actually you can do one thing. Use Directive Hook Arguments.
You can put your condition based on the hook arguments inside the directive's code. And you can make sure the those hook arguments are reactive so that it could change when you want it to.
Write you logic whether to do something or not for directive inside the directive's code depending upon the binding values.
Read this, please comment if you are not clear.
No, there is no way to apply directive with some condition.
But you can try to create and destroy custom scroll bar programatically, from docs:
Public methods.
You can access them from your component context: this.$vuebar.
Alternatively you can access them from your main Vue instance:
Vue.vuebar. Every method needs to have passed Vuebar scroll container
element as the first argument. You can do that easily using $refs.
initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)
Is there an "easy" way to render a custom element in ag-grid header cell? The headercomponent interface seems like an overly cumbersome approach to a seemingly simple problem and I have not been successful with this approach. The closest I have come is to use something like:
header-cell-render.bind="myHeaderRenderer"
which is currently a function returning a string of HTML. While this "works" (though I understand it is deprecated), in the sense that the html is injected into the DOM, only primitive HTML renders. Meaning I can return something like:
<input type="checkbox" />
and it will render a checkbox, but I cannot return something like:
<my-custom-element></my-custom-element>
I can see that markup in the DOM, but the element doesn't "process", that is the Aurelia aspect of the control is not executed.
I am using the latest versions of ag-grid, ag-grid-aurelia.
Any help would be greatly appreciated.
This is currently not possible out of the box with ag-grid-aurelia.
This is because ag-grid-aurelia makes no special handling for this binding. The proper way to handle this is using replaceable parts which allows you to specify a template for Aurelia to inject and consume. ag-grid makes this a bit harder since it seems the only native tool for injecting content into the header is by passing an HTML string or an HTML element in the column configuration. This can likely be added to the ag-grid-aurelia library by using a combination of replaceable parts and the #children decorator to gain access to the aurelia-rendered header element and pass it to the column configuration.
Episerver always wrap shared block in a tag. I would like to get rid of this. So if in my LinkBlock has a Template with only
link
I would not get a
<div>link</div>
in the view for a user.
If this is not possible how can I change <div> to any other tag, or put a CssClass on it. Like it is possible in not shared blocks:
<EPiServer:Property runat="server" PropertyName="RightContentArea" CustomTagName="aside" CssClass="column-2 sidebar"></EPiServer:Property>
I believe it is the rendering of the ContentArea property which adds the div tags around the blocks it contains.
EPiServer suggests that in order to preserve the editing functionality of the block elements themselves they need to have the div around them.
A possible solution might be for you to do your own custom rendering of content areas, but depending on the kind of block templates you're using it can be tricky to get editing to work. The example in the link is for rendering multiple blocks of the same type.
You can use the CustomTagName and CssClass properties of the Property control to format the container element.
You may also use RenderSettings to modify container elements of child elements (where applicable).
I use this trick in cshtml:
#RenderBlocks(Model.CurrentPage.Content1)
#* ---------------------------------------------------------------------------------- *#
#* Render ContentArea without addition DIVs that EpiServer embed. That breaks layout a lot. *#
#helper RenderBlocks(EPiServer.Core.ContentArea content) {
if(null != content){
var blocks = content.FilteredContents.ToArray();
foreach(var block in blocks){
#Html.PropertyFor(x => block)
}
}
}
You can choose the tag using the CustomTagName attribute on the Property Control
Alternatively, if you wanted to remove the tag, you could use a control adapter. A good example is found here
You can also create a custom content area that doesn't render the divs when edited in live mode and only renders them in edit mode.
If you only need to do this once or twice I would still recommend going with the ChildrenCustomTagName route as it's a bit mroe flexible. If you need to do this a lot and you can't change your CSS easily then I would go custom content area. If you are interested in how to remove the div's I wrote a blog post and a sample site on github here Extra divs in content area how to remove them ?
Since i wasn't able to remove the <div>'s i didn't want, i put my own CSS class on them. This did the trick for me in Webforms. (If anyone still uses it)
Use <RenderSettings ChildrenCssClass="yourCssClass" />
<EPiServer:Property runat="server" PropertyName="RightContentArea"CustomTagName="aside" CssClass="column-2 sidebar"><RenderSettings ChildrenCssClass="yourCssClass"></RenderSettings></EPiServer:Property>
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});