I am using the jQuery UI framework, but I'd like to modify the slider control to suit my needs. I only want to make changes in that one file. What is the best way to include those changes in my project? Currently I have it all wrapped up in jquery-ui-1.8.8.custom.min.js.
Options include:
Edit the minified source directly. Seems like a huge pain.
Download all the source files, put them in my /js directory, and add <script> tags for each one. Ugh.
Try to make the changes from outside the framework, using my own script. I'm not sure this would work.
Somehow use the one file I modify + the rest of the framework in the single minified file?
Download the entire framework, modify the file I want, then compress it into a single file. (But is then debugging/testing will require <script> tags for all the source files, right?) (How do I minify the code?)
If I were to be including <script> tags for every source file, could I only use the ones I'm interested in, and their explicitly stated dependencies? Or is this asking for trouble? (Update: Looks like this works.)
Other ideas? Is (4) possible? What is the best approach here?
Update: I see that the minified file is of the form:
/***
* UI Slider
*/
minifiedCode();
/***
* UI Autocomplete
*/
minifiedCode();
/***
* UI Spinner
*/
minifiedCode();
What if I comment out the Slider code, then include my own non-minified, altered Slider file? Can minified and non-minified code work together?
Depending on the changes - if you are overriding a method, you can put it in a separate js file and load that file after you load jQuery - it will override the method functionality.
Related
I have lots of CSS and JavaScript files. Currently I maintain versioning using something that looks like this:
modal.js?v=1.0.0
form.js?v=1.0.0
table.js?v=1.0.0
style.css?v=1.0.0
These files are loaded in multiple HTML files. When I need to change version I manually go to every HTML file and change the path like this modal.js?v=1.0.1. But it's a headache to change every files every time.
I can do versioning dynamically like this
modal.js?v=<script>(new Date()).getTime();</script>
But I have a problem here: I use file caching. I need to cache files only when the file version is updated, otherwise use old cached files.
I already tried these but they do not fulfill my requirements:
JavaScript and CSS dynamic versioning
https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect-latest-chan/
I'm a newbie who's trying to build a meteor app, and I was looking to cut some time by using a commercial theme. Let's take this as an example:
http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?WT.ac=category_item&WT.seg_1=category_item&WT.z_author=keenthemes
I have two options:
1) Use the html to create meteor templates, using spacebars tags, etc.
But how would I implement the theme javascript? doesnt it comes in conflict with meteor?
2) Use angular.js, as the theme is provided in angular.js format other than plain html. But wouldnt this create conflicts? is this a better approach?
In general, what is the easiest and best way to use commercial themes with meteor?
I bought similar themes on wrapbootstrap. I think it is the same problem here. (for Angular theme I do not know, as it would be trickier I think to integrate it with bootstrap)
Generally with such themes, you have a lot of 3rd-part JS libraries. You have to get them.
First option, you find a similar packages on atmosphere and you can add it. (A lot of jQuery library are simply wrapped as packages).
Second option, there is no such package (you can make and add them, and it would help the community :)). You can import them on the page you need with a package like wait-on-lib
You can import the libraries where you need them only. But I think the first option is cleaner.
And you will probably have some custom.js for each different page you have in your template, you have to transfer this logic when you render a template. For example the custom.js for the index file in your template will be transformed in :
A template name index where you can put the HTML and
Template.index.rendered = function(){
/* your custom js */
}
For the CSS you can simply copy past the files in client/css (for example) the files will be loaded.
I do not know if I have been very clear, but I managed to integrate such themes in meteor project. And do not forget to remove unnecessary files, for example when you add the bootstrap package, you can remove the bootstrap css and js files integreted to your template.
P.S : You may have to search/remplace path in the css and js files from the templates to load some images for example. Put all such files (as images) in your public folder, where you want, but do not forget to rewrite the path in your css and js files.
For example if you bougth a template where they have folder like :
folder_css
folder_image
...
the path are written this way :
/* css files */
background-image: url(../folder_image/myimage.png);
But in a meteor project, all files in public folder are at the root of the project, so you can rewrite your path, with for example something like this :
/* css files */
background-image: url(img/myimage.png);
Rewrite path in JS files also and I think it should work.
For the most part, I use the default TinyMCE plugins.
Every now and then, I make my own for my own specific needs.
To do so, I go to the tinymce directory, then the plugin directory, and then one of the individual plugin directories, and modify the script as necessary.
All is good except my memory (not my computer's but my head's). 4 months goes by, and I decide to upgrade to a newer version or something. Which ones did I change? I have no idea!
I would like to create my own directory called myTinyMCE_Plugins, and not even include it in the tinymce directory. That way I just need to remember to move my specific plugins over.
But when configuring TinyMCE, I can add the plugin name, but don't seem to be able to specify the plugin's path. Yes, I can use symbolic links, but this too is not ideal.
How can I locate TinyMCE plugins in a separate directory?
tinymce.init({
plugins: ["someDefaultPlugin someCustomPlugin"],
toolbar: "someDefaultPlugin | someCustomPlugin"
});
After asking the question, I found http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin.
You can also have the plugin in any location you want by loading the plugin.js/plugin.min.js files directrly after the tinymce.js/tinymce.min.js.
Example of loading the plugin from another url
<script src="/tinymce/js/tinymce.min.js"></script>
<script src="/scripts/my.tinymce.plugin.js"></script>
<script>
tinymce.init({..});
</script>
I'm considering loading jquery and a series of plugins via a loader i.e labjs, or yepnope.js.
I want to load the jquery plugins into a custom jquery namespace, if possible without modifying them.
Any idea how I could load these plugins without having to modify them by adding a (mynamespace.Jquery) efficiently?
How you can load them into the namespace is easy enough:
(function(jQuery) {
-- Plugin code here
})(mynamespace.jQuery);
The second part of your question is a little harder. Say your plugin resides on the server at http://www.mysite.com/javascript/jquery.fancybox.js
You're going to have to serve the plugin. You're going to have to dynamically wrap the plugin somehow within your desired namespace.
Quick pseudo code answer in php:
An example request would be to
http://www.mysite.com/plugin.php?script=jquery.fancybox&namespace=mynamespace
In plugin.php, read in the JS file contents from the
$_REQUEST['script'] param
Output the file contents in the wrapper, e.g.
(function(jQuery) {
< ?= $scriptFileContents ?>
})(< ?= $_REQUEST['namespace'] ?>.jQuery);
And obviously you're going to escape the input parameters to not allow for XSS attacks, right?
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.