Using ZURB Foundation Template, building with NPM.
I have the following code in my default.html layout page:
<script src="{{root}}assets/js/app.js"></script>
{{#ifpage 'admin'}}
<script src="{{root}}assets/js/single-page/admin.js"></script>
{{/ifpage}}
{{#ifpage 'dashboard'}}
<script src="{{root}}assets/js/single-page/dashboard.js"></script>
{{/ifpage}}
In gulpfile.js I have as a member of the 'javascript' PATHS array:
'!src/assets/js/single-page/**/*'
I then, do:
gulp.task('single-page', function() {
return gulp.src('src/assets/js/single-page/**/*')
.pipe(gulp.dest('dist/assets/js/single-page'))
.on('finish', browser.reload);
});
Then...
gulp.task('build', function(done) {
sequence('clean', ['pages', 'sass', 'javascript', 'single-page', 'images', 'php', 'chart_data', 'copy'], 'styleguide', done);
});
And finally...
gulp.task('default', ['build', 'server'], function() {
gulp.watch(PATHS.assets, ['copy']);
gulp.watch(['src/pages/**/*'], ['pages']);
gulp.watch(['src/{layouts,partials,helpers,data}/**/*'], ['pages:reset']);
gulp.watch(['src/assets/scss/**/{*.scss, *.sass}'], ['sass']);
gulp.watch(['src/assets/js/**/*.js'], ['javascript']);
gulp.watch(['src/assets/js/single-page/**/*.js'], ['single-page']);
gulp.watch(['src/assets/img/**/*'], ['images']);
gulp.watch(['src/assets/php/**/*'], ['php']);
gulp.watch(['src/assets/chart_data/**/*'], ['chart_data']);
gulp.watch(['src/styleguide/**'], ['styleguide']);
});
My three pages are all PHP pages with the names index.php, admin.php, and dashboard.php. The js/single-page directory is being written to the dist folder and the two JS files are there.
The Panini conditional doesn't seem to be working so the admin-specific and dashboard-specific paths do not appear on their respective PHP pages.
Colin Marshall in his answer to How to add JavaScript just for one specific page? mentions a config.yml file and a gulpfile.babel.js file, neither of which are in my project's directory.
Any suggestions?
Thank you.
Simple fix after a bit of fiddling. Seems Panini 'page' var returned the full page name including .php. Once I checked for admin.php or dashboard.php all worked fine.
I can only imagine there's some code change I can make to return the page name without the file extension.
Related
I've recently added WebPack 5 to my build process in my .NET Core MVC 7 application.
My goal is to be able to call my javascript functions from the javascript files WebPack generates inside my views.
I have a simple Index.cshtml file that includes a partial view and the generated javascript from webpack:
Index.cshtml
<div>
#await Html.PartialAsync("SettingsTab")
</div>
#section Scripts
{
<script defer src="~/dist/settings.entry.js"></script>
}
The SettingsTab constains a button that is trying to trigger a method from the settings.entry.js file:
SettingsTab.cshtml
<div>
<button type="button" onclick="saveProfileSettings()">Save Profile</button>
</div>
The settings.js file before webpack bundles it into the dist folder looks like this:
settings.js
import ('../css/settings.css')
function saveProfileSettings() {
// do stuff
}
When I wasn't using webpack I could directly call this function like I am trying to above.
However now when I reference the bundled js file it cannot call it.
Looking at the end of the settings.entry.js file it looks like webpack has bundled my code into an IIFE:
End of settings.entry.js
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
// omitted contents of settings.js
})();
/******/ })()
;
I would like to instruct WebPack not to wrap my code like this so I can directly call the functions elsewhere.
Now I did find out that I can use library in my webpack.config.js like so:
output: {
filename: "[name].entry.js",
path: path.resolve('wwwroot', 'dist'),
publicPath: "/dist/",
library: ['WebPack', '[name]']
},
With this I can successfully reference my functions using WebPack.settings.saveProfileSettings() but I do not want to do this. I want to be able to reference my functions directly as saveProfileSettings().
How can I change how WebPack packs my code so I can do this?
I have created a module. In this a custom js file is added with requirejs-config.js, But to load the js file, I need to write the following lines on phtml,
<script type="text/javascript">
require(['jquery','customjs']});</script>
If I don't add the above line js is not adding .Can some body please tell is this the right approach or I am doing some thing wrong.
Require js code added at (Namespace\Modulename\view\frontend)
define([
'jquery',
'underscore',
'mage/template',
], function (
$,
_,
template
) {
//custom code
});
Yes this is the right approach. because you have created custom.js right . so that custom.js you need to call in your requirejs-config.js
But now when you want to use this actuall js functions and properties you need to pass below code
<script type="text/javascript">
require(['jquery','customjs']});</script>
What it mean actually , to load your customjs it requires jquery so first load the jquery then load your customjs and then you can pass the parameters.
require([ 'jquery', 'customjs'], function(){
alert("test");
});
so alert box will prompt when you add this in your template
Jfyi - in your requirejs-config.js you need to write like below code you dont'need to write extension of js file like.js as require js automatically render that . and lastly put the js file in web/js folder in your module
var config = {
"map": {
"*": {
"customjs": "Vendor_Modulename/js/custom"
}
}
};
Is there a way to render a precompiled template that has no name on the client side in DustJs?
Because documentation only shows with a name:
<!-- precompiled templates -->
<script type="text/javascript" src="/lib/templates.js"></script>
<script type="text/javascript">
// The templates are already registered, so we are ready to render!
dust.render('hello', { world: "Saturn" }, function(err, out) {
document.getElementById('output').textContent = out;
})
</script>
EDIT : Ok it's probably too complicated to load a file, and I just noticed that when we compile without specifying name (in order to compile many template simultaneously), the path of the template is set as the default name. It is even editable with --pwd flag.
There is therefore always a name so the above function can operate.
It sounds like you would like to load templates by their path after they have been precompiled. Dust allows you to do this via AMD (require.js) compatibility.
http://www.dustjs.com/guides/setup/#amd
Once you've loaded require.js and set define.amd.dust = true, you can call dust.render with the path to a template and Dust will automatically load it for you.
Note that this requires that you compile your templates with the --amd flag.
<script src="r.js"></script>
<script type="text/javascript">
define.amd.dust = true;
require(["lib/dust-full"], function(dust) {
dust.render('path/to/your/template', function(err, out) { ... });
});
</script>
The Dust repository has an example of using AMD to load templates.
I have a asp.net mvc app . In Scripts I have the subfolder app containing Controller.js. I also have another subfolder Spec containint ControllerSpec.js - written with jasmine.
describe('PhoneCat controllers', function () {
beforeEach(module('phonecatApp'));
describe('PhoneListCtrl', function () {
it('should create "phones" model with 3 phones', inject(function ($controller) {
var scope = {},
ctrl = $controller('PhoneListCtrl', { $scope: scope });
expect(scope.phones.length).toBe(3);
}));
});
});
In SpecRunner.cshtml i have just included this files:
<script type="text/javascript" src="/Scripts/app/controllers.js"></script>
<script type="text/javascript" src="/Scripts/Spec/controllersSpec.js"></script>
In karma init, I have added the path of those 2.js.
Can you please tell me how can I do to make it work? If I run vs the Jasmine code it's ok.
Thx
You must add a reference to angular.js as well
There could be a variety of reasons for such an error, so it would help to solve with a bit more info on your part.
However off hand and having seen this error before in my battles through angular unit testing, I have to ask are you including a link to angular-mocks.js?
The lastest repo: http://code.angularjs.org/1.2.15/
Angular Mocks: http://code.angularjs.org/1.2.15/angular-mocks.js
A copy of your karma.conf.js would also help....
I am trying to add the CKEditor to a page I am currently developing but am having problems getting it to pick up my custom configuration file? I am using CKEditor in Visual Studio.NET 2008. I need to customize the toolbars that are displayed, as Basic is too minimal and Full would give an overwhelming amount of buttons to the user.
I am declaring the editor in the aspx page as follows:
<script type="text/javascript">
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: 'myconfig.js' }
);
</script>
the myconfig.js file itself is in the root of the ckeditor directory (where config.js resides).
However, desipite rendering the CKEditor itself, it seems to be completely ignoring my custom config file. I was wondering if anyone had any suggestions?
Thanks!
The contents of the custom config file are as follows:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'en';
config.defaultLanguage = 'en';
config.uiColor = '#000000';
};
CKEDITOR.config.toolbar_Full = [['Save', '-', 'Preview', '-' 'Print'],
['Undo', 'Redo'], ['Cut', 'Copy', 'Paste', 'PasteFromWord', 'SelectAll'],
['Find', 'Replace'],
'/',
['Bold', 'Italic', 'Unnderline', 'Strike', '-', 'Subscript', 'Superscript']];
Thought I'd post up a solution. The path in the:
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: 'myconfig.js' }
is from the root of the website, not relative to the directory from CKEditor.
So my declaration should have been as follows
<script type="text/javascript">
CKEDITOR.replace(document.getElementById("<%= txtTourItinerary.ClientID %>"),
{ customConfig: '/ckeditor/myconfig.js' }
);
</script>
Hopefully I might have helped someone else in a similar boat as documentation on CKEditor is a little thin on the ground.