I am trying to work an admin theme into an ember project. There is a custom.js file that has a lot of the javascript for the sidebar, header stuff etc. I have it in the vendor folder vendor/custom.js. I am including it in ember-cli-build as app.import('vendor/custom.js'); When I look in chrome at the vendor.js file I see the contents listed in it, but the javascript on the page does not work.
If I take some of the sections out of the custom.js and put them in the hbs file within tags the do run and work. I'm wondering why just including importing the file doesn't work.
Any thoughts on what could be wrong?
Here is a link to the custom.js file Custom.js Gist
You are trying to include customjs from the admin theme into your app.
Instead of including the custom.js directly, create custom components for each admin-theme component.
In your component you can register you click-event handler and you jquery custom code. There is a old blog post from a core team member acout this.
http://www.programwitherik.com/how-to-initialize-a-jquery-component-with-ember-js/
But i think you need some basic knowledge about how ember is rendering and what a component is compared to a controller + template. You also need to understand what the admintheme js is trying to achieve.
Related
I was trying to implement this widget to my Angular app. For the second part I was able to create a custom js file in my assets folder, create a .d.ts file for it and successfully imported the function in my component.
But for the first part:
<script async src="https://telegram.org/js/telegram-widget.js?5" data-telegram-login="samplebot" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script>
If I do it with plain HTML and js, it will fetch from the website and generate a login button. Yet I tried simply pasting it into my component's HTML, it does not get rendered. As it is not a function nor a variable, I am not sure how can I place it into a specific div in the component.
Please help.
I am building an Angular-Dart site based on a commercial Bootstrap template.
The correct rendering should be like this:
I used IntelliJ to scaffold a Dart/Angular app and started to modify from there.
I have put related files (CSS/JS/images) of that template into web/css, web/js, respectively.
HTML used is verbatim copied from the template but I have taken out the CSS, JS reference from btqun_component.html and moved into index.html.
The output is like this:
Obviously, the CSS is working, and the header/footer are showing correctly. But the masonry effect is not showing, so I doubt that is related to JS reference.
Can anyone give any hints on this?
Do you have a documentation for the bootstrap template ? I guess you need to execute the javascript they provide to you so you need to add it to your index.html, and you probably need to import bootstrap and jquery too.
If you need to call a javascript function you can do it directly in the index.html inside a script tag or build a dart wrapper using package:js
EDIT: answer to call jQuery function from Dart
I bought a wrapbootstrap theme recently and wanted to convert into meteor project.
I have a jquery module js file called "jquery.countTo.js" that I want to import into my meteor project. I am not sure how to do it.
these are the ways I tried:
put it inside "compatibility" folder
use jquery's getScript to load the js file
Meteor.startup(function(){
$.getScript('../js/jquery.countTo.js', function(){});
});
created a new package and in the package.js file I simply modify the line "api.mainModule()" to api.mainModule('jquery.countTo.js'); However, when I run the project, it crashes when it reads this package, from the error, I am assuming its because my package doesn't know the file jquery.countTo.js depend on jquery. What more should I add to package.js to tell it that it needs to load jquery first.
none of these worked. I think the code might have loaded, but its functionality is not working,
its supposed to change the frontend number from 1 to a destionation number you want to display, by using html attributes "data-from" and "data-to"
For example, this is in HTML code:
<h2 class="timer mb5" data-from="1" data-to="15381" data-refresh-interval="20">1</h2>
Can someone who have experience incorporating theme into meteor project, Please advise how to deal with js files
Thank you very much!
I used helpers to do something similar to this.
Example:
HTML FIle:
<template name="test1">
<div id="test2">
Hello World
</div>
{{helloworld}}
</template>
JS File:
Template.test1.helpers({
'helloworld': function(){
//jquery or javascript code to be rendered
}});
Template.test1.events({
"click .test2": function(){
//jquery or javascript code performed on click
}});
You should use Templates.test1.rendered({});and can avoid calling {{helloworld}} in the template.
Alternatively, you can import those files in to the templates you need.
According to Mozilla's pdfjs plugin, I can view my pdfs by passing a query param to viewer.html as shown below:
http://localhost/MyProject/viewer.html/?file=file.pdf
This is working fine. But I have some different kind of requirement. The requirement in my project is that I need to have tabs like feature on a single page. Each tab holds a pdf file.
So, I am thinking to make all the code in the viewer.js to a big function. So that I can use it as constructor to render each pdf file. Something like this:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
Anyway, I decided to do the above changes later when I am able to integrate pdfjs's viewer functionality successfully in my project.
Summary of my project:
Single page application
All templates are being maintained in a single file within an Object of name - templates
To do so, first of all, I copied all the html inside of the body tag of viewer.html and appended as new property to the templates object. and then I copied all necessary and dependency files from the example to my project's folder and loaded them dynamically. The files which I included are:
pdf.js
pdf.worker.js
viewer.js
l10n.js
viewer.css - I am not loading this file dynamically.
After loading of files, I am rendering the viewer.html's template using lodash. Still, I can't able to see the rendered pdf in my project. I suspect this might be because everything is happening dynamically. (but I am not sure because everything is being rendered in sequence as it should be)
Btw, I have added the default pdf with name compressed.tracemonkey-pldi-09.pdf adjacent to index.html file. What could I be missing?
Firefox and chrome doesn't throw any error.
Note: I might be doing in wrong way. Suggesting me to solve in right directions would be appreciable.
Some important points while modifying viewer.js.
It is recommended to build your own viewer.js instead of modifying the available viewer.js file which is actually just for demo purpose.
You can create your own viewer.js file by visiting each js files available here.
If you have only small things to modify in the existing demo viewer.js, then
Mention the exact path for pdf.worker.js file inside your viewer.js.
This file will start rendering pdf on DomContentLoaded event. If you are planning to render the pdf file dynamically later, then you should comment this event register and call the following function whenever necessary.
webViewerLoad();
I hope this will help someone.
I'm a newbie who's trying to build a meteor app, and I was looking to cut some time by using a commercial theme. Let's take this as an example:
http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?WT.ac=category_item&WT.seg_1=category_item&WT.z_author=keenthemes
I have two options:
1) Use the html to create meteor templates, using spacebars tags, etc.
But how would I implement the theme javascript? doesnt it comes in conflict with meteor?
2) Use angular.js, as the theme is provided in angular.js format other than plain html. But wouldnt this create conflicts? is this a better approach?
In general, what is the easiest and best way to use commercial themes with meteor?
I bought similar themes on wrapbootstrap. I think it is the same problem here. (for Angular theme I do not know, as it would be trickier I think to integrate it with bootstrap)
Generally with such themes, you have a lot of 3rd-part JS libraries. You have to get them.
First option, you find a similar packages on atmosphere and you can add it. (A lot of jQuery library are simply wrapped as packages).
Second option, there is no such package (you can make and add them, and it would help the community :)). You can import them on the page you need with a package like wait-on-lib
You can import the libraries where you need them only. But I think the first option is cleaner.
And you will probably have some custom.js for each different page you have in your template, you have to transfer this logic when you render a template. For example the custom.js for the index file in your template will be transformed in :
A template name index where you can put the HTML and
Template.index.rendered = function(){
/* your custom js */
}
For the CSS you can simply copy past the files in client/css (for example) the files will be loaded.
I do not know if I have been very clear, but I managed to integrate such themes in meteor project. And do not forget to remove unnecessary files, for example when you add the bootstrap package, you can remove the bootstrap css and js files integreted to your template.
P.S : You may have to search/remplace path in the css and js files from the templates to load some images for example. Put all such files (as images) in your public folder, where you want, but do not forget to rewrite the path in your css and js files.
For example if you bougth a template where they have folder like :
folder_css
folder_image
...
the path are written this way :
/* css files */
background-image: url(../folder_image/myimage.png);
But in a meteor project, all files in public folder are at the root of the project, so you can rewrite your path, with for example something like this :
/* css files */
background-image: url(img/myimage.png);
Rewrite path in JS files also and I think it should work.