├── README.txt
├── dialog-jquery.js
└── weblocks-jquery.js


/README.txt:
--------------------------------------------------------------------------------
 1 | These are javascript files which allow to replace prototype-dependent functionality in weblocks with jquery-dependent functionality.
 2 | To use it copy jquery files (or link if you use this repository as a submodule) to pub/scripts directory, unload prototype, load jquery and these files.
 3 | Example of loading is following.
 4 | 
 5 | (defwebapp test-app
 6 |  :prefix "/" 
 7 |  :description "test-app: A new great application"
 8 |  :init-user-session 'test-app::init-user-session
 9 |  :autostart nil                   ;; have to start the app manually
10 |  :ignore-default-dependencies t ;; accept the defaults
11 |  :debug t
12 |  :dependencies
13 |  (list 
14 |   (make-instance 'script-dependency :url "/pub/scripts/jquery-1.7.2.min.js")
15 |   (make-instance 'stylesheet-dependency :url "/pub/stylesheets/main.css")
16 |   (make-instance 'script-dependency :url "/pub/scripts/weblocks-jquery.js")
17 |   (make-instance 'script-dependency :url "/pub/scripts/dialog-jquery.js")
18 |   (make-instance 'script-dependency :url "/pub/scripts/jquery-seq.js")))   
19 | 
20 | Repository also contains onAvailable utility function, useful for Weblocks plugisn writing.
21 | 
22 | 


--------------------------------------------------------------------------------
/dialog-jquery.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Dialog jQuery - dialog helper functions for Weblocks, v0.0.1
 3 |  */
 4 | 
 5 | function showDialog(title, body, cssClass){
 6 |   if(jQuery('.graybox').length){
 7 |     jQuery('.graybox').show();
 8 |   }else{
 9 |     jQuery('body').append('<div class="graybox"></div>');
10 |   }
11 | 
12 |   var dialogBody = '<div class="dialog-body">' + body + '</div>';
13 |   var titleBar = '<table class="title-bar" cellspacing="0" cellpadding="0"><tr><td class="title-text-cell"><h2 class="title-text">' + title + '</h2></td></tr></table>';
14 |   var dialogHtml = '<div class="dialog ' + cssClass + '"><div class="dialog-extra-top-1"></div><div class="dialog-extra-top-2"></div><div class="dialog-extra-top-3"></div>' + titleBar + dialogBody + '<div class="extra-bottom-1"></div><div class="extra-bottom-2"></div><div class="extra-bottom-3"></div></div>';
15 |   var dialog = jQuery(dialogHtml);
16 | 
17 |   jQuery('div.page-wrapper').append(dialog);
18 |   var offsetTop = (jQuery(window).height() - dialog.height()) / 2;
19 |   var offsetLeft = (jQuery(window).width() - dialog.width()) / 2;
20 |   dialog.offset({top: offsetTop, left: offsetLeft});
21 | }
22 | 
23 | function removeDialog(){
24 |   jQuery('.dialog').remove();
25 |   jQuery('.graybox').hide();
26 | }
27 | 


--------------------------------------------------------------------------------
/weblocks-jquery.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Weblocks-jQuery - javascript helper functions for Weblocks 
  3 |  * v0.2.0
  4 |  *
  5 |  * https://github.com/html/weblocks-jquery
  6 |  */
  7 | 
  8 | // Taken from http://css-tricks.com/snippets/jquery/serialize-form-to-json/
  9 | jQuery.fn.serializeObject = function()
 10 | {
 11 |   var o = {};
 12 |   var a = this.serializeArray();
 13 |   jQuery.each(a, function() {
 14 |     if (o[this.name]) {
 15 |       if (!o[this.name].push) {
 16 |         o[this.name] = [o[this.name]];
 17 |       }
 18 |       o[this.name].push(this.value || '');
 19 |     } else {
 20 |       o[this.name] = this.value || '';
 21 |     }
 22 |   });
 23 |   return o;
 24 | };
 25 | 
 26 | /*
 27 |  * This prevents javascript error, but does not any effect like with usual weblocks flashes.
 28 |  */
 29 | window.Effect = Effect = {
 30 |   Pulsate: function(){ return {};},
 31 |   BlindUp: function(){ return {};}
 32 | };
 33 | 
 34 | /*
 35 |  * This prevents javascript error and replaces weblocks focusFirstElement form functionality
 36 |  */
 37 | jQuery.fn.focusFirstElement = function(){
 38 |   if(jQuery(this).length){
 39 |     jQuery(this).find('input:first').focus();
 40 |   }
 41 | };
 42 | 
 43 | jQuery.fn.serializeObjectWithSubmit = function(){
 44 |   var ret = this.serializeObject();
 45 |   var submitElement = jQuery(this).find('input[type=submit][clicked=true]');
 46 |   ret[submitElement.attr('name')] = submitElement.val();
 47 |   submitElement.attr('clicked', null);
 48 | 
 49 |   return ret;
 50 | };
 51 | 
 52 | // Utilities
 53 | function updateElementBody(element, newBody) {
 54 |   element.update(newBody);
 55 | }
 56 | 
 57 | function updateElement(element, newElement) {
 58 |   var $newElement = jQuery(newElement);
 59 |   element.replaceWith($newElement);
 60 | }
 61 | 
 62 | function applySubmitClickEvent() {
 63 |   jQuery("form input[type=submit]")
 64 |     .unbind('click.weblocks-submit-event')
 65 |     .bind('click.weblocks-submit-event', function() {
 66 |       $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
 67 |       $(this).attr("clicked", "true");
 68 |     });
 69 | }
 70 | 
 71 | function selectionEmpty() {
 72 |   if(document.getSelection) {
 73 |     return document.getSelection() == "";
 74 |   } else if(document.selection && document.selection.createRange) {
 75 |     return document.selection.createRange().text == "";
 76 |   } else {
 77 |     return true;
 78 |   }
 79 | }
 80 | 
 81 | function addCss(cssCode) {
 82 |   var styleElement = document.createElement("style");
 83 |   styleElement.type = "text/css";
 84 |   if (styleElement.styleSheet) {
 85 |     styleElement.styleSheet.cssText = cssCode;
 86 |   } else {
 87 |     styleElement.appendChild(document.createTextNode(cssCode));
 88 |   }
 89 |   document.getElementsByTagName("head")[0].appendChild(styleElement);
 90 | }
 91 | 
 92 | function stopPropagation(event) {
 93 |   if(event.preventDefault) {
 94 |     event.stopPropagation();
 95 |   } else {
 96 |     event.cancelBubble = true;
 97 |   };
 98 | }
 99 | 
100 | function startProgress(){
101 |   jQuery('#ajax-progress').html("<img src='/pub/images/progress.gif'>");
102 | }
103 | 
104 | function stopProgress(){
105 |   jQuery('#ajax-progress').html("");
106 | }
107 | 
108 | // Register global AJAX handlers to show progress
109 | jQuery(document).ajaxStart(function() {
110 |   try{
111 |     startProgress();
112 |   }catch(e){
113 |     window.console && console.log(e, e.message);
114 |   }
115 | });
116 | 
117 | jQuery(document).ajaxStop(function() {
118 |   stopProgress();
119 | });
120 | 
121 | Object.values = function (obj) {
122 |   var vals = [];
123 |   for( var key in obj ) {
124 |     if ( obj.hasOwnProperty(key) ) {
125 |       vals.push(obj[key]);
126 |     }
127 |   }
128 |   return vals;
129 | }
130 | 
131 | function dumpTree(tree, deepness){
132 |   if(!deepness){
133 |     deepness = 1;
134 |   }
135 |   var prefix = '';
136 |   for(var i=0;i<deepness;i++){
137 |     prefix += ' ';
138 |   }
139 | 
140 |   if(tree.children){
141 |     for(var i=0;i<tree.children.length;i++){
142 |       window.console && console.log(prefix + tree.children[i].id);
143 |       dumpTree(tree.children[i], deepness + 1);
144 |     }
145 |   }
146 | }
147 | 
148 | function widgetsJsonToTree(json){
149 |   var widgetsTree = {
150 |   };
151 | 
152 |   for(var i in json){
153 |     widgetsTree[i] = {
154 |       'id': i,
155 |       'widget': jQuery(json[i]),
156 |       'children': []
157 |     };
158 |   }
159 | 
160 |   var idsToDelete = [];
161 | 
162 |   for(var i in widgetsTree){
163 |     var ids = jQuery('[id]', widgetsTree[i].widget).map(function(){
164 |       return jQuery(this).attr('id');
165 |     });
166 | 
167 |     var children = [];
168 |     ids.map(function(key, id){
169 |       if(widgetsTree[id]){
170 |         children.push(widgetsTree[id]);
171 |         idsToDelete.push(id);
172 |       }
173 |     });
174 | 
175 |     var exceptIds = [];
176 | 
177 |     for(var k in children){
178 |       for(var l in children){
179 |         if(k != l 
180 |             && exceptIds.indexOf(children[l].id) == -1 
181 |             && children[k].widget.find('#' + children[l].id).length){
182 |               /*
183 |           window.console && console.log(children[l].id, ' is child of ', children[k].id, 
184 |             children[k].widget.find('#' + children[l].id)
185 |           );*/
186 |           exceptIds.push(children[l].id);
187 |         }
188 |       }
189 |     }
190 | 
191 |     for(var k=0;k<children.length;k++){
192 |       if(exceptIds.indexOf(children[k].id) == -1){
193 |         widgetsTree[i].children.push(children[k]);
194 |       }
195 |     }
196 |   }
197 | 
198 |   for(var i=0;i<idsToDelete.length;i++){
199 |     delete widgetsTree[idsToDelete[i]];
200 |   }
201 | 
202 |   //dumpTree({ children: Object.values(widgetsTree) });
203 |   return widgetsTree.root ? widgetsTree.root : { children: Object.values(widgetsTree) };
204 | }
205 | 
206 | function updateElementForTree(tree){
207 |   if(tree.children){
208 |     tree.children.map(updateElementForTree);
209 |   }
210 | 
211 |   if(tree.id){
212 |     jQuery('#' + tree.id).replaceWith(tree.widget);
213 |   }
214 | }
215 | 
216 | function onActionSuccess(json){
217 |   // See if there are redirects
218 |   var redirect = json['redirect'];
219 |   if (redirect)
220 |   {
221 |     window.location.href = redirect;
222 |     return;
223 |   }
224 | 
225 |   execJsonCalls(json['before-load']);
226 | 
227 |   // Update dirty widgets
228 |   var dirtyWidgets = json['widgets'];
229 | 
230 |   updateElementForTree(widgetsJsonToTree(dirtyWidgets));
231 | 
232 | 
233 |   execJsonCalls(json['on-load']);
234 |   applySubmitClickEvent();
235 | }
236 | 
237 | function execJsonCalls (calls) {
238 |   if(calls) {
239 |     var executedCalls = [];
240 |     jQuery.each(calls, function(i, item){
241 |       if(executedCalls.indexOf(item) == -1){
242 |         jQuery(item).appendTo('body');
243 |         executedCalls.push(item);
244 |       }
245 |     });
246 |   }
247 | }
248 | 
249 | function onActionFailure(response) {
250 |   window.temp = window.open();
251 |   try{
252 |     window.temp.document.write(response.responseText);
253 |     alert('Oops, we could not complete your request because of an internal error.');
254 |   }catch(e){
255 |     window.console && console.log(e, e.toString());
256 |   }
257 | }
258 | 
259 | function getActionUrl(actionCode, sessionString, isPure) {
260 |   actionCode = unescape(actionCode);
261 |   if (!sessionString) sessionString = "";
262 |   var scriptName = location.protocol + "//"
263 |     + location.hostname
264 |     + (location.port ? ":" + location.port : "")
265 |     + location.pathname;
266 |   var query = location.search;
267 |   var url = scriptName + query + (query ? "&" : "?")
268 |     + sessionString + (sessionString ? "&" : "") + "action=" + actionCode;
269 | 
270 |   if(isPure)
271 |     url += '&pure=true';
272 | 
273 |   return url;
274 | }
275 | 
276 | function initiateActionWithArgs(actionCode, sessionString, args, method, url) {
277 |   startProgress();
278 | 
279 |   if (!method) method = 'get';
280 |   if (!url) url = getActionUrl(actionCode, sessionString);
281 |   jQuery.ajax(url, {
282 |     type: method,
283 |     success: onActionSuccess,
284 |     error: onActionFailure,
285 |     data: args
286 |   });
287 | }
288 | 
289 | function initiateActionWithArgsAndCallback(actionCode, sessionString, args){
290 |   startProgress();
291 | 
292 |   var method = args.method || 'get';
293 |   var complete = args.complete;
294 |   var url = args.url || getActionUrl(actionCode, sessionString);
295 |   delete args['method'];
296 |   delete args['complete'];
297 |   delete args['url'];
298 |   args.action = actionCode;
299 | 
300 |   jQuery.ajax(args.url, {
301 |     type: method,
302 |     success: function(first, second, third){ 
303 |       onActionSuccess(first, second, third);
304 |       complete && complete();
305 |     },
306 |     error: onActionFailure,
307 |     data: args
308 |   });
309 | }
310 | 
311 | var answerDeferred = jQuery.Deferred();
312 | var answer = null;
313 | 
314 | function doActionAnswer(newAnswer){
315 |   answer = newAnswer;
316 |   answerDeferred.resolve();
317 | }
318 | 
319 | function initiateActionWithArgsAndDeferredCallback(actionCode, sessionString, args){
320 |   startProgress();
321 | 
322 |   var deferredComplete = args['deferred-complete'];
323 |   delete args['deferred-complete'];
324 | 
325 |   jQuery.when(answerDeferred).always(function(){
326 |     deferredComplete(answer);
327 |     answerDeferred = jQuery.Deferred();
328 |     answer = null;
329 |   });
330 |   return initiateActionWithArgsAndCallback(actionCode, sessionString, args);
331 | }
332 | 
333 | /* convenience/compatibility function */
334 | function initiateAction(actionCode, sessionString) {
335 |   initiateActionWithArgs(actionCode, sessionString);
336 | }
337 | 
338 | function initiateFormAction(actionCode, form, sessionString) {
339 |   // Hidden "action" field should not be serialized on AJAX
340 |   var serializedForm = form.serializeObjectWithSubmit();
341 |   delete(serializedForm['action']);
342 | 
343 |   serializedForm['form-id'] = form.parents('.widget').attr('id');
344 |   initiateActionWithArgs(actionCode, sessionString, serializedForm, form.attr('method'));
345 | }
346 | 
347 | function initiateFormActionWithCallback(actionCode, form, sessionString, callback) {
348 |   // Hidden "action" field should not be serialized on AJAX
349 |   var serializedForm = form.serializeObjectWithSubmit();
350 |   delete(serializedForm['action']);
351 | 
352 |   serializedForm.method = form.attr('method');
353 |   serializedForm.complete = callback;
354 | 
355 |   initiateActionWithArgsAndCallback(actionCode, sessionString, serializedForm);
356 | }
357 | 
358 | function disableIrrelevantButtons(currentButton) {
359 |   $(currentButton).parents('form').find('submit').attr('disabled', true);
360 |   $(currentButton).attr('disabled', false);
361 | }
362 | 
363 | // Fix IE6 flickering issue
364 | if(jQuery.browser.msie) {
365 |   try {
366 |     document.execCommand("BackgroundImageCache", false, true);
367 |   } catch(err) {}
368 | }
369 | 
370 | // Table hovering for IE (can't use CSS expressions because
371 | // Event.observe isn't available there and we can't overwrite events
372 | // using assignment
373 | if(!window.XMLHttpRequest) {
374 |   // IE6 only
375 |   Event.observe(window, 'load', function() {
376 |     var tableRows = $$('.table table tbody tr');
377 |     tableRows.each(function(row) {
378 |       Event.observe(row, 'mouseover', function() {
379 |         row.addClassName('hover');
380 |       });
381 |       Event.observe(row, 'mouseout', function() {
382 |         row.removeClassName('hover');
383 |       });
384 |     });
385 |   });
386 | }
387 | 
388 | 
389 | function include_css(css_file) {
390 |   libraryMissingWarning('include_css');
391 | 
392 |   getStylesNotCached([css_file]);
393 | }
394 | 
395 | function include_dom(script_filename) {
396 |   var html_doc = document.getElementsByTagName('head').item(0);
397 |   var js = document.createElement('script');
398 |   js.setAttribute('language', 'javascript');
399 |   js.setAttribute('type', 'text/javascript');
400 |   js.setAttribute('src', script_filename);
401 |   html_doc.appendChild(js);
402 |   return false;
403 | }
404 | 
405 | /* working with CSS classes */
406 | function addClass(el,myClass){
407 |   if ((hasClass(el,myClass)) || (typeof el == 'undefined'))
408 |     return;
409 |   el.className += " " + myClass;
410 | }
411 | 
412 | function removeClass(el,myClass){
413 |   if (typeof el=='undefined')
414 |     return;
415 |   if (el.getAttribute('class') === null)
416 |     return;
417 | 
418 |   var classes = el.getAttribute('class').split(" ");
419 |   var result=[];
420 | 
421 |   for (i=classes.length;i>=0;i--) {
422 |     if (classes[i] != myClass)
423 |       result.push(classes[i]);
424 |   }
425 | 
426 |   el.setAttribute('class', result.join(" ")); /* FIXME: ie6/7 need className here */
427 | }
428 | 
429 | function hasClass(el, myClass){
430 |   if ((el.className === null) || (typeof el == 'undefined'))
431 |     return false;
432 | 
433 |   var classes = el.className.split(" ");
434 | 
435 |   for (i=classes.length;i>=0;i--) {
436 |     if (classes[i] == myClass)
437 |       return true;
438 |   }
439 | 
440 |   return false;
441 | }
442 | 
443 | /* collapsible sections */
444 | function toggleExpandCollapse (heading,container) {
445 |   if (hasClass(heading,"collapsed")) {
446 |     removeClass(heading,"collapsed");
447 |     removeClass(container,"collapsed");
448 |     addClass(heading,"expanded");
449 |     addClass(container,"expanded");
450 |   } else {
451 |     removeClass(heading,"expanded");
452 |     removeClass(container,"expanded");
453 |     addClass(heading,"collapsed");
454 |     addClass(container,"collapsed");
455 |   }
456 | }
457 | 
458 | function updateWidgetStateFromHash() {
459 |   libraryMissingWarning('updateWidgetStateFromHash');
460 | 
461 |   jQuery.getScript("/pub/scripts/jquery.ba-bbq.js", function(){
462 |     $(window).bind('hashchange', function(event){
463 |       var hash = window.location.hash;
464 |       if (hash)
465 |           initiateActionWithArgs(null, null, {'weblocks-internal-location-hash':hash}, "GET", "/");
466 |     }).trigger('hashchange');
467 |   }).error(function(){
468 |     if(!jQuery.bbq){
469 |       window.console && console.log("It seems that jQuery BBQ library is missing, hashchange event will not be dispatched by weblocks");
470 |     }
471 |   });
472 | }
473 | 
474 | function setLocationHash (hash) {
475 |   window.location.hash = hash;
476 | }
477 | 
478 | function libraryMissingWarning(feature){
479 |   if(!window.withScripts){
480 |     window.console && console.log("Please use javascript library https://github.com/html/jquery-seq to use " + feature + " functionality");
481 |     return;
482 |   }
483 | }
484 | 
485 | $ = function(id){
486 |   if(typeof(id) == 'string'){
487 |     return jQuery('#' + id);
488 |   }else{
489 |     return jQuery(id);
490 |   }
491 | };
492 | 
493 | jQuery(function(){
494 |   applySubmitClickEvent();
495 | });
496 | 
497 | 
498 | window.Event.observe = function(obj, evtType, func){
499 |   if(obj == window && evtType == 'load'){
500 |     jQuery(func);
501 |   }else{
502 |     window.console && console.log("Don't know what to do for " + obj + " and event type " + evtType);
503 |   }
504 | };
505 | 
506 | /*
507 |  * Useful for waiting until element is appeared in html, usage is 
508 |  * 
509 |  * // Init code for input loaded with ajax
510 |  * $('#some-input-should-be-loaded-with-ajax').onAvailable(function(){ 
511 |  *     console.log("Hey, I'm loaded for 100%, now you don't have bugs with me");
512 |  * });
513 |  *
514 |  */
515 | jQuery.fn.onAvailable = function(fn){
516 |   var sel = this.selector;
517 |   var timer;
518 |   var self = this;
519 |   if (this.length > 0) {
520 |     fn.call(this);   
521 |   }
522 |   else {
523 |     timer = setInterval(function(){
524 |       if (jQuery(sel).length > 0) {
525 |         fn.call(jQuery(sel));
526 |         clearInterval(timer);  
527 |       }
528 |     },50);  
529 |   }
530 | }
531 | 


--------------------------------------------------------------------------------