How can I prevent intro and outro transitions from happening when adding or removing a larger chunk of a page? For example:
{{#if foo}}
<div intro-outro="fade">
Welcome to my cool section
{{#if bar}}
<div intro-outro="slide">
Here's a single piece of that section
</div>
{{/if}}
</div>
{{/if}}
When I set foo=false, I see the bar block sliding away as the entire foo block fades out. I can't imagine when someone would want this as the desired behavior. Am I doing something wrong? How do you deal with nested blocks that each have transitions?
Related
I would like to select a child if it is a specific number of specific (eg. .specialid) parent elements away from a specific (eg. .specialchild) child element.
example (selecting .specialchild under odd nestings of .specialid:
<span>ignored</span>
<div class="specialid"><!--odd - select-->
<span>ignore</span>
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of .specialid-->
<div class="specialid"><!--even - do not select-->
<div>
<div>
<span class="specialchild">ignored</span><!--ignore-->
</div>
</div>
<div class="specialid"><!--odd - select-->
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of .specialid-->
<span>ignored</span><!--ignore-->
</div>
</div>
<div><!--not .specialid, so ignore in even-odd toggle-->
<div class="specialid"><!--even - select-->
<span class="specialchild">ignored</span><!--ignore b/c even parent of .specialid-->
</div>
</div>
</div>
EDIT: If needed, I am open to JavaScript alternatives. (but no JQuery)
EDIT 2: visual: I am making a dark theme chrome extension, and i am using css filters to do it. when applied over each other, they cancel out. the element with the white background and the metal wolf thing, since it has a background image set, has the filter applied over it as well, thus keeping it from looking weird. However, my profile icon is located inside this element, and <img> tags are also filtered again to cancel out the effect. this is where the problem begins. this then leaves it with three filter effects, two of which cancel out, and leaving the image inverted. i am attempting to solve this issue for elements no matter how deeply they are nested. btw im using javascript to detect the background image and add a data- attribute to it.
EDIT i just figured out that i could also just have it so that all children of odd nestings of .specialid can be selected EXCEPT another nested .specialid, without even referencing .specialchild
Ok, first of all, you can't have repeated ID's as ID's are used for unique elements. In order to correct your code you'd have to do something like this:
<span>ignored</span>
<div class="specialid"><!--odd - select-->
<span>ignore</span>
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of #specialid-->
<div class="specialid"><!--even - do not select-->
<div>
<div>
<span class="specialchild">ignored</span><!--ignore-->
</div>
</div>
<div class="specialid"><!--odd - select-->
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of #specialid-->
<span>ignored</span><!--ignore-->
</div>
</div>
<div><!--not #specialid, so ignore in even-odd toggle-->
<div class="specialid"><!--even - select-->
<span class="specialchild">ignored</span><!--ignore b/c even parent of #specialid-->
</div>
</div>
</div>
Honestly, I am not really sure what you're trying to achieve with this code, and the structure is a little strange, but I would probably recommend using definitions like these:
To refer to odd .specialid elements.
.specialid:nth-child(odd) { ... }
To refer to odd .specialchild child element of odd .specialid
.specialid:nth-child(odd) > .specialchild:nth-child(even) { ... }
To refer to odd .specialid elements inside odd .specialid elements
.specialid:nth-child(odd) .specialid:nth-child(even) { ... }
I am not sure what else you're trying to achieve but you should work on your HTML structure first.
I was able to answer my own question:
:not(.specialid) *:not(.specialid) .specialid *:not(.specialid) .specialchild{
/*styles*/
}
I'm about to start a new project using Aurelia and I'm considering to use it in conjunction with CSS BEM methodology.
First question: Is this basically considered a good match or are there any alternatives which "fit" better with Aurelia?
Main question:
Best explained with an example for some custom Aurelia view (an app header):
<template>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
When embedded into another view, this leads to a resulting DOM like this (simplified):
<app-header>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu>
<!-- ... -->
</app-menu>
</div>
</app-header>
Obviously, the wrapper div with the AppHeader class is kind of superfluous since there's also the app-header tag. Unfortunately it doesn't seem to be possible to assign the CSS class AppHeader (which is needed for BEM) to the base element of the view (the template tag in the view file).
Are there any alternative ways that I'm not aware of or is it considered "good" practice (or at least acceptable) to have many wrapper elements inside views which somehow bloat the DOM?
I just realized, that putting custom classes on the custom elements themselves (the template) actually works, so I can simply write something like this:
<template class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</template>
Edit / Additional info
This won't work if the view is a "base view" of a route since the template element won't be rendered at all in this scenario but is replaced by the router-view element.
I believe that even a hundred extra DOM nodes is not a problem for contemporary browsers but if it's really important to avoid them you may try custom tags instead of classes (see list of restrictions here https://en.bem.info/methodology/faq/#why-are-custom-tags-not-used-for-blocks-in-bem).
Perhaps the #containerless will solve your problems:
In your view model:
#containerless
export class AppHeader {
...
}
In this way, the <app-header> container will not be rendered.
If your component is a view-only component, you can declare containerless in the <template> tag:
<template containerless>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
UPDATE:
Here's a fiddle. It works a little better than my own real app, but still highlights a potential bug (or my misunderstanding). Notice that the "outro" transition doesn't work.
http://jsfiddle.net/k4a81fza/1/
Original:
This is a partial I'm using inside of a parent Ractive:
<script id="session_tpl" type="text/ractive">
<div>
<a href="#" on-tap="showDetail">
{{#if p.project !== null}}
<p intro-outro="fly">
{{project}}
</p>
{{/if}}
</a>
</div>
</script>
Here's how I'm trying to then update the data (which is changed from a different ractive that represents a detail view):
daysRac.set('days[1].sessions[2].project', null);
The <p> tag in in the template successfully disappears, but without the transition. I've tried other transitions and tweaked duration and delay, but it always is just instantly removed.
Ideally I want different outro and intro transitions, which I thought I could achieve with something like this:
daysRac.set(keypathToProject, null, function(){
daysRac.set(keypathToProject, "The New Value");
});
Again, that works to update the project value displayed in the <p>, but without transitions.
Is there a way to accomplish what I'm after?
This is probably a bug, I submitted an issue on GitHub.
The problem is that Ractive updates {{description}} to null before the transition starts. It works correctly if you don't use an expression, i.e. if you change {{#if description !== null}} to {{#if describtion}}.
I observe some very strage behavior. When using {{#if}} inside a div class tag:
<div class="gallery-row {{#if helper}}class2{{/if}}">
I get the following DOM fragment:
<div class="gallery-row <!--data:Hb4bubiKDcedk9Z85-->">
I have similar {{#if}} clauses in other class definitions. When I use the {{#if}} outside the div tag it seems to work fine. I guess I did some silly mistake or there is a bug here.
The comment is a spark (meteor's templating system) annotation, which don't work well inside HTML tags (as html comments are invalid inside them). This is known issue, see: https://github.com/meteor/meteor/issues/800.
Move your helpers outside the tags.
{{#if helper}}
<div class="class1 class2">
{{else}}
<div class="class1">
{{/if}}
Or create a helper for classes and use <div class="{{classes}}"> instead
I have some templates that look roughly like this:
<template name="items">
<div class="item-list">
{{#each items}}
{{> item}}
{{/each}}
<div>
{{> loadMore}}
</template>
<template name="item">
<div class="item" id="{{unique_string}}">
<!-- stuff here -->
</div>
</template>
<template name="loadMore">
Load more...
</template>
With associated javascript:
Template.items.items = function() {
return Items.find({}, {limit: Session.get("itemCount")});
}
Template.loadMore.events({
"click": function() {
Session.set("itemCount", Session.get("itemCount") + 10);
}
})
All that together more-or-less gives me something that pretty much works like an infinite scrolling section. (The actual code has a few more moving parts, but this is the important bit.)
Whenever I click on loadMore, though, it both pulls more data down and scrolls me back to the top of the page, rather defeating the purpose of infinite scroll. I can throw in some javascript to scroll back down to where it should be, but that leaves a nasty flicker as the page hops around quicly.
I've tried using preserve on the entire list as well as on each item div to keep them from getting updated, but that didn't seem to stop the scrolling. I've also tried putting {{#isolate}} blocks around just about any and everything, without any luck.
Is there something I can do here to make the page not scroll around while it re-renders? Composing templates differently? Some aspect of preserve or {{#isolate}} that I've missed?
The page scrolls to top because your
Load more... will make the page scroll to top. When your href links to "#" the page will scroll to the DOM element with #"element id". Clicking a link with only "#" will scroll to top.
You have two options:
Prevent the default behaviour on the click event (easy option):
Template.loadMore.events({
"click": function(event) {
event.preventDefault();
Session.set("itemCount", Session.get("itemCount") + 10);
} })
This will stop the page reload
Even better: make the Load more... link to "#{{_id}}" then the page will automatically scroll to the element with the id you provided. This will require some restructuring of the templates and maybe a helper method in the template to give you the id of the last item. But it will make your page load exactly where you want.