Redesign states and implement generated control_name

This commit is contained in:
YNH Webdev
2013-11-08 00:03:02 +01:00
parent c9102af0aa
commit 86339d8163
33 changed files with 433 additions and 153 deletions

View File

@@ -69,6 +69,15 @@ Mini =
{
render:template(t)
}
parseSuggestions = (data)->
for a of data
if a == 'suggestions'
return data[a]
else
d = parseSuggestions(data[a])
if d?
return d
return null
loaded = {}
lazy_load = (requirements,fn,that)->
if requirements.length == 0
@@ -97,7 +106,7 @@ lazy_load = (requirements,fn,that)->
done()
build_control = (control_name, state, control)->
$el = control.$el.find('[data-name='+control_name+']')
$el = control.$el.find('[data-name='+control_name+']').first()
#get control type
type = $el.data('type')
#create class
@@ -176,16 +185,31 @@ class WSF_CONTROL
console.log "Failed preforming action #{action.type}"
process_update: (new_states)->
if new_states[@control_name]?
@update(new_states[@control_name])
for control in @controls
if control?
control.process_update(new_states)
try
if new_states[@control_name]?
@update(new_states[@control_name])
for control in @controls
if control?
control.process_update(new_states[this.control_name]['controls'])
catch e
return
return
get_context_state : ()->
if @parent_control? and not @isolation
return @parent_control.get_context_state()
return @wrap(@control_name,@fullstate)
get_full_control_name: ()->
if @parent_control?
val = @parent_control.get_full_control_name()
if val != ""
val = val + "-"
return val+@control_name
return @control_name
wrap : (cname,state)->
ctrs = {}
ctrs[cname] = state
@@ -201,10 +225,18 @@ class WSF_CONTROL
@url + '?' + $.param(params)
trigger_callback: (control_name,event,event_parameter)->
@run_trigger_callback(@get_full_control_name(),event,event_parameter)
get_page:()->
if @parent_control?
return @parent_control.get_page()
return @
run_trigger_callback: (control_name,event,event_parameter)->
if @parent_control? and not @isolation
return @parent_control.trigger_callback(control_name,event,event_parameter)
return @parent_control.run_trigger_callback(control_name,event,event_parameter)
self = @
$.ajax
return $.ajax
type: 'POST',
url: @callback_url
control_name: control_name
@@ -219,7 +251,7 @@ class WSF_CONTROL
#Update all classes
if new_states.actions?
self.process_actions(new_states.actions)
self.process_update(new_states)
self.get_page().process_update(new_states)
#Simple event listener
@@ -257,6 +289,17 @@ class WSF_PAGE_CONTROL extends WSF_CONTROL
@initialize = lazy_load @requirements, @attach_events, @
@load_subcontrols()
process_update: (new_states)->
for control in @controls
if control?
control.process_update(new_states)
return
get_full_control_name: ()->
""
wrap : (cname,state)->
state
@@ -310,6 +353,16 @@ class WSF_INPUT_CONTROL extends WSF_CONTROL
if state.text?
@state['text'] = state.text
@$el.val(state.text)
class WSF_NAVLIST_ITEM_CONTROL extends WSF_BUTTON_CONTROL
update: (state) ->
super
if state.active?
if state.active
@$el.addClass("active")
else
@$el.removeClass("active")
class WSF_TEXTAREA_CONTROL extends WSF_INPUT_CONTROL
@@ -341,6 +394,7 @@ class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
attach_events: () ->
super
self = @
console.log @$el
@$el.typeahead({
name: @control_name
template: @state['template']
@@ -354,7 +408,7 @@ class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
event: 'autocomplete'
states: JSON.stringify(self.get_context_state())
filter: (parsedResponse) ->
parsedResponse[self.control_name]['suggestions']
return parseSuggestions(parsedResponse)
fn: ()->
self.trigger_callback(self.control_name, 'autocomplete')
})

View File

