My website has two kind of pages:
Pages where javascript widgets are the main content of the page (TypeA) and where widgets are some additional content, that user might to trigger (TypeB).
So I'd like to split my JS codebase into three bundles:
vendor.js -- which is included on all pages
runtime.js -- for widgets
specific entry points for different pages
For TypeA-pages I have this:
<script src="vendor.js"></script>
<script src="runtime.js"></script>
<script src="pageA.js"></script>
<!-- pageA.js launches the widget -->
But for TypeB I want this:
<script src="vendor.js"></script>
<scriprt>
<!-- pseudo code -->
when('user clicks button', function() {
require.ensure('pageB.js', function(require) {
var pageBCode = require('pageB.js');
<!-- do the magic -->
<!-- but I also need runtime.js here -->
});
});
</script>
The problem is, that I want to reuse runtime.js in both sync and async pages. But I can't figure out how to load runtime.js along with my on-demand loading pageB.js. I still have to include it via <script src="runtime.js"></script>.
(I use CommonChunksPlugin for creating vendor.js and runtime.js, and it works well on TypeA pages)
You can pass an array to require.ensure as such:
require.ensure(['pageB.js','runtime.js'], function(require){
var pageBCode = require('pageB.js'),
runtimeCode = require('runtime.js');
/** MAGIC! **/
});
Related
Given the following code:
$('img').mouseenter(function(){
//...
}).mouseleave(function(){
//...
});
I'd like it to be included in my articles. I'd like to avoid editing the theme if possible so to avoid forking etc.
This depends a little on which theme you use. This may be an area where we could do a better job, but do this:
In the theme, look in the
layouts/partials folder.
If you find a header.html or similar, copy this to your local layouts/partials. You can then override the content of this file only. Alternatively you can customize by copying the template used for single pages, often: layouts/_default/single.html.
bep's answer is excellent, but here are some additional details for hugo/frontend newcomers like me
1. Find a place in your HTML where to include the JS
First, one should copy the header.html or footer.html (or similar) of the Hugo theme to your layouts/partials folder. It does not necessarily have to be the header or the footer, but a file that is included in every page on your html (and that's why you would typically use the header.html or footer.html).
I got a theme that had the footer at <theme_folder>\layouts\partials\_shared\footer.html, which I then copied from the theme folder into the project layout folder <project_root>\layouts\partials\_shared\footer.html.
2. Include the script.js in the HTML
Then, I added to the bottom of footer.html
<script defer language="javascript" type="text/javascript" src="{{ "/js/myscripts.js" | urlize | relURL }}"></script>
The defer attribute can improve the page loading time a bit, and "/js/myscripts.js" is the location of my javascripts. The location is path relative to <project_root>\static\. Here are the documentation about relURL and urlize.
The example script file contains just
// myscripts.js
function myFunction(x) {
let d = new Date();
alert("Current datetime: " + d + "\nYou passed in: " + x);
}
3. Use the JS function
This is an example of using the JS function from within Hugo template (any .html belonging to the template):
{{ $somevar := "spam"}}
<button onclick="myFunction( {{ $somevar}} )">Click me</button>
Inline JS
It looks like also inline JS runs just fine; for example, adding
<script>
alert("Script loaded!");
</script>
to a template html file ran just fine. I would use this only for quick testing though, since some scripts might be needed in multiple html files, and adding the same script to multiple files would just increase your overall website filesize.
I copy themes/whatever/layouts/_default/baseof.html to layout/_default/baseof.html and add the following block at the end of the html tag:
{{ block "page-script" . }}{{ end }}
Then I can add
{{- define "page-script" -}}
<script>console.log("Hello!")</script>
{{- end -}}
in my layouts files to put in a script.
What is the standard method to require a defined JavaScript module inside of a single Phoenix Template?
I don't want the module required anywhere but inside this one template.
Here is a snippet of the files I am using.
web/static/js/trend_chart.js
let TrendChart = {
//... some JS module code here
}
web/templates/layout/app.html.eex
This has the standard app load/require.
...
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
<script>require("web/static/js/app")</script>
...
web/templates/page/index.html.eex
<!-- what do i put in this template to require / load the TrendChart module code? -->
<!-- i don't want it required globally, so i don't want to put it in the app.html.eex file -->
Update #1
I'm really looking for a way to have two #inner blocks in the main layout. One for the content, and one for additional JavaScript items to be loaded after the content.
Something like sections in ASP.NET MVC. (I know, I know!)
So the app.html.eex would end up something like this:
...
#inner
...
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
<script>require("web/static/js/app")</script>
*something here to load page/template specific javascript*
You can save the file to web/static/assets/trend_chart.js then it will be copied to priv/static/trend_chart.js and available from <script src="<%= static_path(#conn, "/trend_chart.js") %>"></script>.
All files saved to the web/static/assets directory are directly copied to priv/static without going through the build phase.
My index.html has split js files as follows:
<head>
....
<!-- build:js js/app1.min.js -->
<!-- js from lib -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<!-- js of this app -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<!-- external js -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- endbuild -->
....
</head>
.....
<body>
...
<!-- build:js js/app2.min.js -->
<!-- js from lib -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- angular-animate provides search functionality -->
<!-- js of this app -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->
....
</body>
As you can see, I tried to use two sets of js files. The reason to split is performance. How to use usemin in this case. I tried with following:
'useminPrepare': {
'html': 'app/index.html'
},
'usemin': {
'html': ['dist/index.html']
},
However, there is no folder/file created. But in index.html, those two sections are replaced appropriately by app1.min.js and app2.min.js
Moreover, I do not understand one thing that all examples are using concat and uglify in combination of usemin. The files in index.html which are already *.min.js eg. files included in bower_components folder, what happens to them?
Unless you're heavily invested in grunt already, give gulp a look.
Below is a snippet from gulpfile.js. The gulp.src() functions take a list of files, then pipe them through transformations, ending with a list of files, which get's written to disk with gulp.dest().
This let's the first two blocks of code src, transform (minify,concat,etc), and write the js and css.
The last block of code src()'s the index.html, injects the filenames from the first two blocks, and writes the index.html to a build folder. I do consulting on gulp builds.
Here's how you'd do it in gulp:
// Vendor files are pre-minified. Get right versions.
// JS. Concat, and add revision if necessary
var srcJs = config.minify ? config.dashboard.vendorJsMin : config.dashboard.vendorJs;
var destJs = 'vendor' + (config.minify?'.min':'') + '.js';
var vendorJs = gulp.src(srcJs)
.pipe(plugins.if(config.concat, plugins.concat(destJs)))
.pipe(plugins.if(config.hash, plugins.hash()))
.pipe(gulp.dest(config.dashboard.dest + '/js'))
// Vendor files are pre-minified. Get right versions.
// CSS. Concat, and add revision if necessary
var srcCss = config.minify ? config.dashboard.vendorCssMin : config.dashboard.vendorCss;
var destCss = 'vendor' + (config.minify?'.min':'') + '.css';
var vendorCss = gulp.src(srcCss)
.pipe(plugins.if(config.concat, plugins.concat(destCss)))
.pipe(plugins.if(config.hash, plugins.hash()))
.pipe(gulp.dest(config.dashboard.dest + '/css'))
// Inject all these files into index.html
return gulp.src(config.dashboard.index)
.pipe(plugins.plumber())
.pipe(plugins.inject(vendorJs, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(vendorCss, _.merge({name: 'vendor'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(appJs, _.merge({name: 'app'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(appCss, _.merge({name: 'app'}, config.dashboard.injectOptions)))
.pipe(plugins.inject(templates, _.merge({name: 'templates'}, config.dashboard.injectOptions)))
.pipe(plugins.replace('REPLACE_NODE_ENV', config.NODE_ENV))
.pipe(gulp.dest(config.dashboard.dest))
This is a much more 'dev' like build system than grunt. Grunt is much more 'ops' like. Whatever works best is the one to use!
I have 3 views in my MVC5 App. Say A,B,C and 3 javascript files A.js, B.js C.js
When appropriate view is loaded, I want appropriate javascript files to get loaded. I do not want all files to get loaded at the start up.
How do I achieve that?
In ViewA, add the following
#scripts {
<script src="A.js"></script>
}
In ViewB, add the following
#scripts {
<script src="B.js"></script>
}
and so on...
If you are using a _Layout.cshtml, make sure you have the proper RenderSection:
#RenderSection("scripts", required: false)
then in the views itself do this:
#section scripts {
<script src="B.js"></script>
}
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})