|
|
| Line 1: |
Line 1: |
| |
+ |
{{TipNew |
| |
+ |
|id=1657 |
| |
+ |
|previous=1656 |
| |
+ |
|next=1658 |
| |
+ |
|created=June 28, 2010 |
| |
+ |
|complexity=basic |
| |
+ |
|author=[[User:Sternebrau|Sternebrau]] |
| |
+ |
|version=7.0 |
| |
+ |
|subpage=/201006 |
| |
+ |
|category1=Compiler |
| |
+ |
|category2= |
| |
+ |
}} |
| |
+ |
This tip describes a simple way to automatically compile Javascript files using [http://code.google.com/closure/ Google Closure]. The compiled results are saved to a different file, for example, <code>filename.js</code> saves as both <code>filename.js</code> and <code>filename.min.js</code>. |
| |
|
|
|
| − |
/* |
+ |
===The regular way=== |
| − |
* FBModal 1.0.0 - jQuery Plugin |
+ |
*Edit .js file |
| − |
* http://www.rrpowered.com/FBModal |
+ |
*Save .js file |
| − |
* Copyright (C) 2010 Barrett Palmer (http://www.rrpowred.com). |
+ |
*Link it in .html file |
| − |
* Permission is granted to copy, distribute and/or modify this document |
+ |
*Compile .js file |
| − |
* under the terms of the GNU Free Documentation License, Version 1.3 |
+ |
*Link compiled version in .html file |
| − |
* or any later version published by the Free Software Foundation; |
+ |
*Edit .js file |
| − |
* with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. |
+ |
*Save .js file |
| − |
* A copy of the license is included in the section entitled "GNU |
+ |
*Forget to compile it |
| − |
* Free Documentation License" |
+ |
*Become frustrated because the compiled version is still linked in .html file |
| − |
* |
|
| − |
* |
|
| − |
* FBModal is a FaceBook replica modal dialog |
|
| − |
* |
|
| − |
* only one modal dialog can be created at a time. |
|
| − |
* |
|
| − |
|
|
| − |
* |
|
| − |
* @example $(".YOURDIV").fbmodal({options}); |
|
| − |
* |
|
| − |
* FBModal default options |
|
| − |
* |
|
| − |
* title: "YOUR TITLE HERE", Dialog title text |
|
| − |
* cancel: "Cancel", Cancel button text |
|
| − |
* okay: "Okay", Okay button text |
|
| − |
* okaybutton: true, show the ok button |
|
| − |
* cancelbutton: true, Show the cancel button |
|
| − |
* buttons: true, Show the buttons |
|
| − |
* opacity: 0.0, The opacity value for the overlay div, from 0.0 - 100.0 |
|
| − |
* fadeout: true, When dialog is closed fade out |
|
| − |
* overlayclose: true, Allow click on overlay to close the dialog? |
|
| − |
* modaltop: "30%", Position from top of page 0% - 100% or 0px - 99999px |
|
| − |
* modalwidth: "400" The width for the dialog container |
|
| − |
* }); |
|
| − |
* |
|
| − |
* SFBModal has been tested in the following browsers: |
|
| − |
* - IE 8 |
|
| − |
* - Firefox 2, 3 |
|
| − |
* - Safari 3, 4 |
|
| − |
* - Chrome 1, 2 |
|
| − |
* |
|
| − |
* @name FBModal |
|
| − |
* @type jQuery |
|
| − |
* @requires jQuery v1.4.2 |
|
| − |
* @cat Plugins/Windows and Overlays |
|
| − |
* @author Barrett Palmer (http://www.rrpowered.com) |
|
| − |
* @version 1.0.0 |
|
| − |
* |
|
| − |
*/ |
|
| − |
(function($){ |
|
| − |
$.fn.fbmodal = function(options){ |
|
| |
|
|
|
| − |
//Default values |
+ |
===Using this tip=== |
| − |
var defaults = { |
+ |
*Edit .js file |
| − |
title: "FB Modal", |
+ |
*Save .js file |
| − |
cancel: "Cancel", |
+ |
*Link compiled version in .html |
| − |
okay: "Okay", |
+ |
*Edit .js file |
| − |
okaybutton: true, |
+ |
*Save .js file |
| − |
cancelbutton: true, |
+ |
*Test (because it's automatically compiled!) |
| − |
buttons: true, |
|
| − |
opacity: 0.0, |
|
| − |
fadeout: true, |
|
| − |
overlayclose: true, |
|
| − |
modaltop: "30%", |
|
| − |
modalwidth: "" |
|
| − |
}; |
|
| − |
|
|
| − |
var options = $.extend(defaults, options); |
|
| − |
|
|
| − |
var fbmodalHtml=' \ |
|
| − |
<div id="fbmodal" > \ |
|
| − |
<div class="popup"> \ |
|
| − |
<table> \ |
|
| − |
<tbody> \ |
|
| − |
<tr> \ |
|
| − |
<td class="tl"/><td class="b"/><td class="tr"/> \ |
|
| − |
</tr> \ |
|
| − |
<tr> \ |
|
| − |
<td class="b"/> \ |
|
| − |
<td class="body"> \ |
|
| − |
<div class="title">\ |
|
| − |
</div> \ |
|
| − |
<div class="container">\ |
|
| − |
<div class="content">\ |
|
| − |
</div> \ |
|
| − |
<div class="footer"> \ |
|
| − |
<div class="right">\ |
|
| − |
<div class="button_outside_border_blue" id="ok">\ |
|
| − |
<div class="button_inside_border_blue" id="okay">\ |
|
| − |
</div>\ |
|
| − |
</div>\ |
|
| − |
<div class="button_outside_border_grey" id="close">\ |
|
| − |
<div class="button_inside_border_grey" id="cancel">\ |
|
| − |
</div>\ |
|
| − |
</div>\ |
|
| − |
</div>\ |
|
| − |
<div class="clear">\ |
|
| − |
</div>\ |
|
| − |
</div> \ |
|
| − |
</div>\ |
|
| − |
</td> \ |
|
| − |
<td class="b"/> \ |
|
| − |
</tr> \ |
|
| − |
<tr> \ |
|
| − |
<td class="bl"/><td class="b"/><td class="br"/> \ |
|
| − |
</tr> \ |
|
| − |
</tbody> \ |
|
| − |
</table> \ |
|
| − |
</div> \ |
|
| − |
</div>'; |
|
| |
|
|
|
| − |
var preload = [ new Image(), new Image() ] |
+ |
==Auto compile== |
| − |
$('#fbmodal').find('.b:first, .bl, .br, .tl, .tr').each(function() { |
+ |
Add this to your [[vimrc]], while changing the path in "cpa" to suit your system: |
| − |
preload.push(new Image()) |
+ |
<source lang="vim"> |
| − |
preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1') |
+ |
autocmd BufWriteCmd *.js :call CompileJS() |
| − |
}) |
+ |
function! CompileJS() |
| − |
var dat=this.html(); |
+ |
if &modified |
| − |
$("body").append(fbmodalHtml); |
+ |
write |
| − |
$('#fbmodal .content'). |
+ |
let fn = expand('%:p') |
| − |
append('<div class="loading"><img src="loading.gif"/></div>'); |
+ |
let pn = expand('%:p:h') |
| − |
$('#fbmodal').css("top",options.modaltop); |
+ |
let fnm = expand('%:r.js') |
| − |
if(options.okaybutton == false || options.buttons == false){ |
+ |
let cpa = '/home/username/closure/compiler.jar' |
| − |
$('#fbmodal #ok').hide(); |
+ |
execute "! java -jar " . cpa . " --js=" . fn . " --js_output_file=" . pn . "/" . fnm . ".min.js" |
| − |
} |
+ |
endif |
| − |
if(options.cancelbutton == false || options.buttons == false){ |
+ |
endfunction |
| − |
$('#fbmodal #close').hide(); |
+ |
</source> |
| − |
} |
+ |
|
| − |
$('#fbmodal .title').append(options.title); |
+ |
==Alternative using {{help|prefix=no|:compiler}}== |
| − |
$('#fbmodal #okay').append(options.okay); |
+ |
|
| − |
$('#fbmodal #cancel').append(options.cancel); |
+ |
This procedure defines a closure compiler plugin that may be used rather than the above. |
| − |
$('#fbmodal .content').append(dat).css("width",options.modalwidth); |
+ |
|
| − |
$('#fbmodal .loading').remove(); |
+ |
Put the following in <code>.vim/compiler/closure.vim</code>: |
| − |
$("body").append('<div id="fbmodal_overlay" class="fbmodal_hide"></div>'); |
+ |
|
| − |
$('#fbmodal_overlay').addClass("fbmodal_overlay").fadeTo(0,options.opacity); |
+ |
<source lang="vim"> |
| − |
fbWidth(); |
+ |
if exists("current_compiler") |
| − |
$(window).bind("resize", function(){ |
+ |
finish |
| − |
fbWidth(); |
+ |
endif |
| − |
}); |
+ |
|
| − |
function fbWidth(){ |
+ |
let current_compiler = "closure" |
| − |
var windowWidth=$(window).width(); |
+ |
|
| − |
var fbmodalWidth=$("#fbmodal").width(); |
+ |
if exists(":CompilerSet") != 2 |
| − |
var fbWidth=windowWidth / 2 - fbmodalWidth / 2; |
+ |
" older Vim always used :setlocal |
| − |
$("#fbmodal").css("left",fbWidth); |
+ |
command -nargs=* CompilerSet setlocal <args> |
| − |
} |
+ |
endif |
| − |
if(options.close == true){ |
+ |
|
| − |
if(options.fadeout == true){ |
+ |
CompilerSet makeprg=java\ -jar\ /home/username/closure/compiler.jar\ --js_output_file=%<.min.js\ --js\ % |
| − |
$("#fbmodal").fadeOut( function(){ |
+ |
CompilerSet errorformat=%E%f:%l:\ %m,%-Z%p^,%-C%.%#,%-G%.%# |
| − |
$("#fbmodal").remove(); |
+ |
</source> |
| − |
$('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
+ |
|
| − |
}); |
+ |
===Using this tip=== |
| − |
}else{ |
+ |
*Edit .js file |
| − |
$("#fbmodal").remove(); |
+ |
*Set compiler: <code>:compiler closure</code> |
| − |
$('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
+ |
*Save .js file |
| − |
} |
+ |
*<code>:make</code> |
| − |
} |
+ |
*Fix bugs (<code>:cope</code>, <code>:cn</code>, etc), repeat. |
| − |
if(options.overlayclose == true){ |
+ |
*Link compiled version in .html |
| − |
var overlay="ok, #close, .fbmodal_hide" |
+ |
*Test (because it's compiled while checking for errors!) |
| − |
}else{ |
+ |
|
| − |
var overlay="ok, #close" |
+ |
One could add the following to one's [[vimrc]] to automatically set the proper compiler, and to automatically invoke <code>:make</code> after saving a file, opening the quickfix window if there are any errors: |
| − |
} |
+ |
|
| − |
$("#"+overlay).click( function(){ |
+ |
<pre> |
| − |
if(options.fadeout == true){ |
+ |
autocmd FileType javascript compiler closure |
| − |
$("#fbmodal").fadeOut( function(){ |
+ |
autocmd BufWritePost *.js make! |
| − |
$("#fbmodal").remove(); |
+ |
autocmd BufWritePost *.js cwindow |
| − |
$('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
+ |
</pre> |
| − |
}); |
+ |
|
| − |
}else{ |
+ |
Note the use of <code>make!</code> instead of <code>make</code> to avoid jumping to the first error automatically. This could be annoying when make is automatically invoked! |
| − |
$("#fbmodal").remove(); |
+ |
|
| − |
$('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
+ |
Then the process is: |
| − |
} |
+ |
*Edit .js file |
| − |
}); |
+ |
*Save .js file |
| − |
} |
+ |
*Fix bugs (<code>:cope</code>, <code>:cn</code>, etc), repeat. |
| − |
})(jQuery); |
+ |
*Link compiled version in .html |
| |
+ |
*Test (because it's automatically compiled!) |
| |
+ |
|
| |
+ |
==Comments== |
| |
+ |
*Could be expanded to other file types. |
This tip describes a simple way to automatically compile Javascript files using Google Closure. The compiled results are saved to a different file, for example, filename.js saves as both filename.js and filename.min.js.
The regular way
Edit
- Edit .js file
- Save .js file
- Link it in .html file
- Compile .js file
- Link compiled version in .html file
- Edit .js file
- Save .js file
- Forget to compile it
- Become frustrated because the compiled version is still linked in .html file
Using this tip
Edit
- Edit .js file
- Save .js file
- Link compiled version in .html
- Edit .js file
- Save .js file
- Test (because it's automatically compiled!)
Auto compile
Edit
Add this to your vimrc, while changing the path in "cpa" to suit your system:
autocmd BufWriteCmd *.js :call CompileJS()
function! CompileJS()
if &modified
write
let fn = expand('%:p')
let pn = expand('%:p:h')
let fnm = expand('%:r.js')
let cpa = '/home/username/closure/compiler.jar'
execute "! java -jar " . cpa . " --js=" . fn . " --js_output_file=" . pn . "/" . fnm . ".min.js"
endif
endfunction
This procedure defines a closure compiler plugin that may be used rather than the above.
Put the following in .vim/compiler/closure.vim:
if exists("current_compiler")
finish
endif
let current_compiler = "closure"
if exists(":CompilerSet") != 2
" older Vim always used :setlocal
command -nargs=* CompilerSet setlocal <args>
endif
CompilerSet makeprg=java\ -jar\ /home/username/closure/compiler.jar\ --js_output_file=%<.min.js\ --js\ %
CompilerSet errorformat=%E%f:%l:\ %m,%-Z%p^,%-C%.%#,%-G%.%#
Using this tip
Edit
- Edit .js file
- Set compiler:
:compiler closure
- Save .js file
:make
- Fix bugs (
:cope, :cn, etc), repeat.
- Link compiled version in .html
- Test (because it's compiled while checking for errors!)
One could add the following to one's vimrc to automatically set the proper compiler, and to automatically invoke :make after saving a file, opening the quickfix window if there are any errors:
autocmd FileType javascript compiler closure
autocmd BufWritePost *.js make!
autocmd BufWritePost *.js cwindow
Note the use of make! instead of make to avoid jumping to the first error automatically. This could be annoying when make is automatically invoked!
Then the process is:
- Edit .js file
- Save .js file
- Fix bugs (
:cope, :cn, etc), repeat.
- Link compiled version in .html
- Test (because it's automatically compiled!)
- Could be expanded to other file types.