src/htc/behaviors.css src/htc/component.htc @@ -8,9 +8,28 @@ THC2_PKG_DIR = File.join(THC2_ROOT, 'pkg') THC2_DOC_DIR = File.join(THC2_ROOT, 'doc') THC2_VERSION = '0.1' JSDOC_DIR = File.join(THC2_ROOT, 'lib/jsdoc') +HTC_SRC_DIR = File.join(THC2_SRC_DIR, 'htc') +HTC_DIST_DIR = File.join(THC2_DIST_DIR, 'htc') task :default => [:dist, :document, :package, :clean_package_source] +desc "Generates HTC files for IE" +task :build_htcs => :dist do + src = File.read(File.join(THC2_DIST_DIR, 'thc2.js')) + behaviors = src.grep(/CurrentPage\.registerBehaviour$[\'\"](thc2-[a-z\-]+)[\'\"],\s+([A-Za-z]+)$/) { [$1, $2] } + puts behaviors.inspect + FileUtils.mkdir_p HTC_DIST_DIR + behaviors.each do |css, klass| + File.open(File.join(HTC_DIST_DIR, "#{css}.htc"), 'w') do |file| + file.print ERB.new(IO.read(File.join(HTC_SRC_DIR, 'component.htc')), nil, '%').result(binding) + end + end + + File.open(File.join(HTC_DIST_DIR, "behaviors.css"), 'w') do |file| + file.print ERB.new(IO.read(File.join(HTC_SRC_DIR, 'behaviors.css')), nil, '%').result(binding) + end +end + desc "Builds the distribution." task :dist do $:.unshift File.join(THC2_ROOT, 'lib') Rakefile @@ -2,7 +2,8 @@ * (c) 2007-2008 imedo GmbH * * THC2 is freely distributable under the terms of an MIT-style license. - * For details, see the THC2 web site: http://devblog.imedo.de/what? + * For details, see the THC2 project web site: + * + * http://opensource.imedo.de/pages/show/thc2 * *--------------------------------------------------------------------------*/ - \ No newline at end of file src/HEADER @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/core/ajax_cache.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -57,6 +57,10 @@ var Benchmark = Class.create( return this.stop_time - this.start_time; }, + lapTime: function() { + return (new Date()) - this.start_time; + }, + /** * Convenience method that logs the measured time with log level <code>"info"</code>. * See the {@link Logger} class for details about log levels. src/core/benchmark.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -36,7 +36,7 @@ var Core = { * @return {boolean} <code>true</code>, if the file has been loaded, <code>false</code> otherwise. */ fileLoaded: function(file) { - return Core.requiredFiles.include(file); + return $A(Core.requiredFiles).include(file); }, /** @@ -47,7 +47,7 @@ var Core = { * @return {string} The file name relative to the server root with the file extension. */ fileNameFor: function(file) { - return '/' + Core.loadPath + '/' + file + '.js'; + return Core.loadPath + '/' + file + '.js'; }, /** @@ -58,7 +58,7 @@ var Core = { * @param {string} file The file name relative to <code>loadPath</code>, without the extension. */ loadFile: function(file) { - // console.debug("Loading file " + file); + // alert("Loading file " + file); document.write('<scr' + 'ipt type="text/javascript" src="' + Core.fileNameFor(file) + '"></scr' + 'ipt>'); }, @@ -102,7 +102,7 @@ var Core = { * @param {boolean} blocking Load the file immediately. */ function require(file, blocking) { - Core.require(file, blocking); + Core.require(file, false); } RegExp.prototype.argumentNames = function() { return []; } src/core/core.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/core/environment.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/core/globalize.js @@ -3,9 +3,26 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ +var NullLogger = { + log: function(text) {} +} + +var ConsoleLogger = { + log: function(text) { + console.debug(text); + } +}; + +var DocumentLogger = { + log: function(text) { + var element = new Element('p').update(text); + $('logger').insert(element); + } +}; + /** * Namespace for logging functions. See the {@link Environment} namespace for log level * information. @@ -13,6 +30,9 @@ * @class */ var Logger = { + logger: window.console ? ConsoleLogger : + Environment.DebugLevel == 'info' ? DocumentLogger : NullLogger, + /** * Logs a message in the javascript console. If no javascript console is * available, nothing happens. @@ -20,9 +40,7 @@ var Logger = { * @param {string} text The message. */ log: function(text) { - try { - console.debug(text); - } catch(e) {} + Logger.logger.log(text); }, /** src/core/logger.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/core/page.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/core/profiler.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH Prototype Extensions are freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ String.prototype.format = function() { src/core/prototype_ext.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/core/singleton.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -13,13 +13,13 @@ * <p>To observe a TinyMCE field, create a new observer like so:</p> * * <pre> - * new TinyMCE.Observer(editor_id, frequency, callback) + * new TinyMCEObserver(editor_id, frequency, callback) * </pre> * * @class * @extends Abstract.TimedObserver */ -TinyMCE.Observer = Class.create(Abstract.TimedObserver, +TinyMCEObserver = Class.create(Abstract.TimedObserver, /** @scope TinyMCE.Observer.prototype */ { /** src/core/tiny_mce_observer.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -32,30 +32,36 @@ Object.extend(Widget, * <p>Instead of this method, you should probably call <code>CurrentPage.applyBehaviours</code>.</p> */ ApplyBehaviours: function(parent, behaviours) { - var objects = new Array(); - try { - $A($(parent || document.body).getElementsByTagName("*")).each(function(element) { - var names = element.className; - if (/thc2-/.match(names) > 0) { - var matching_classes = names.split(' ').select(function(c) { return new String(c).startsWith("thc2-"); }); - for (var i = 0; i <= matching_classes.length; i++) { - var className = matching_classes[i]; - var mapping = behaviours[className]; - if (mapping && CurrentPage.find(element, className).length == 0) { - try { - var obj = new mapping.klass(element); - obj.behaviour = className; - } catch(e) { - Logger.error("Could not create class " + className + ", error: " + e.message); - return; - } - objects.push(obj); + var objects = []; + var elements = $(parent || document.body).getElementsByTagName("*"); + for (var k = 0; k != elements.length; ++k) { + var element = elements[k]; + var names = element.className; + if (/thc2-/.match(names) > 0) { + var matching_classes = names.split(' ').select(function(c) { return c.startsWith("thc2-"); }); + for (var i = 0; i != matching_classes.length; i++) { + var className = matching_classes[i]; + var mapping = behaviours[className]; + if (mapping && CurrentPage.find(element, className).length == 0) { + try { + // Logger.info('' + Initializer.benchmark.lapTime() + ': Creating Behaviour of type ' + className); + var obj = new mapping.klass(element); + obj.behaviour = className; + } catch(e) { + Logger.error("Could not create class " + className + ", error: " + e.message); + return; } + objects.push(obj); } } - }); + } + } + try { return objects; - } catch(e) { + } finally { + if (Prototype.Browser.IE) { + objects = null; + } } } }); src/core/widget.js @@ -6,7 +6,7 @@ like. Feel free to modify this file. This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ var Initializer = { src/examples/init.js @@ -2,13 +2,13 @@ <%= include 'core/core.js', 'core/browser.js', 'core/environment.js', 'core/logger.js', 'core/globalize.js', 'core/benchmark.js', 'core/singleton.js', 'core/ajax_cache.js', 'core/page.js', 'core/widget.js', 'core/prototype_ext.js' %> -if (typeof TinyMCE != "undefined") { +if (typeof tinymce != "undefined") { <%= include 'core/tiny_mce_observer.js' %> } <%= include 'widgets/bubble.js', 'widgets/ajax_bubble.js', 'widgets/bookmark_widget.js', 'widgets/bubble_manager.js', 'widgets/bubble_trigger_widget.js', 'widgets/clickable_widget.js', 'widgets/code_input_widget.js', 'widgets/form_widget.js', 'widgets/limited_textarea_widget.js', 'widgets/mnemonic_form.js', 'widgets/placeholder_input_widget.js', 'widgets/popup_widget.js', 'widgets/rating_widget.js', 'widgets/remote_form.js', 'widgets/remote_link_widget.js', 'widgets/slideshow_widget.js', 'widgets/tab_widget.js', 'widgets/toggle_widget.js', 'widgets/check_list_widget.js', 'widgets/dropdown_menu_widget.js', 'widgets/photo_album_widget.js', 'widgets/zooming_teaser_widget.js', 'widgets/autocomplete_widget.js', 'widgets/combo_box_widget.js' %> -if (typeof TinyMCE != "undefined") { +if (typeof tinymce != "undefined") { <%= include 'widgets/tiny_mce_widget.js' %> <%= include 'widgets/editor_tab_widget.js' %> } src/thc2.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/ajax_bubble.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 Parts of this file are modified from an original version Copyright (c) 2007 stickmanlabs. See below for details. @@ -35,8 +35,8 @@ var AutocompleteWidget = Class.create(Widget, initialize: function(element) { Widget.prototype.initialize.apply(this, arguments); this.autocompleteBox = $('autocomplete'); - this.options = $('autocomplete-options').childElements().map(function(e){ return e.innerHTML; }) - this.completer = new Autocompleter.Local(this.element, this.autocompleteBox, this.options); + this.items = $('autocomplete-options').childElements().map(function(e){ return e.innerHTML; }) + this.completer = new Autocompleter.Local(this.element, this.autocompleteBox, this.items); } }); src/widgets/autocomplete_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/bookmark_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -47,7 +47,7 @@ var Bubble = Class.create( * Calculates the bubble's vertical position. */ verticalPosition: function(element_offset, bubble_size){ - this.element.style.top = (( element_offset[1] - bubble_size['height']) + "px"); + this.element.style.top = (( element_offset[1] - bubble_size['height'] + this.verticalOffset()) + "px"); }, /** @@ -64,7 +64,21 @@ var Bubble = Class.create( left = element_offset[0]-bubble_size['width']; break; }; - this.element.style.left = left + 'px'; + this.element.style.left = (left + this.horizontalOffset()) + 'px'; + }, + + /** + * Override this method to specify a vertical offset for the bubble size. + */ + verticalOffset: function() { + return 0; + }, + + /** + * Override this method to specify a horizontal offset for the bubble size. + */ + horizontalOffset: function() { + return 0; }, /** src/widgets/bubble.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/bubble_manager.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/bubble_trigger_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -31,9 +31,9 @@ var CheckListWidget = Class.create(Widget, */ initialize: function(element) { Widget.prototype.initialize.apply(this, arguments); - var selectAllElements = this.element.select('.select_all'); - var deselectAllElements = this.element.select('.deselect_all'); - var invertAllElements = this.element.select('.invert_all'); + var selectAllElements = this.element.getElementsByClassName('select_all'); + var deselectAllElements = this.element.getElementsByClassName('deselect_all'); + var invertAllElements = this.element.getElementsByClassName('invert_all'); selectAllElements.each(function(element) { Event.observe(element, 'click', this.selectAll.bindAsEventListener(this)); src/widgets/check_list_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/clickable_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/code_input_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/combo_box_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ var DropdownMenuWidget = Class.create(Widget, { src/widgets/dropdown_menu_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 TODO: ----- src/widgets/editor_tab_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -55,9 +55,9 @@ var FormWidget = Class.create(Widget, initialize: function(element) { Widget.prototype.initialize.apply(this, arguments); - this.validators = new Array(); + this.validators = []; this.form = this.element; - this.element.observe('submit', this.submit.bindAsEventListener(this)); + Event.observe(this.element, 'submit', this.submit.bindAsEventListener(this)); }, /** @@ -90,13 +90,29 @@ var FormWidget = Class.create(Widget, * Adds a validator to this form that checks if the specified field is non-empty. * If it is, the validation fails. * + * If your validate a radiogroup, the validator will check if at one of the radio buttons is selected. + * For radiogroups you have to use the name property as id, for the following example: + * + * <pre> + * <form class="thc2-form-validation-widget" action="/users" id="signup-form" method="post"> + * <input id="user_gender_male" name="user[gender]" type="radio" id="user_gender" value="1" /> male + * <input id="user_gender_female" name="user[gender]" type="radio" id="user_gender" value="0" /> female + * <input type="submit" value="submit" /> + * </pre> + * + * you should use this validator-code: + * + * <pre> + * this.validatesPresenceOf('user[gender]', 'Please chose your gender.'); + * </pre> * @param {String,HTMLElement} id The form element that needs to be validated. * @message {String} An error message that is shown on failure. */ validatesPresenceOf: function(id, message) { var field = $(id); this.validators.push(function() { - if (field && (field.value == "" || $F(id) == null)) { + if ((field && (field.value == "" || $F(id) == null)) + || (!field && ($$('input:checked[type="radio"][name="'+id+'"]') == 0))) { FormWidget.handleError(field, message); return false; } src/widgets/form_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 TODO: ----- src/widgets/limited_textarea_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -29,7 +29,7 @@ var MnemonicForm = Class.create(FormWidget, if (element.type != 'submit') this.inputs.push(element); if (element.type == 'text') - Event.observe(element, 'keyup', this.storeValues.bindAsEventListener(self)); + Event.observe(element, 'keyup', this.storeValues.bindAsEventListener(this)); }.bind(this)); this.values = new Hash(); this.storeValues(); src/widgets/mnemonic_form.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 TODO: ----- src/widgets/photo_album_widget.js @@ -9,11 +9,9 @@ /** * This widget displays a placeholder in a text input field that disappears on focus. * - * <p>The placeholder is the title of the text input field. If no title is set the value - * is used instead. If the field is empty on + * <p>The placeholder is the value of the text input field. If the field is empty on * blur, the placeholder appears again. Because of that, it is possible that the - * placeholder is sent along with the enclosing form on submit. This does not happen when - * using the title which is the recommended use.</p> + * placeholder is sent along with the enclosing form on submit.</p> * * <p>When the placeholder is displayed, the text field has the CSS class * <code>placeholder-input</code>. You can use this fact for shading the text field @@ -31,11 +29,11 @@ var PlaceholderInputWidget = Class.create(Widget, initialize: function(element) { Widget.prototype.initialize.apply(this, arguments); this.element.value = this.element.value || this.element.title; - this.placeholder = this.element.value; + this.placeholder = this.element.title || this.element.value; Event.observe(this.element, "focus", this.focus.bindAsEventListener(this)); Event.observe(this.element, "blur", this.blur.bindAsEventListener(this)); - Event.observe(this.element.up('form'), 'submit', this.submit.bindAsEventListener(this)); + Event.observe(this.findForm(this.element), 'submit', this.submit.bindAsEventListener(this)); if((this.element.title && this.element.title == this.element.value) || !this.element.title) { this.element.addClassName("placeholder-input"); @@ -71,7 +69,17 @@ var PlaceholderInputWidget = Class.create(Widget, if(this.element.value == this.placeholder) { this.element.value = ''; } + }, + + findForm: function(element) { + if (element.tagName.toUpperCase() == 'HTML') { + return undefined; + } else if (element.tagName.toUpperCase() == 'FORM') { + return element; + } else { + return this.findForm(element.parentNode); + } } }); -CurrentPage.registerBehaviour("thc2-placeholder-input", PlaceholderInputWidget); +CurrentPage.registerBehaviour("thc2-placeholder-input", PlaceholderInputWidget); \ No newline at end of file src/widgets/placeholder_input_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/popup_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 BUT this only applies to this file. You'll need to come up with your own star image. @@ -150,7 +150,7 @@ var RatingStar = Class.create( /** * Default star height. Adjust this property to use differently sized stars. */ - starheight: 20, + starheight: 14, /** * Constructor. src/widgets/rating_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/remote_form.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/remote_link_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** src/widgets/slideshow_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -18,7 +18,7 @@ * <pre> * <div> * <ul class="tab-list"> - * <li class="on" title="First tab"> + * <li class="select" title="First tab"> * <a href="/first/tab">First tab</a> * </li> * <li title="Second tab"> @@ -46,13 +46,18 @@ var TabWidget = Class.create(Widget, */ initialize: function(element) { Widget.prototype.initialize.apply(this, arguments); - var i = 0; + this.initTabs(); + }, + + /** + * Initializes the tabs. + * Call again if tab element reloaded/changed via AJAX. + */ + initTabs: function() { this.list = $A(this.element.getElementsByClassName('tab-list')[0].getElementsByTagName("li")); - var tabwidget = this; - this.tabs = this.list.collect(function(item) { var tab = new Tab(this, $(item)); - if (item.hasClassName('on')) + if (item.hasClassName(Tab.activeClassName)) this.currentTab = tab; return tab; }.bind(this)); @@ -120,6 +125,23 @@ var TabWidget = Class.create(Widget, }); /** +* FUCKO: Move effect to some better place. It's shit here +*/ +Effect.PhaseIn = function(element, options) { + return new Effect.Parallel([ + new Effect.Appear(element, { sync: true }), + new Effect.BlindDown(element, { sync: true, scaleFrom: 10}) + ], options); +} + +Effect.PhaseOut = function(element, options) { + return new Effect.Parallel([ + new Effect.BlindUp(element, { sync: true, scaleTo: 10}), + new Effect.Fade(element, { sync: true }) + ], options); +} + +/** * This class provides a tab widget that loads the content of tabs * on the fly via ajax. The contents of already visited tabs are * cached. Note that this class automatically applies behaviours @@ -133,6 +155,11 @@ var TabWidget = Class.create(Widget, var AjaxTabWidget = Class.create(TabWidget, /** @scope AjaxTabWidget.prototype */ { + initialize: function(element) { + TabWidget.prototype.initialize.apply(this, arguments); + AjaxCache.self().store(this.currentTab.link, this.tabContent().innerHTML); + }, + /** * Callback before the fade before a tab switch. */ @@ -183,7 +210,7 @@ var AjaxTabWidget = Class.create(TabWidget, this.beforeFade(); - this.fadeEffect = new Effect.Fade(this.tabContainer(), { + this.fadeEffect = new Effect.PhaseOut(this.tabContainer(), { queue: { position: 'end', scope:'a' }, afterFinish:this.fadeCallback.bind(this), duration: 0.5 @@ -219,7 +246,7 @@ var AjaxTabWidget = Class.create(TabWidget, this.contentBox.update(html); this.beforeAppear(); this.switchCurrent(this.currentTab, this.nextTab); - this.appearEffect = new Effect.Appear(this.tabContainer(), { + this.appearEffect = new Effect.PhaseIn(this.tabContainer(), { queue: { position: 'end', scope:'b' }, afterFinish:this.appearCallback.bind(this), duration: 0.5 @@ -281,13 +308,15 @@ var Tab = Class.create( * Sets the tab to "on" state. */ turnOn: function() { - this.button.addClassName('on'); + this.button.addClassName(Tab.activeClassName); }, /** * Sets the tab to "off" state. */ turnOff: function() { - this.button.removeClassName('on'); + this.button.removeClassName(Tab.activeClassName); } }); + +Tab.activeClassName = 'selected'; src/widgets/tab_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -16,13 +16,21 @@ var TinyMCEWidget = Class.create(Widget, /** @scope TinyMCEWidget.prototype */ { /** - * Constructor. + * Settings for TinyMCE, which will be applied on initialization + */ + settings: { relative_urls: false, + convert_urls: false + }, + + /** + * Constructor. Also applies settings to editor */ initialize: function(element) { Widget.prototype.initialize.apply(this, arguments); + tinyMCE.settings = this.settings; tinyMCE.execCommand('mceAddControl', true, this.element.id); }, - + /** * Returns the TinyMCE editor instance for this widget. * @return {TinyMCE} The editor instance. src/widgets/tiny_mce_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -43,6 +43,8 @@ var ToggleWidget = Class.create(Widget, init: false, defaultEffect: 'blind', defaultDuration: 0.5, + defaultOpenClass: 'open', + defaultClosedClass: 'closed', /** * Constructor. @@ -54,6 +56,8 @@ var ToggleWidget = Class.create(Widget, Widget.prototype.initialize.apply(this, arguments); this.effect = this.defaultEffect; this.duration = this.defaultDuration; + this.openClass = this.defaultOpenClass; + this.closedClass = this.defaultClosedClass; if (options && options['target']) { this.setLink(this.element); @@ -71,11 +75,26 @@ var ToggleWidget = Class.create(Widget, if (!this.init) { this.extractParameters(); } - Effect.toggle(this.target, this.effect, {duration: this.duration}); + Effect.toggle(this.target, this.effect, {duration: this.duration, afterFinish: this.toggleClassNames.bind(this)}); event.stop(); }, /** + * Toggle open and closed classes. + * If none of the class names is present to begin with, nothing will happen. + * Default classes are 'open' and 'closed'. + */ + toggleClassNames: function(){ + if(this.element.hasClassName(this.closedClass)){ + this.element.removeClassName(this.closedClass); + this.element.addClassName(this.openClass); + } else if(this.element.hasClassName(this.openClass)) { + this.element.removeClassName(this.openClass); + this.element.addClassName(this.closedClass); + } + }, + + /** * Sets the link to <code>link</code> and observes the click event. * If another link has been set before, the old click event handler * is removed. @@ -133,13 +152,20 @@ var ToggleWidget = Class.create(Widget, * in the options hash. */ extractTarget: function() { - var target = $w($(this.element).className).find(function(klass) { return klass.startsWith("toggle_"); }); + var classNames = $(this.element).className.split(' '); + for (var i = 0; i != classNames.length; ++i) { + if (classNames[i].startsWith("toggle_")) { + var target = classNames[i]; + break; + } + } + if (target) { this.setLink(this.element); this.target = $(target.gsub("toggle_", '')); } else { this.setLink(this.element.getElementsByTagName("a")[0]); - targetElement = this.element.getElementsBySelector("div")[0]; + var targetElement = this.element.getElementsByTagName("div")[0]; if (targetElement) { this.target = targetElement; } src/widgets/toggle_widget.js @@ -3,7 +3,7 @@ (c) 2007 imedo GmbH This file is freely distributable under the terms of an MIT-style license. - For details, see the imedo.de web site: http://www.imedo.de + For details, see the project home page: http://opensource.imedo.de/pages/show/thc2 */ /** @@ -45,15 +45,14 @@ var ZoomingTeaserWidget = Class.create(Widget, * @inner */ resetItems: function(item){ - var self = this; this.findChildren(item); this.items.each(function(subitem){ - self.findChildren(subitem); + this.findChildren(subitem); if(item != subitem){ subitem.over.hide(); subitem.out.show(); } - }); + }.bind(this)); item.out.hide(); item.over.show(); }, src/widgets/zooming_teaser_widget.js @@ -21,7 +21,7 @@ class Browser end def windows? - host.include?('mswin') + host.include?('mswin') || host.include?('cygwin') end def linux? @@ -35,19 +35,23 @@ class Browser end class FirefoxBrowser < Browser - def initialize(path=File.join(ENV['ProgramFiles'] || 'c:\Program Files', '\Mozilla Firefox\firefox.exe')) + def initialize(path=File.join(ENV['ProgramFiles'] || '/cygdrive/c/Programme', 'Mozilla Firefox/firefox.exe')) @path = path end def visit(url) system("open -a Firefox '#{url}'") if macos? - system("#{@path} #{url}") if windows? + system("'#{@path}' #{url}") if windows? system("firefox #{url}") if linux? end def to_s "Firefox" end + + def teardown + system('taskkill /f /im firefox.exe') if windows? + end end class SafariBrowser < Browser @@ -95,6 +99,10 @@ class IEBrowser < Browser def to_s "Internet Explorer" end + + def teardown + system('taskkill /f /im iexplore.exe') if windows? + end end class KonquerorBrowser < Browser @@ -136,7 +144,7 @@ class KonquerorBrowser < Browser end class OperaBrowser < Browser - def initialize(path='c:\Program Files\Opera\Opera.exe') + def initialize(path='/cygdrive/c/Programme/Opera/Opera.exe') @path = path end @@ -157,7 +165,7 @@ class OperaBrowser < Browser system("#{@path} #{url}") if windows? system("opera #{url}") if linux? end - + def to_s "Opera" end @@ -294,6 +302,8 @@ class JavaScriptTestTask < ::Rake::TaskLib trap("INT") { @server.shutdown } t = Thread.new { @server.start } + success = true + # run all combinations of browsers and tests @browsers.each do |browser| if browser.supported? @@ -312,6 +322,7 @@ class JavaScriptTestTask < ::Rake::TaskLib print "\nFinished in #{Time.now - t0} seconds." print test_suite_results + success &&= !test_suite_results.error? && !test_suite_results.failure? browser.teardown else puts "\nSkipping #{browser}, not supported on this OS." @@ -320,6 +331,8 @@ class JavaScriptTestTask < ::Rake::TaskLib @server.shutdown t.join + + raise "failed" unless success end end test/lib/jstest.rb @@ -2,7 +2,7 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> - <title>THC2 Unit test file | <%= @title %></title> + <title><%= @title %> | THC2 Unit test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" charset="utf-8"> var eventResults = {}; @@ -31,6 +31,8 @@ <h1>THC2 Unit test file</h1> <h2><%= @title %></h2> +<p><a href="file://<%= File.expand_path("#{Dir.pwd}/test/unit/tmp/#{@js_filename.sub(/\.js/, '.html')}") %>" id="reload-link">Reload locally</a></p> +   test/lib/template.erb @@ -52,4 +52,13 @@ This is a toggle box where toggle link and toggle target are connected in Javascript. </p> </li> +<li> + <p>Link and Target specified in Javascript code with toggle class</p> + + <a href="#" id="toggle_with_js_target_and_toggle_class" class="open">Toggle me (specified in JS)</a> + + <p id="target_js_toggle_class" style="display:none; border: 1px solid #000;"> + This is a toggle box where toggle link and toggle target are connected in Javascript. + </p> +</li> </ul> test/unit/fixtures/toggle_widget.html @@ -19,20 +19,20 @@ new Test.Unit.Runner({ var w = new RemoteLinkWidget($('remote_link')); Event.simulateMouse(w.element, 'click'); - }}, - - testCallbacks: function() { with(this) { - var w = new RemoteLinkWidget($('remote_link')); - var numCalled = 0; - var callbacks = ['loading', 'loaded', 'interactive', 'success', 'failure', 'complete']; - callbacks.each(function(callback) { - mockup(w, callback, function() { - numCalled++; - }.bind(this)); - }.bind(this)); - Event.simulateMouse(w.element, 'click'); - this.wait(1000, function() { - this.assertEqual(callbacks.length, numCalled); - }.bind(this)); - }} -}); + }}// , + // + // testCallbacks: function() { with(this) { + // var w = new RemoteLinkWidget($('remote_link')); + // var numCalled = 0; + // var callbacks = ['loading', 'loaded', 'interactive', 'success', 'failure', 'complete']; + // callbacks.each(function(callback) { + // mockup(w, callback, function() { + // numCalled++; + // }.bind(this)); + // }.bind(this)); + // Event.simulateMouse(w.element, 'click'); + // this.wait(1000, function() { + // this.assertEqual(callbacks.length, numCalled); + // }.bind(this)); + // }} + }); test/unit/remote_link_widget_test.js @@ -4,7 +4,8 @@ new Test.Unit.Runner({ teardown: function() { ['auto-toggler', 'toggle_with_explicit_target', 'toggle_with_js_target', - 'auto-toggler-effect', 'toggle_with_explicit_target_and_effect', 'toggle_with_js_target_and_effect'].each(function(w) { + 'auto-toggler-effect', 'toggle_with_explicit_target_and_effect', 'toggle_with_js_target_and_effect', + 'toggle_with_js_target_and_toggle_class'].each(function(w) { Event.stopObserving(w, 'click'); }); }, @@ -111,5 +112,17 @@ new Test.Unit.Runner({ var w = new ToggleWidget($('toggle_with_auto_target')); w.extractParameters(); assertEqual(w.defaultEffect, w.effect); + }}, + + testToggleClassesWhenClassOpenGiven: function(){ with(this) { + // this does not work right now, because the change of the class name + // is the transition effect's after hook, which happens asynchronously + + // var w = new ToggleWidget($('toggle_with_js_target_and_toggle_class'), { target: 'target_js_toggle_class' }); + // assert(w.element.hasClassName('open')); + // Event.simulateMouse(w.link, 'click'); + // assert(w.element.hasClassName('closed')); + // Event.simulateMouse(w.link, 'click'); + // assert(w.element.hasClassName('open')); }} }); test/unit/toggle_widget_test.js examples/placeholder_widget.html 1f0bc09c9a4dd96c9c60b521b9a84d72932d0bbf 8b366845f3e2afb8b8f7285022dabe1183b924df Thomas Kadauke tkadauke@imedo.de http://github.com/imedo/thc2/commit/3e8fe9912e539b54d1044294a54601789cf21395 3e8fe9912e539b54d1044294a54601789cf21395

2009-04-30T19:07:53-07:00

2009-04-30T19:05:49-07:00

merge with main repository 9b585dd0f40dfab3969e168f3dec7e8c969f3fc2 Thomas Kadauke tkadauke@imedo.de