New to coding, trying to see what/if Tags would make this code work
So I'm a beginner with basic understanding and more of a Graphics/ Designer than code based. I found a codepen by WEDOO that has exactly what I need and want to try to just swap my "animationData" to see if I can get it to work and then modify it as needed for my test (will be assign the button code to various objects for the SVG). I Can't seem to find the right "Tags" or determine if its referencing an external script...I'd image it just needs the right information to function...is that correct?
Thanks in advance!
var animation = bodymovin.loadAnimation({
container: targetAnim,
path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/914929/data-testo4.json...
My output from BodyMovin in a JSON file:
var animationData =
{"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
Does it make sense to think that I need replace the var animation with info that should be the targetAnim with the code in the JSON file? So far put the var animationData breaks things and does nothing (visually).
The bodymovin.loadAnimation can be passed either a URL to a Bodymovin JSON via the path option OR you can pass the animation JSON inline by setting the animationData option instead.
In you case it would end up looking something like:
var animation = bodymovin.loadAnimation({
container: targetAnim,
animationData = {"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
...
})
Related
I want to give my users the possibility to create document templates (contracts, emails, etc.)
The best option I figured out would be to store these document templates in mongo (maybe I'm wrong...)
I've been searching for a couple of hours now but I can't figure out how to render these document template with their data context.
Example:
Template stored in Mongo: "Dear {{firstname}}"
data context: {firstname: "Tom"}
On Tom's website, He should read: "Dear Tom"
How can I do this?
EDIT
After some researches, I discovered a package called spacebars-compiler that brings the option to compile to the client:
meteor add spacebars-compiler
I then tried something like this:
Template.doctypesList.rendered = ->
content = "<div>" + this.data.content + "</div>"
template = Spacebars.compile content
rendered = UI.dynamic(template,{name:"nicolas"})
UI.insert(rendered, $(this).closest(".widget-body"))
but it doesn't work.
the template gets compiled but then, I don't know how to interpret it with its data context and to send it back to the web page.
EDIT 2
I'm getting closer thanks to Tom.
This is what I did:
Template.doctypesList.rendered = ->
content = this.data.content
console.log content
templateName = "template_#{this.data._id}"
Template.__define__(templateName, () -> content)
rendered = UI.renderWithData(eval("Template.#{templateName}"),{name:"nicolas"})
UI.insert(rendered, $("#content_" + this.data._id).get(0))
This works excepted the fact that the name is not injected into the template. UI.renderWithData renders the template but without the data context...
The thing your are missing is the call to (undocumented!) Template.__define__ which requires the template name (pick something unique and clever) as the first argument and the render function which you get from your space bars compiler. When it is done you can use {{> UI.dynamic}} as #Slava suggested.
There is also another way to do it, by using UI.Component API, but I guess it's pretty unstable at the moment, so maybe I will skip this, at least for now.
Use UI.dynamic: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
It is fairly new and didn't make its way to docs for some reason.
There are few ways to achieve what you want, but I would do it like this:
You're probably already using underscore.js, if not Meteor has core package for it.
You could use underscore templates (http://underscorejs.org/#template) like this:
var templateString = 'Dear <%= firstname %>'
and later compile it using
_.template(templateString, {firstname: "Tom"})
to get Dear Tom.
Of course you can store templateString in MongoDB in the meantime.
You can set delimiters to whatever you want, <%= %> is just the default.
Compiled template is essentially htmljs notation Meteor uses (or so I suppose) and it uses Template.template_name.lookup to render correct data. Check in console if Template.template_name.lookup("data_helper")() returns the correct data.
I recently had to solve this exact (or similar) problem of compiling templates client side. You need to make sure the order of things is like this:
Compiled template is present on client
Template data is present (verify with Template.template_name.lookup("data_name")() )
Render the template on page now
To compile the template, as #apendua have suggested, use (this is how I use it and it works for me)
Template.__define__(name, eval(Spacebars.compile(
newHtml, {
isTemplate: true,
sourceName: 'Template "' + name + '"'
}
)));
After this you need to make sure the data you want to render in template is available before you actually render the template on page. This is what I use for rendering template on page:
UI.DomRange.insert(UI.render(Template.template_name).dom, document.body);
Although my use case for rendering templates client side is somewhat different (my task was to live update the changed template overriding meteor's hot code push), but this worked best among different methods of rendering the template.
You can check my very early stage package which does this here: https://github.com/channikhabra/meteor-live-update/blob/master/js/live-update.js
I am fairly new to real-world programming so my code might be ugly, but may be it'll give you some pointers to solve your problem. (If you find me doing something stupid in there, or see something which is better done some other way, please feel free to drop a comment. That's the only way I get feedback for improvement as I am new and essentially code alone sitting in my dark corner).
I have started to use Stackmob as a backend for a simple app I am building.
In stackmob I have set a relationship between two schema's and want to use '.fetchExpanded' to grab all of the data from stackmob, see this fiddle (will need to view the console to see the output):
http://jsfiddle.net/mcneela86/65Rax/
.fetchExtended(1);
The same code works using the '.fetch' instead of '.fetchExpanded'.
Has anyone come across this before?
Would really appreciate any help.
Ok, I found a work around for this.
Instead of using '.fetchExtended(1);' I will just use '.fetch();' and when I am defining the model I will change the following:
var Bike = StackMob.Model.extend({
schemaName: "bikes"
});
to:
var Bike = StackMob.Model.extend({
schemaName: "bikes?_expand=1"
});
This seems to remove the need for '.fetchExtended(1);'
Hope this helps someone else.
Looking for a way to add a custom timestamp(and maybe some extra info) inside a CSS/HTML file everytime you save the file. Is there an extention for brackets, sublime or dreamweaver that does this, Or perhaps some other way to do this?
Thanks
I think this post will give you a Sublime Text plugin that should do what you ask.
In Brackets, you can configure the snippets extension to insert a timestamp manually, like the answer above for Sublime. Here's how: https://stackoverflow.com/a/18844762/1172352.
Similar to the Sublime answer, it would be a bit trickier to do it automatically every time you save. There's not yet a clean hook in Brackets for pre-save processing. Several extensions get around this by listening for a post-save event and saving quickly a second time. You could probably write a timestamp-auto-inserter extension by borrowing their code for that pattern.
Anything that runs automatically would also need a little extra code to find the old timestamp and replace it -- both the snippets solution here and the Sublime solution above just insert the timestamp wherever the cursor/selection is. A regular expression should do the trick for detection.
You'd also want to screen out other file types. Bringing it all together, it would look something like this for Brackets:
function documentSavedHandler(event, doc) {
// TODO: need a little extra code here to ignore save events triggered
// by ourself, to avoid infinite loop
var langId = doc.getLanguage().getId();
if (langId === "html" || langId === "css") {
var pos = /* use regexp to find old timestamp */;
doc.replaceRange(timestampStr, posStart, posEnd);
CommandManager.execute(Commands.FILE_SAVE);
}
}
I have the following line of code in my JavaScript program
MyFrame.src = mainPath + "/resources/help.htm";
This is the default but in some cases I would like to load the contents of this iFrame with a string that I build dynamically, such as:
"<html><head></head><body>This is additional help that was built dynamically on the fly</body></html>"
Is there a way to do this?
Thanks
Yes:
MyFrame.contentWindow.document.write("<html><head></head><body>This is additional help that was built dynamically on the fly</body></html>");
in flashCS3.app i think all you have to do is:
var thumb_url = my_images[i].#URL;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
but i am using flex + as3project.
how can i translate?
do i need some sort of bitmapdata class or is there a more transparent translation?
the error i get is something along the lines of "content type undefined".
thanks,
jml
I guess, it'd help a lot, if you could provide a URL where it doesn't work ...
you cannot define the content type ... the content type should be defined by the server, in a HTTP response header ... however flash player usually ignores it and looks at the starting sequence to determine the loaded content type ...
as just_a_dude mentioned, the error you get, appears, when the file type is not supported ... what kind of image are you loading?
it looks like it was as simple as a bunk link.
sorry for the noise; i had a mal-formatted PHP string that was calling an image up.