I found next code fragment on the Rollup api page.
If I would be using iife instead of amd.
How would Rollup define this in the bundle?
Or would it expect a preceding <script> tag containing that external code? If the latter would be true: Is there a way to produce a bundle with JS code which dynamically loads JS files through absolute URLs?
Try it. You'll see it generates code like this:
(function (d3) {
'use strict';
d3.selectAll('p').style('color', 'purple');
}(d3));
In other words yes, it expects there to be a <script> tag on the page that defines d3.
Is there a way to produce a bundle with JS code which dynamically loads JS files through absolute URLs?
That's exactly what the amd output is. You just need to have an AMD module loader such as require.js or curl.js on the page.
Related
I tried to set up an Orbeon form with a tree (xf:select1 appearance="tree"). Using Orbeon Demo form builder I created a page with tree and it is working in Demo environment. The same XForms code in my local Tomcat environment (latest Orbeon CE) is not working - the tree is not rendered at all.
If I check working demo HTML, then there are some additinal JS after extension functions (after sections /*! Extension 'jquery.fancytree.wide.min.js' */, etc.) and there is minimized code line a.declareCompanion("fr|tree-select1",b); which I believe registers the component. The same form code my in local Tomcat instance does not generate this block in JS files.
In Orbeon source code is file TreeSelect1.scale which I believe is converted to JS and then included in rendered HTML JS files.
Also in tree-select1.xbl strange I comment:
NOTE: When using this component outside of Form Runner, the supporting JavaScript must be explicitly included.
after:
<xbl:script src="/xbl/orbeon/tree-select1/fancytree/jquery-ui.min.js"/>
<xbl:script src="/xbl/orbeon/tree-select1/fancytree/jquery.fancytree-all.min.js"/>
What must be done to be able to render the tree?
The JavaScript for the component is not included by default. You can work around this with this:
<xh:script
type="text/javascript"
src="/apps/fr/resources/scalajs/orbeon-form-runner.js"/>
And then, on your main XForms model, put the xxf:assets.baseline.excludes attribute like this:
<xf:model
xxf:assets.baseline.excludes="/ops/javascript/scalajs/orbeon-xforms.js">
Regarding your other question about which JavaScript files are under xbl vs. not: some JavaScript files are written by hand, and are available as separate assets.
But code for other components like the tree is written in Scala and compiled with Scala.js. The resulting JavaScript for all such code is optimized and available in orbeon-xforms.js, orbeon-form-runner.js, and orbeon-form-builder.js depending on the environment. Only one of those 3 files must be included, hence the use of the xxf:assets.baseline.excludes property.
I am wondering of there is any possibility of postprocessing *.js files so that every gsp expression can be evaluated.
for example i can write the following code directly in the gsp page:
<script type="text/javascript">
$.post("${createLink(controller:'mycontroller',action:'myaction')} " , {"id":id},function(){});
</script>
And the expression ${createLink} is evaluated by grails.
But i would like to also use ${createLink()} in *.js files which are not processed by grails.
Maybe it is possible to use the resource plugin to postprocess every *.js file and evaluate gsp expressions?
Of course i could wrap all my js code in a separate gsp page but it does not seem like an elegant solution.
Any help would be appreciated.
Either of this should work for you
http://grails.org/plugin/gsp-arse (standalone)
http://grails.org/plugin/gsp-resources (It works with resources plugin)
Another option is to do something similar to store the url in a variable
<script type="text/javascript">
var url = "${createLink(controller:'mycontroller',action:'myaction')}";
</script>
Then you can use all the ajax calls you want and still only have the url set once.
Use a JS Hash in your GSP file to save what matters
<r:script>
var linkobject={
mylink:'${createLink(controller:"mycontroller",action:"myaction")}',
linkA : '${params.id}',
linkB: '${g.createLink(action: "getThreats")}',
linkC: '${g.createLink(action: "addThreat")}',
linkD: '${g.resource(dir: 'images/icons', file: 'folder.png')}'
}
</r:script>
Then, Consume that JS hash in your JavaScript file to get what you need:
$.post(linkobject.mylink , {"id":linkobject.linkA},function(){});
I am on Rails 3.2 with assets pipeline.
I'd like to inline some minified css in a javascript string (to dynamically include it from a JS library I'm writing). My css is written using scss and my js using coffeescript.
Do you know how to do that?
I would go with #meagar to have a CSS and a JavaScript file.
However, if you really want to get it through javascript, you can add a async get call (like $.get) and handle the response as your new string. Ugly, hum?
Yet another option is to generate the CSS output and put it manually in your javascript, or better yet, loading it in your coffeescript file like this:
for filename in list
do (filename) ->
fs.readFile filename, (err, contents) ->
compile filename, contents.toString()
(exemple from coffescript.org)
So I want to avoid processing JavaScript files with ERB just so I can get a proper asset path to, say, an image.
Currently, this seems like the popular approach:
var myImage = "<%= asset_path('my_image') %>";
Which, of course, requires the filename be changed to "*.erb" so that it'll be processed.
I'd much rather isolate the ERB ugliness to one point in my project making a single manifest file (say, "assets.js.erb") that computes and makes available all the asset paths my JavaScript needs.
I can certainly do it WETly by tackling it case-by-case:
ASSETS =
"my_image": "<%= asset_path('my_image') %>"
window.assetPath = (path) -> ASSETS[path]
But, I'd really rather just write some ERB to recurse through all of my asset_paths.asset_environment.paths and build a big object literal manifest for me, so that my real application JavaScript can confidently call:
var myImage = assetPath('my_image');
Any ideas on (1) if there's an easier way to do this that I missed, or (2) how I'd accomplish a search of all the potential valid arguments to asset_path?.
An easier way :
Get the assets prefix in your .js.erb : <%= Rails.configuration.assets.prefix %>. If an absolute path is needed, you can also get the application URL (it's more complicated to get it from rails, so you can just hardcode it in your .js.erb ?)
If you are working with precompiled assets, get the fingerprint of your file which is stored in manifest.yml (at <%= Rails.configuration.assets.manifest %>). The manifest contains a list with all your assets and their respective fingerprints (documentation)
Make assetPath just prepending the application URL + prefix to your image name or fingerprint
An inconvenient is that you have to specify the full image name (included the extension).
Old question, but there is nice way to accomplish this. Just to explain the context of my solution: I need to display markers in a map, which have different possible icons based on the JS dynamic variables. Strangely, using the <%= asset_path('" + somefunction(raw_value) + "') %> was not working. Then, I've looked for the solution bellow.
Concretely, the solution I am using has only one js.erb file which stores the values of the images, and their fingerprinted names, which can be get by a function, image_path. After that, all my other JS files can be free of the asset_path and, consequently, of the .erb
Create a file images.js.erb in your_application/app/assets/javascripts with the following content:
<%
imgs = {}
Dir.chdir("#{Rails.root}/app/assets/images/") do
imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)}
end
%>
window.image_path = function(name) {
return <%= imgs.to_json %>[name];
};
Require this file in your application.js, which is normally in the same directory as above:
//= require ...
//= require ...
//= require images
//= require_tree .
Then, inside the JS that you've been using <%= asset_path('image.png') %>, you will use instead image_path('image.png');
Credits to this blog post for posting a Coffee script version from which I've based mine.
It depends on the context of where this image is used.
Use Case 1: The image is decorative and needs to be dynamically swapped.
Example: Spinner, while data is loading.
In this case, I refer to is in my sass and java script.
.spinner
background-image: url(image_path("spinner.png"))
Then I would operate with classes in java script and not images.
$.addClass('spinner')
Use Case 2: Image is part of an object.
There are many situations, when an image actually belongs to a object. In this case, I create a json file, which stores the data and the image reference like this. Then I use erb to unwrap the image reference - my_object.json.erb:
{
"icon" : "<%=image_path("icons/my_icon.png")%>",
"label":"My label",
"description":"My description"
}
Use case 2 requires more work on javascript side to load the json files, but it opens very powerful extensibility options.
Asset pipeline handles both cases famously.
I have a javascript application that runs in a view (index.cshtml).
Problem:
The problem is all relative paths are relative to the current url, which would be ok in a simple html webapp but not in asp mvc. The js-app shouldn't have to bother whether it's served in a normal html file or via a asp mvc page.
I.e. http://www.domain.com/<controller>/<action>/ contains a script test.js. This script loads an external xml file searching relative to it ie. "data/data.xml". The resulting url reads http://www.domain.com/<controller>/<action>/data/data.xml. This isn't found.
Question:
Is there a way to route static files (images,..., maybe even js files) to the content folder like "~/Content/controller/action/<pathToFile>/"?
Any help appreciated!
Lg
warappa
PS: I know about Url.Content() but that doesn't fit here.
The solution doesn't require mapping - just a simple html tag in the header:
<base href="#(Request.Url.GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped) +
Url.Content("~/content/controller/action/"))" />
Lg
warappa
EDIT
Some browsers need an absolute url - sample updated.
In you can use absolute URL addresses to access you static resources:
$('img').attr('src', '/Content/Pictures/picture1.png');
or
<script src="/Scripts/script.js"></script>
This way you will allways get the same resources relative to the page base address, no matter if you load the script in a /{Controller}/{Action}/{View}, {Area}/{Controller}/{Action}/{View}, a custom route or even in a static script html page.
Or perhaps what you're looking for is the use of css files, since CSS's url('<path>') resolves the addresses relative to the CSS file's location. You would just need to import the one CSS file that had all the resource (image?) file paths. Then the scripts could reference the distinct class names, thus not being location aware at all. This is what libraries like jQuery UI do. But again this would require a fixed folder structure relative to the CSS document.