For some reason my mermaid chart does not show in a meteor page. I do see some SVG things in the dom but no chart is rendered...
<div class="ui container mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
Template.APILogs.onRendered(function() {
console.log('Test page! mermaid version'+mermaid.version());
mermaid.initialize({startOnLoad:true});
});
Thanks so much for you help... I am missing something something very obvious here...
It's difficult to tell from the code samples you've shown, but since you're making your mermaid.initialize call in the Template.APILogs template's onRendered callback, you're binding it to that template. That means it will only initialize your mermaid charts within an associated APILogs template. Something like:
<template name="APILogs">
<div class="ui container mermaid">
...
</div>
</template>
Make sure you've defined the APILogs template like the above.
Related
Today, I'd like to create an element that generated a list of "cards". On these cards there could be very different things according to which page it gets included. For instance, sometimes these cards contain a picture, sometimes there could be contact information (name, age, adress, phone...), sometimes it could contain only a video, etc...
So what my idea was to design a polymer element that handle the CSS, the ajax call to the datasource, the dom-repeat, and a <slot> (formerly known as <content>) which would include in this element the html template used to create the card content (picture, video, or contact card)
this is what I did so far:
Parent element:
<tiles-list id="tilesView" datas="[[datas]]">
<img src="https//lorempixel.com/200/130/people" />
<p>[[item.name]]</p>
<p>[[item.age]]</p>
<p>[[item.adress]]</p>
<p>[[item.phone]]</p>
</tiles-list>
{{datas}}is replaced by the URL for the ajax call
and in the child element:
<iron-ajax
auto
url="[[datas]]"
handle-as="json"
last-response="{{ajax}}"
on-response="log"></iron-ajax>
<div id="grid">
<template is="dom-repeat" items="[[ajax.data]]">
<div class="card gridCell">
<slot></slot>
</div>
</template>
</div>
But yeah, it doesn't work. All I get is a list with the right amount of cards, but only the first one contains a picture, but no data. So I guess the slot doesn't work like I'm trying to make it work, and the data binding cannot work this way either.
Anybody has a solution?
I think what you want to achive is a perfect case for the Templatizer.
Change your code to:
<tiles-list id="tilesView" datas="[[datas]]">
<template tile>
<img src="https//lorempixel.com/200/130/people" />
<p>[[item.name]]</p>
<p>[[item.age]]</p>
<p>[[item.adress]]</p>
<p>[[item.phone]]</p>
</template>
</tiles-list>
And then when your ajax request resolves do something like this:
var template = Polymer.dom(this).querySelector('template[tile]');
this.templatize(template);
ajax.data.forEach(function(item){
var instance = this.stamp(item);
Polymer.dom(this.$.grid).appendChild(instance.root);
});
This will create several instances of you template, no dom-repeat needed.
super css noob here.
I'm using a wordpress plugin called visual composer which allows you to name a Row (it's like a block element) with a Row ID or a Class name. I'm trying to have it so when a user hovers over this row and when they click it, this clicking will simply take them to another page within my website.
It allows for an area to have the css for this class or ID that I can associate with the tag, but after searching I'm either searching the wrong thing or can't find it but I am looking for the css that would allow me to do this!
You can't only use css to link to other page, you need javascript. For example the class name is linkPage:
document.getElementsByClassName('linkPage')[0].onclick = function(){
location.href= 'some url...'
}
<div class="linkPage">linkPage</div>
You'd need to inject a bit of JS into the theme that listens on window for a click with the desired ID or class, then call window.location.href = URL or something of that nature.
CSS doesn't have the power to cause browser location changes.
CSS
CSS (Cascading Style Sheet), as its name states, defines a set of rules and properties for an HTML page you wish to style (stuff like colors, size, asf); and user interaction (even as minor as pointing to an URL) are not part of its scope.
Basic
Talking about a giant like WordPress and a strong plugin such as Visual Composer, extremely old and standard features like link/image/table asf are always to be found. You may have a look at visual composer's "Raw HTML" feature (https://vc.wpbakery.com/features/content-elements/) in combination with a regular "a" tag (http://www.w3schools.com/tags/tag_a.asp).
Editable
Asking how page linking can be achieved through editing of a CSS file, then you might as well look into different editable content types of the plugin - such as HTML or JS.
Click on table row
Best approach to have table cells/rows clickable would be by the use of JavaScript; see Adding an onclick event to a table row
Link using jQuery and Javascript (easier method):
$(".link").click(function(){
window.location.replace('https://www.example.com');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Link using pure Javascript (harder method):
x = document.querySelectorAll('.link').length;
y = 1;
while (x => y) {
document.getElementsByClassName("link")[y].onclick = function() {
window.location.replace("https://www.example.com");
};
y++;
}
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Meteor seems to skip CSS transitions when these are triggered through a template helper.
Is there a way to work around this?
Example:
<template name="example-template">
<div class="example {{myhelper}}"></div>
</template>
Then, "myhelper" would get assigned, through a template helper, a classname that triggers a css transition. But, for some reason, the class is applied but skipping the transition.
I assume this conflicts with Meteor's auto-rendering when the template data sources change, but I don't know how to get around it (I'd like to avoid using jquery for this).
CSS transitions after rendering a new template aren't yet supported by Meteor. The reason is that when rendering the template example-template again, the new HTML is just appended to the DOM with the new classname. Since the DOM changes, the transition doesn't happen.
Your best bet is to use the rendered event in combination with a loading classname:
<template name="example-template">
<div class="example loading"></div>
</template>
Template['example-template'].rendered = function() {
// remove the loading classname here, and have that trigger a transition
}
This is supposed to get easier after new Meteor UI lands (see http://www.youtube.com/watch?v=pGQ-ax5cFnk), but until then you can do this with a preserve directive for your template:
HTML:
<template name="example">
<div id="example-div" class="example {{myhelper}}"></div>
</template>
JS:
Template.example.preserve(['#example-div']);
See http://docs.meteor.com/#template_preserve for more info.
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.
This is going to drive me crazy at this rate. From inside of a Layout.cshtml file for a theme in Orchard, how can I determine the Title of the main body's contents?
I've tried using the Shape Tracer but it doesn't seem to help. None of these give me any text at all.
#Html.Title()
#Model.Title
#Model.Content.Parts_Common_Body.ContentItem.TitlePart
#Model.ContentItem.Parts_Common_Body.ContentItem.TitlePart
UPDATE:
Here's the HTML which should show what the end result needs to look like to keep the theme intact, along with a picture showing the theme before I started with it. This HTML is just a snippet of the parts that I'm concerned with. In the picture, the search is what is in the ContentHeader zone.
<div id="wrapper-header-inner">
<div id="header-inner">
#Zone(Model.ContentHeader)
<h1 class="pagetitle">
Title Here
</h1>
</div><!-- #header-inner -->
</div><!-- #wrapper-header-inner -->
}
<div id="wrapper-content">
<div id="content">
#if(Model.Content != null) {
<div class="main" class="#mainContentClass">
#if(Model.Content != null && Model.LeftAside == null && Model.RightAside == null) {
<div id="maincontentFull" class="positionleft">
#Zone(Model.Content)
</div>
}
#* Other layout possabilities if left and/or right asides are present *#
</div>
}
</div>
</div>
As a follow up, updates to Orchard since I have asked this question included the ability to use the placement.info file to reroute certain parts to other zones, in effect letting me accomplish what I was looking for.
<Placement>
<Match ContentType="Page">
<Place Parts_Title="/TitleZone"/>
</Match>
</Placement>
From Layout, Model is the Layout object. It has nothing to do whatsoever with whatever content is going to get rendered into the Content zone, but it does have a Title property that should be set by that content. It is not exactly what you are asking for though: it is what will end-up being the HTML title.
If you want to get to the title of the item that gets rendered into the top-level Content zone, well, Layout is really not a good place to look for that. I would need to know more about what exactly you are trying to achieve but this seems backwards. In fact, you can't even assume that there is one such content item, or that there will be only one.
So what is it exactly that you are trying to do?
Does this work for you?
#Html.Title()
That should work if you're looking for the page title. However, if you're looking to directly access the TitlePart...
#Model.Title
This works because if you look in the Parts.Title template there is a line of code that does this...
#{
Layout.Title = Model.Title;
}