How to inject custom js files with grunt-wiredep? - grunt-wiredep

Is it possible to inject my own js folder by grunt-wiredep task? Is there solution for it?
EDIT
I found grunt-inject, but I'm using jade view engine(that solution is only for HTML)

Doesn't look like it from first glance. Looks like it is exclusively dependent on wiredep which only scans bower.json.
The closest thing you can do is manage other JS dependencies through bower as well.
https://github.com/stephenplusplus/grunt-wiredep/issues/107
I am also looking for an alternative. I am also looking into grunt-inject, but no longer use jade on my projects.
https://github.com/ChrisWren/grunt-inject
https://github.com/klei/grunt-injector
https://github.com/scott-laursen/grunt-scriptlinker
If I figure out a jade alternative, and which one I chose, I'll update my post.

Related

How to properly format an image url in a Vue.js single-file-component?

After about a week of tinkering, I have managed to introduce webpack and Vue.js single file components into my existing Orchard (ASP.NET) module.
Now I've unexpectedly hit a snag, and for the life of me, I'm stumped. I have several image resources that are part of my custom Orchard theme, which is a separate module (*.csproj) within my Orchard solution.
So (at the risk of demonstrating my woefully inadequate understanding of URL concatenation in web projects) I innocently add this line to my Vue.js single file component:
<img src="~/Themes/MyOrchardTheme.Theme/Images/AnImage.png">
Now when webpack tries to process this and bundle my component I get this error:
Can't resolve 'Themes/MyOrchardTheme.Theme/Images/AnImage.png' in 'redacted' C:\Projects\Orchard\Modules\redacted\Module not found
This kind of makes sense, because the layout of my projects and resources locally and the layout after deployment to Azure obviously differ.
So what is the right way to specify the url for my image as it will exist at runtime on the server, without specifically testing for it's existence when transpiling with webpack?
I'm not going to accept this as the answer, in case someone can offer something better, but after some tinkering I was able to solve my problem by using this:
<img :src="theimage" />
and adding a computed property like this:
computed: {
theimage: function () {
return '/Themes/MyOrchardTheme.Theme/Images/AnImage.png';
}
This will bypass the Webpack transpiler (or vue-loader or whatever) check to make sure the resource can be located and has the added benefit that I can programmatically control the image displayed, which (although not mentioned) is ultimately what I wanted to do (code not shown). I was expecting to use v-if or v-show with multiple image tags, but using a computed property killed two birds with one stone.
Thanks to everyone who provided feedback. - I have a great deal to learn!

NopCommerce Plugin Localization

I am working on a NopCommerce website and have quite a bit of site-wide customization so I have created a plugin to handle it all but not sure on how to handle the localization. I see there are a couple of ways of updating the Localization strings, one way I have found is in the Plugin's Install() method:
this.AddOrUpdatePluginLocaleResource("Plugins.Payments.PayPalStandard.Fields.AdditionalFee", "Additional fee");
This looks like it only adds new resource strings for the plugin, is there a similar way to update the other resources via the Install() method like:
Admin.Catalog.Products.List.DownloadPDF
I found that there is a way to export the entire language to a language_pack.xml file, would it be better to just create an entire language pack instead? Is there a way to add a new language pack from the plugins Install() method?
I guess I could simply open the language_pack.xml file and add each resource found using the AddOrUpdatePluginLocaleResource, I was hoping that there was a built-in way of doing this using NopCommernce functionality.
Thanks!
As #Raphael suggested in a comment, provide a language pack along with plugin file to the end users, and give an option to upload required resource file within your plugin configuration page.
As per as I know, there is no inbuilt way to add language pack on plugin installation, but you can do some code on plugin install method to find language pack file(s) from plugin folder and install it, not quite sure, you can take reference of inbuilt methods.

Where can I find the default templates for all the Grails fields plugin types?

I was hopping to have an easy way to customize the display behavior of the Grails fields plugin after reading its docs, but I just realized that it demands an enormous effort as there is no available templates to start from.
I can see the display functionality is hard-coded in FormFieldsTagLib (from methods like renderDefaultInput() ) but I think it is imperative to have the templates themselves (or a way to generate them, somewhat like generating static scaffolding in Grails).
I can see no consistent (and reasonable) way to customize display behaviors for the Grails fields plugin without that. Am I missing something?
Imagine the use case where someone wants to change the boolean default rendering just to display the field label after (and not before) the checkbox, and keep it available to all the boolean fields within its application. Which concerns will he need to handle regarding if the field is required, has errors, prefix and so on? When all he needed was just moving two divs around.
Grails version: 2.5.4, fields-plugin version: 1.5.1
You aren't missing something. You'd have to re-create the existing implementation of each field type rendering in a template for use with the plugin. There isn't a way to generate a file to start with (like scaffolding).
I won't bore you with the historical reason as to why this is the case, but if you do create a set of base templates it would be a good idea to contribute back to the plugin.
I had an issue with the <f:table> tag, and found this post, which led me to find the base or default template inside the plugin repo.
Take a look at
https://github.com/grails3-plugins/fields/tree/master/grails-app/views
That may help you finding some default templates, along with the official doc and this answer on where to put the override.
Hope it helps you.

I cannot find the searchableController or the view for the Searchable plugin in Grails

I installed the searchable plugin on Grails and when I run my application I can browse to it and the searchable function works fine.
The only problem is that I cannot find the searchableController or even the view of it in my project. So I'm not able to edit anything or rewire the code to fit in another controller or view.
Any help would be much appreciated.
Kind regards.
The SearchableController and its views are located inside the searchable plugin, see $HOME/.grails/<version>/projects/<projectname>/plugins/searchable.
Be warned: it's a really bad idea to modify anything in $HOME/.grails manually unless you're sure what you're doing.
Instead you could either:
download the plugin from svn/git and reference it as 'inplace' plugin. If you don't know about inplace plugins, just google for it.
copy the SearchableController from $HOME/.grails to your project and modify it.

Firefox extension: Embed javascript in a webpage

I want to insert some script into every page, which have some functions that will be called by the modified HTML of that page, using a Firefox extension. I am able to insert the JavaScript into the head of the HTML, and also modify the page, but the java script functions are not called by the onmouseover event.
Does someone has any pointer on how to do that, using java script in local extension or as a online resource.
No GreaseMonkey, I need to do it with my plugin and not ask user to install greasemonkey, my plugin and the scripts.
Greasemonkey does this. It's excellent!
Make a Greasemonkey script. See Userscripts.org for lots of example ones to work off.
Why not use Greasemonkey? It allows you to execute javascript on any page on Firefox, and if executing the code you enter isn't good enough you could dynamically add links to the head, too.
you can modify the DOM using Firebug. I am not sure if you can load files locally.. sounds malicious. Also, you can just run arbitrary javascript commands in the Firebug console (a la python/ruby console)
There are some Greasemonkey-to-extension "compilers" (or extension-wrappers) out there:
Arantius's GM compiler
Gina Trapani's multiple-GM-script compiler
I've used the first one with extensive internal tweaking over time. However, I don't believe the compiler is actively maintained (default max-version is only 3.0), so may not be up-to-date with the latest GreaseMonkey, or FireFox.
I think Gina Trapani's is more designed for multiple scripts targetting the same domain, but I haven't used it.
Neither of these is a "GreaseMonkey solution" per se, as the end-user never has to install GreaseMonkey. They get a real-live FireFox extension. The core is very similar to GM, but you can change or add as much as you like.

Resources