In resources plugin it was possible to define a tagname which had references to both css and js files. For example:
jScrollPane {
resource url:[file:'jscrollpane.min.js']
resource url:[file:'mousewheel.js']
resource url:[file:'jscrollpane.css']
}
This allowed to import all files using just <r:require module="jScrollPane" />
This library always requires the same js and css files. It is not DRY to define on every page import to js and css manifests separately. Is it possible to define a manifest with both css and js? If not, is there any other way this can be achieved?
thanks, droggo
I discussed this more here: https://github.com/bertramdev/asset-pipeline/issues/132
Basically we have created simple taglib:
def lib = { attrs ->
out << asset.javascript(src:"${attrs.src}.js")
out << asset.stylesheet(src:"${attrs.src}.css")
}
which can include both assets with one tag.
Related
I have started to migrate an AngularJS app to AngularDart, using Vic Savkin's sample app as a skeleton.
My existing project uses Less CSS. I am unclear about how to include that in my project.
Specifically, I have Components in the 'lib' folder and CSS in the 'web' folder. I want to be able to define some Less variables at project level, which will be used by Components. I will want to use the Components in other future projects.
Do I need to import the bootstrap.less and variables.less file in each component's less file, or is there a more efficient way?
At first if you want to use something in web and lib put it in lib. You can import from lib to web with package:mypackage/asset/css/mycss.css but not the other way around.
I guess you will avoid shadowDOM because Bootstrap doesn't work well with it.
If you still want to use shadowDOM you need to add the CSS to each component (might still cause troubles when you have nested components) or modify the CSS selectors.
If you modify the CSS selectors you need to add additional selectors for each rule like:
/* original */
.someclass .someotherclass { xxx: yyy; }
/* modify to */
.someclass .someotherclass,
* /deep/ .someclass /deep/ .someotherclass,
* /deep/ .someclass .someotherclass, /* might be necessary too */
{ xxx: yyy; }
If you create all your components (and use only 3rd-party components that don't use shadowDOM) you can put all CSS into the index.html page like in Angular.js.
I need to pass variables from Config.groovy to JavaScript on several pages that uses same resource bundle.
I have JS lib that needs config option 'appId'. The problem is that JS and CSS files of this lib are declared as resources bundles in ApplicationResources.groovy and I can't control on which page they are used.
There is tag . Body of this tag will be included to page body as inline JavaScript. Great.
But it requires manually repeat this section with same content on each page. That's why it does not suit me.
E.g. I need something like this in ApplicationResources.groovy:
modules = {
myJSPlugin {
dependsOn 'jquery'
resource url:'/js/core.js', disposition: 'head'
// this is inline JS here
resource type: 'inlineJs', body: {-> "var appId = 22;"}
}
}
```
How can I achieve this?
Thanks
If you provide
<r:script>var appId = 22;</r:script>
either in the body or disposed in head, inside main layout, shouldn't it be available to the child pages whichever uses the layout?
#Resource r:script
I want to include application.js to all pages base on main.gsp template, but in some reasons application.js included only in few pages.
Theres my config:
ApplicationResources.groovy:
modules = {
application {
resource url: 'css/common.css'
resource url: 'js/application.js'
resource url: 'js/bootbox.min.js'
}
}
Main template(main.gsp):
...
<r:require modules="application, bootstrap, bootstrap-responsive-css, bootstrap-js"/>
...
There's two .gsp files which inherited from main template:
<meta name="layout" content="main"/>
But in one page application.js is exist as (/.../static/bundle-bundle_application_defer.js"), but not exist in other.
Difference between files only in custom layout markup, not in , and so on.
But files belong to different controllers, may be that where problem is?
So what should i check to understand where the problem is?
I think that all the javascript files are bundled together in one file, you can check it in Firebug
I need to declare external js in defer "location". I thought that
<r:external uri="http://cdn.connect.mail.ru/js/loader.js" disposition="defer"/> will work but it's just place <script... code where it's called.
How can I declare external js in defer location using taglib?
Grails 2.0+, resources plugin
As you described, the r:external tag unfortunately seems to not respect the default disposition for JavaScript, which is "defer". Also, according to the documentation, the r:external tag does not provide a "disposition" attribute to explicitly declare this.
The r:script tag correctly places scripts at the bottom of the body, but it does not provide a "src" attribute because its use is only intended for "inline" JavaScript.
I think the nicest way to work around this missing feature is to define a resource module in your ApplicationResources.groovy file
modules = {
...
mail_loader {
resource url: "http://cdn.connect.mail.ru/js/loader.js"
}
...
and then require it using your TagLib.
out << r.require(module: "mail_loader")
As already mentioned, the default disposition of JavaScript resources is "defer", so you don't need to explicitly define the disposition in your case.
I am using the Grails Resources Plugin. Is there a way to define that a resource must be after another ie the Twitter Bootstrap Plugin must be loaded after JQuery UI so that the Tabs work. I need to be able to explictly state that Bootstrap is loaded after JQuery UI I am looking for something like
dependsOn 'bootstrap' after:'jquery-ui'
The obvious way to do this would be to specify that the bootstap module dependsOn the jquery-ui module. I guess the reason it's not clear how to do this is because both these modules are defined by plugins so you can't modify the module definition directly. Fortunately, it is possible to override modules defined within plugins without modifying the plugin source code. Simply add something like the following to your *Resources.groovy
modules = {
overrides {
bootstrap {
dependsOn 'jquery-ui'
}
}
}