In my project I have multiple html files that I've added to the project.properties like this:
# Files can be added in a comma separated form
file.pages = loginapp.html, docapp.html, adminapp.html
The problem is that each of those files needs to load some app-unique scripts. E.g.:
<!-- In adminapp.html: -->
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/mylibs/jquery.tmpl.js"></script>
<script defer src="js/mylibs/knockout.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/helpers.js"></script>
<script defer src="js/app.admin.js"></script> <!-- ** unique for login ** -->
<script defer src="js/app.common.js"></script>
<!-- end scripts-->
<!-- in loginapp.html: -->
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/mylibs/jquery.tmpl.js"></script>
<script defer src="js/mylibs/knockout.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/helpers.js"></script>
<script defer src="js/app.login.js"></script> <!-- ** unique for admin ** -->
<script defer src="js/app.common.js"></script>
<!-- end scripts-->
It works brilliant until I ant build it.
It appears that HTML5 Boilerplate's build script has problems with figuring out what's going on here, and it only creates one concatenated file that contains the common stuff, and leaves the rest out (e.g. app.login.js and app.admin.js get copied into the publish/ folder, but are not linked to in the minified HTML files (which only link to one script and that's the concatenated one).
Is there any way to get this working?
Related
I use a HTML snippet in the Sitecore SXA metadata partial design to add some links in the head of the resulting HTML:
This HTML is:
<link rel="stylesheet" href="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.css" />
<script type="module" src="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.js"></script>
But I would like to have the base path configurable using for example a token, like:
<link rel="stylesheet" href="$WebComponentsBasePath/sxa-umbrella-webcomponents.css" />
<script type="module" src="$WebComponentsBasePath/sxa-umbrella-webcomponents.esm.js"></script>
<script nomodule src="$WebComponentsBasePath/sxa-umbrella-webcomponents.js"></script>
where the token is set to: "https://unpkg.com/sxa-umbrella-webcomponents#0.0.1/dist/sxa-umbrella-webcomponents.
But token replacement does not work in the HTML snippet.
Any idea on how to make this base path configurable for the metadata partial design so I can have different configuration for my development environment and the production environment, and have the possibility to easily switch the base path on production to roll forward a version or roll back a version of the files used based on a configured base path?
I'm trying to implement the cycle2 plugin with jquery on an HTML page.
I've used the site http://jquery.malsup.com/cycle2 as a guide
I downloaded (copied) the file jquery.cycle2.js I placed it on the server in on the server in the location public_html/cycle2/jquery.cycle2.js
In my HTML page's Header section I added the lines:
<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
Then, in the HTML page's BODY I added:
<div class="cycle-slideshow">
<img src="cycle_images/image1.jpg" alt="Image1"/>
<img src="cycle_images/image2.jpg" alt="Image2"/>
<img src="cycle_images/image3.jpg" alt="Image3"/>
</div>
The guide doesn't give a css-type example for the class "cycle-slideshow". Instead it says that by using that class in the DIV tag it will auto-activate the slideshow.
This doesn't seem to activate the slideshow. Instead it lays out the images out in three rows, one row after another.
Any idea what I'm doing wrong to activate the cycle2 slideshow?
The problem was with the HTTP:// on the server line. Since the Cycle2 documentation was published, the GOOGLEAPIS sever must have obtained a certificate, making it HTTPS. The mismatch between HTTP and HTTPS caused the plugin to fail. The working code now reads:
<!-- include jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
It seems to me that it's safer to remove "HTTP" or "HTTPS" and just being the server line with "//".
Angular-cli is generating the index.html file during ng-build.
The app runs on a hardware proxy, meaning that all of it's script tags need to be prefixed with "/some/prefix/". The cli generates the following script tags.
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.b1a79a362dfcae386d67.bundle.js"></script>
<script type="text/javascript" src="main.2b9bcc2dcbe5c9cb526b.bundle.js"></script>
Is there a way to prefix the src of each tag with something?
You need to set --base-href when serving or building, e.g. ng serve --base-href '/some/prefix/' --aot.
--base-href sets the <base href='/some/prefix'> tag in your HTML file and adds such prefix to all scripts and stylesheets that are automatically defined.
Note, however, that setting the base tag manually will not have the same effect and that will be overwritten every time you build your application.
I tried out yeoman ember generator. In the generated index.html, I found these lines:
<!-- build:js(app) scripts/components.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="##ember"></script>
<script src="##ember_data"></script>
<!-- endbuild -->
The ## symbol above is really disturbing to me. So, what do they mean? What program does this syntax belong to, i.e., what program understands this?
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!