Implement lazy js load wraper

This commit is contained in:
YNH Webdev
2013-09-28 00:45:27 +02:00
parent aa9f4c4ed8
commit cb1a4825d2
3 changed files with 53 additions and 36 deletions

View File

@@ -108,7 +108,6 @@ feature -- Implementation
Result.append ("</head><body data-name=%"" + control_name + "%" data-type=%"WSF_PAGE_CONTROL%">") Result.append ("</head><body data-name=%"" + control_name + "%" data-type=%"WSF_PAGE_CONTROL%">")
Result.append (control.render) Result.append (control.render)
Result.append ("<script src=%"assets/jquery.min.js%"></script>") Result.append ("<script src=%"assets/jquery.min.js%"></script>")
Result.append ("<script src=%"assets/bootstrap.min.js%"></script>")
Result.append ("<script src=%"assets/widget.js%"></script>") Result.append ("<script src=%"assets/widget.js%"></script>")
Result.append ("<script type=%"text/javascript%">$(function() {var page= new WSF_PAGE_CONTROL(") Result.append ("<script type=%"text/javascript%">$(function() {var page= new WSF_PAGE_CONTROL(")
Result.append (full_state.representation) Result.append (full_state.representation)

View File

@@ -31,7 +31,23 @@ Mini =
{ {
render:template(t) render:template(t)
} }
lazy_load = (requirements,fn,that)->
if not that?
that = window
return ()->
if not args?
args = []
counter = requirements.length + 1
self = @
done = ()->
counter = counter - 1
if counter == 0
fn.apply(that,arguments)
return
for r in requirements
$.cachedScript(r).done(done)
done()
build_control = (control_name, state, control)-> build_control = (control_name, state, control)->
$el = control.$el.find('[data-name='+control_name+']') $el = control.$el.find('[data-name='+control_name+']')
#get control type #get control type
@@ -78,24 +94,14 @@ class WSF_MAX_VALIDATOR extends WSF_VALIDATOR
class WSF_CONTROL class WSF_CONTROL
requirements : [] requirements: []
constructor: (@parent_control, @$el, @control_name, @fullstate)-> constructor: (@parent_control, @$el, @control_name, @fullstate)->
@state = @fullstate.state @state = @fullstate.state
@load_subcontrols() @load_subcontrols()
@isolation = (""+@$el.data('isolation')=="1") @isolation = (""+@$el.data('isolation')=="1")
@$el.data('control',@) @$el.data('control',@)
@initialize = lazy_load @requirements, @attach_events, @
return return
initialize:()->
counter = @requirements.length + 1
self = @
done = ()->
counter = counter - 1
if counter == 0
self.attach_events()
return
for r in @requirements
$.cachedScript(r).done(done)
done()
load_subcontrols: ()-> load_subcontrols: ()->
if @fullstate.controls? if @fullstate.controls?
@@ -200,6 +206,7 @@ class WSF_PAGE_CONTROL extends WSF_CONTROL
@url = @state['url'] @url = @state['url']
@url_params = jQuery.unparam(@state['url_params']) @url_params = jQuery.unparam(@state['url_params'])
@$el.data('control',@) @$el.data('control',@)
@initialize = lazy_load @requirements, @attach_events, @
@load_subcontrols() @load_subcontrols()
wrap : (cname,state)-> wrap : (cname,state)->
@@ -274,8 +281,10 @@ class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
fn: ()-> fn: ()->
self.trigger_callback(self.control_name, 'autocomplete') self.trigger_callback(self.control_name, 'autocomplete')
}) })
@$el.on 'typeahead:closed',()-> @$el.on 'typeahead:closed',()->
self.change() self.change()
@$el.on 'typeahead:blured',()-> @$el.on 'typeahead:blured',()->
self.change() self.change()
@@ -454,7 +463,7 @@ class WSF_REPEATER_CONTROL extends WSF_CONTROL
show_alert = (action)-> show_alert = (action)->
alert(action.message) alert(action.message)
start_modal = (action)-> start_modal = lazy_load ['assets/bootstrap.min.js'], (action)->
modal = $("""<div class="modal fade"> modal = $("""<div class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">

View File

@@ -1,5 +1,5 @@
// Generated by CoffeeScript 1.6.1 // Generated by CoffeeScript 1.6.1
var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, show_alert, start_modal, template, tmpl, var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, show_alert, start_modal, template, tmpl,
__hasProp = {}.hasOwnProperty, __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
@@ -49,6 +49,31 @@ Mini = {
} }
}; };
lazy_load = function(requirements, fn, that) {
if (that == null) {
that = window;
}
return function() {
var args, counter, done, r, self, _i, _len;
if (typeof args === "undefined" || args === null) {
args = [];
}
counter = requirements.length + 1;
self = this;
done = function() {
counter = counter - 1;
if (counter === 0) {
fn.apply(that, arguments);
}
};
for (_i = 0, _len = requirements.length; _i < _len; _i++) {
r = requirements[_i];
$.cachedScript(r).done(done);
}
return done();
};
};
build_control = function(control_name, state, control) { build_control = function(control_name, state, control) {
var $el, type, typeclass; var $el, type, typeclass;
$el = control.$el.find('[data-name=' + control_name + ']'); $el = control.$el.find('[data-name=' + control_name + ']');
@@ -151,27 +176,10 @@ WSF_CONTROL = (function() {
this.load_subcontrols(); this.load_subcontrols();
this.isolation = "" + this.$el.data('isolation') === "1"; this.isolation = "" + this.$el.data('isolation') === "1";
this.$el.data('control', this); this.$el.data('control', this);
this.initialize = lazy_load(this.requirements, this.attach_events, this);
return; return;
} }
WSF_CONTROL.prototype.initialize = function() {
var counter, done, r, self, _i, _len, _ref;
counter = this.requirements.length + 1;
self = this;
done = function() {
counter = counter - 1;
if (counter === 0) {
self.attach_events();
}
};
_ref = this.requirements;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
r = _ref[_i];
$.cachedScript(r).done(done);
}
return done();
};
WSF_CONTROL.prototype.load_subcontrols = function() { WSF_CONTROL.prototype.load_subcontrols = function() {
var control_name, state; var control_name, state;
if (this.fullstate.controls != null) { if (this.fullstate.controls != null) {
@@ -339,6 +347,7 @@ WSF_PAGE_CONTROL = (function(_super) {
this.url = this.state['url']; this.url = this.state['url'];
this.url_params = jQuery.unparam(this.state['url_params']); this.url_params = jQuery.unparam(this.state['url_params']);
this.$el.data('control', this); this.$el.data('control', this);
this.initialize = lazy_load(this.requirements, this.attach_events, this);
this.load_subcontrols(); this.load_subcontrols();
} }
@@ -802,7 +811,7 @@ show_alert = function(action) {
return alert(action.message); return alert(action.message);
}; };
start_modal = function(action) { start_modal = lazy_load(['assets/bootstrap.min.js'], function(action) {
var modal; var modal;
modal = $("<div class=\"modal fade\">\n<div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n <h4 class=\"modal-title\">" + action.title + "</h4>\n </div>\n <div class=\"modal-body\">\n \n </div>\n </div>\n</div>\n</div>"); modal = $("<div class=\"modal fade\">\n<div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n <h4 class=\"modal-title\">" + action.title + "</h4>\n </div>\n <div class=\"modal-body\">\n \n </div>\n </div>\n</div>\n</div>");
modal.appendTo('body'); modal.appendTo('body');
@@ -817,4 +826,4 @@ start_modal = function(action) {
}).done(function(data) { }).done(function(data) {
return modal.find('.modal-body').append(data); return modal.find('.modal-body').append(data);
}); });
}; });