@@ -1,5 +1,5 @@
// Generated by CoffeeScript 1.6.1
var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CODEVIEW_CONTROL, WSF_CONTROL, WSF_DROPDOWN_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_SLIDER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, loaded, show_alert, start_modal, start_modal_big, template, tmpl,
var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CODEVIEW_CONTROL, WSF_CONTROL, WSF_DROPDOWN_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_NAVLIST_ITEM_CONTROL, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_SLIDER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, lazy_load, loaded, parseSuggestions, show_alert, start_modal, start_modal_big, template, tmpl,
__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; };
@@ -101,6 +101,21 @@ Mini = {
}
};
parseSuggestions = function(data) {
var a, d;
for (a in data) {
if (a === 'suggestions') {
return data[a];
} else {
d = parseSuggestions(data[a]);
if (d != null) {
return d;
}
}
}
return null;
};
loaded = {};
lazy_load = function(requirements, fn, that) {
@@ -141,7 +156,7 @@ lazy_load = function(requirements, fn, that) {
build_control = function(control_name, state, control) {
var $el, type, typeclass;
$el = control.$el.find('[data-name=' + control_name + ']');
$el = control.$el.find('[data-name=' + control_name + ']').first();
type = $el.data('type');
typeclass = null;
try {
@@ -293,21 +308,21 @@ WSF_CONTROL = (function() {
};
WSF_CONTROL.prototype.process_update = function(new_states) {
var control, _i, _len, _ref, _results;
if (new_states[this.control_name] != null) {
this.update(new_states[this.control_name]);
}
_ref = this.controls;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
control = _ref[_i];
if (control != null) {
_results.push(control.process_update(new_states));
} else {
_results.push(void 0);
var control, _i, _len, _ref;
try {
if (new_states[this.control_name] != null) {
this.update(new_states[this.control_name]);
_ref = this.controls;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
control = _ref[_i];
if (control != null) {
control.process_update(new_states[this.control_name]['controls']);
}
}
}
} catch (e) {
return;
}
return _results;
};
WSF_CONTROL.prototype.get_context_state = function() {
@@ -317,6 +332,18 @@ WSF_CONTROL = (function() {
return this.wrap(this.control_name, this.fullstate);
};
WSF_CONTROL.prototype.get_full_control_name = function() {
var val;
if (this.parent_control != null) {
val = this.parent_control.get_full_control_name();
if (val !== "") {
val = val + "-";
}
return val + this.control_name;
}
return this.control_name;
};
WSF_CONTROL.prototype.wrap = function(cname, state) {
var ctrs;
ctrs = {};
@@ -339,9 +366,20 @@ WSF_CONTROL = (function() {
};
WSF_CONTROL.prototype.trigger_callback = function(control_name, event, event_parameter) {
return this.run_trigger_callback(this.get_full_control_name(), event, event_parameter);
};
WSF_CONTROL.prototype.get_page = function() {
if (this.parent_control != null) {
return this.parent_control.get_page();
}
return this;
};
WSF_CONTROL.prototype.run_trigger_callback = function(control_name, event, event_parameter) {
var self;
if ((this.parent_control != null) && !this.isolation) {
return this.parent_control.trigger_callback(control_name, event, event_parameter);
return this.parent_control.run_trigger_callback(control_name, event, event_parameter);
}
self = this;
return $.ajax({
@@ -359,7 +397,7 @@ WSF_CONTROL = (function() {
if (new_states.actions != null) {
self.process_actions(new_states.actions);
}
return self.process_update(new_states);
return self.get_page().process_update(new_states);
});
};
@@ -416,6 +454,21 @@ WSF_PAGE_CONTROL = (function(_super) {
this.load_subcontrols();
}
WSF_PAGE_CONTROL.prototype.process_update = function(new_states) {
var control, _i, _len, _ref;
_ref = this.controls;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
control = _ref[_i];
if (control != null) {
control.process_update(new_states);
}
}
};
WSF_PAGE_CONTROL.prototype.get_full_control_name = function() {
return "";
};
WSF_PAGE_CONTROL.prototype.wrap = function(cname, state) {
return state;
};
@@ -534,6 +587,29 @@ WSF_INPUT_CONTROL = (function(_super) {
})(WSF_CONTROL);
WSF_NAVLIST_ITEM_CONTROL = (function(_super) {
__extends(WSF_NAVLIST_ITEM_CONTROL, _super);
function WSF_NAVLIST_ITEM_CONTROL() {
return WSF_NAVLIST_ITEM_CONTROL.__super__.constructor.apply(this, arguments);
}
WSF_NAVLIST_ITEM_CONTROL.prototype.update = function(state) {
WSF_NAVLIST_ITEM_CONTROL.__super__.update.apply(this, arguments);
if (state.active != null) {
if (state.active) {
return this.$el.addClass("active");
} else {
return this.$el.removeClass("active");
}
}
};
return WSF_NAVLIST_ITEM_CONTROL;
})(WSF_BUTTON_CONTROL);
WSF_TEXTAREA_CONTROL = (function(_super) {
__extends(WSF_TEXTAREA_CONTROL, _super);
@@ -590,6 +666,7 @@ WSF_AUTOCOMPLETE_CONTROL = (function(_super) {
var self;
WSF_AUTOCOMPLETE_CONTROL.__super__.attach_events.apply(this, arguments);
self = this;
console.log(this.$el);
this.$el.typeahead({
name: this.control_name,
template: this.state['template'],
@@ -605,7 +682,7 @@ WSF_AUTOCOMPLETE_CONTROL = (function(_super) {
});
},
filter: function(parsedResponse) {
return parsedResponse[self.control_name]['suggestions'];
return parseSuggestions(parsedResponse);
},
fn: function() {
return self.trigger_callback(self.control_name, 'autocomplete');

View File

@@ -21,20 +21,20 @@ feature
btn: WSF_BUTTON_CONTROL
dropdown:WSF_DROPDOWN_CONTROL
do
create control.make ("container")
create control.make
control.add_class ("container")
create dropdown.make_with_tag_name ( "Dropdown", "li")
dropdown.add_link_item ("Example link 1", "#")
dropdown.add_divider
dropdown.add_link_item ("Example link 2", "#")
create navbar.make_with_brand ("navbar1", "Example")
create navbar.make_with_brand ("Example")
navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/%"", "Home"))
navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/grid%"", "Grid"))
navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/repeater%"", "Repeater"))
navbar.add_list_element (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/slider%"", "Slider"))
navbar.add_element (dropdown)
navbar.add_list_element_right (create {WSF_BASIC_CONTROL}.make_with_body ("a", "href=%"/about%"", "About"))
create btn.make ("scode", "Show Code")
create btn.make ("Show Code")
btn.set_click_event (agent show_code)
btn.set_isolation (true)
btn.add_class ("btn-success")

View File

@@ -20,7 +20,7 @@ feature
initialize_controls
do
create control.make_codeview ("textarea", "")
create control.make_codeview ("")
end
process

View File

@@ -24,12 +24,12 @@ feature
Precursor
control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h1", "", "Grid Demo"))
create datasource.make_news
create search_query.make ("query", create {GOOGLE_AUTOCOMPLETION}.make)
create search_query.make (create {GOOGLE_AUTOCOMPLETION}.make)
search_query.add_class ("form-control")
search_query.set_change_event (agent change_query)
control.add_control (search_query)
control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h2", "", "Results"))
create grid.make ("mygrid", <<create {WSF_GRID_COLUMN}.make ("Title", "title"), create {WSF_GRID_COLUMN}.make ("Content", "content")>>, datasource)
create grid.make (<<create {WSF_GRID_COLUMN}.make ("Title", "title"), create {WSF_GRID_COLUMN}.make ("Content", "content")>>, datasource)
control.add_control (grid)
navbar.set_active (2)
end

View File

@@ -24,9 +24,9 @@ feature -- Implementation
form: WSF_FORM_CONTROL
do
Precursor
create slider.make ("myslider")
create form.make ("sliderform")
form.add_control (create {WSF_FORM_ELEMENT_CONTROL [STRING]}.make ("Input", create {WSF_INPUT_CONTROL}.make ("sliderformtext", "Test")))
create slider.make
create form.make
form.add_control (create {WSF_FORM_ELEMENT_CONTROL [STRING]}.make ("Input", create {WSF_INPUT_CONTROL}.make ("Test")))
--slider.add_control (form, Void)
--slider.add_image ("http://www.placesmustseen.com/wp-content/uploads/2013/01/paris-eiffel-tower.jpg", "Eiffel Tower")
slider.add_image ("http://31.media.tumblr.com/43f3edae3fb569943047077cddf93c79/tumblr_mtw7wdX9cm1st5lhmo1_1280.jpg", "car")

View File

@@ -24,12 +24,12 @@ feature
Precursor
control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h1", "", " Repeater Demo"))
create datasource.make_news
create search_query.make ("query", create {GOOGLE_AUTOCOMPLETION}.make)
create search_query.make (create {GOOGLE_AUTOCOMPLETION}.make)
search_query.add_class ("form-control")
search_query.set_change_event (agent change_query)
control.add_control (search_query)
control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h2", "", "Results"))
create repeater.make ("myrepeater", datasource)
create repeater.make (datasource)
control.add_control (repeater)
navbar.set_active (3)
end

View File

@@ -30,58 +30,58 @@ feature
source: INCREASING_PROGRESSSOURCE
do
Precursor
create form.make ("panel")
create form.make
form.add_class ("form-horizontal")
--Number 1
create textbox1.make ("txtBox1", "1")
create textbox1.make ("1")
create n1_container.make ("Number1", textbox1)
n1_container.add_validator (create {WSF_DECIMAL_VALIDATOR}.make_decimal_validator ("Invalid Number"))
n1_container.add_validator (create {OWN_VALIDATOR}.make_own)
form.add_control (n1_container)
--Number 2
create textbox2.make ("txtBox2", "2")
create textbox2.make ("2")
create n2_container.make ("Number2", textbox2)
n2_container.add_validator (create {WSF_DECIMAL_VALIDATOR}.make_decimal_validator ("Invalid Number"))
form.add_control (n2_container)
--Flag autocomplete
create autocompletion1.make ("autocompletion1", create {FLAG_AUTOCOMPLETION}.make)
create autocompletion1.make (create {FLAG_AUTOCOMPLETION}.make)
create n3_container.make ("Flag Autocomplete", autocompletion1)
form.add_control (n3_container)
--Contact autocomplete
create autocompletion2.make ("autocompletion2", create {CONTACT_AUTOCOMPLETION}.make)
create autocompletion2.make (create {CONTACT_AUTOCOMPLETION}.make)
create n4_container.make ("Contact Autocomplete", autocompletion2)
form.add_control (n4_container)
--Google autocomplete
create autocompletion3.make ("autocompletion4", create {GOOGLE_AUTOCOMPLETION}.make)
create autocompletion3.make (create {GOOGLE_AUTOCOMPLETION}.make)
create n5_container.make ("Google Autocomplete", autocompletion3)
form.add_control (n5_container)
--Categories
create cklist.make ("categories")
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("net", "Network", "net"))
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("os", "Operating Systems", "os"))
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("fmfp", "Formal Methods and Functional Programming", "fmfp"))
create cklist.make
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Network", "net"))
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Operating Systems", "os"))
cklist.add_control (create {WSF_CHECKBOX_CONTROL}.make ("Formal Methods and Functional Programming", "fmfp"))
create cats_container.make ("Categories", cklist)
cats_container.add_validator (create {WSF_MIN_VALIDATOR [STRING]}.make_min_validator (1, "Choose at least one category"))
cats_container.add_validator (create {WSF_MAX_VALIDATOR [STRING]}.make_max_validator (2, "Choose at most two category"))
form.add_control (cats_container)
--Button 1
create button1.make ("sample_button1", "Update")
create button1.make ("Update")
button1.set_click_event (agent handle_click)
button1.add_class ("col-lg-offset-2")
form.add_control (button1)
--Button 2
create button2.make ("sample_button2", "Start Modal Grid")
create button2.make ("Start Modal Grid")
button2.set_click_event (agent handle_click)
form.add_control (button2)
--Result
create result_html.make ("txtBox3", "p", "")
create result_html.make ("p", "")
form.add_control (create {WSF_FORM_ELEMENT_CONTROL [STRING]}.make ("Result", result_html))
control.add_control (form)
--Progress bar
control.add_control (create {WSF_BASIC_CONTROL}.make_with_body ("h4", "", "Autoincrementing progressbar"))
create source.make
create progress.make_with_source ("progress1", source)
create progress.make_with_source (source)
source.set_control (progress)
progress.set_isolation (true)
control.add_control (progress)