From 49adbfcdb22fdd4da97f0d3a904b1b2e8f732e64 Mon Sep 17 00:00:00 2001 From: Zordius Chen Date: Mon, 7 May 2012 13:55:25 +0800 Subject: [PATCH] add new module, init version. (some copy from zui-placeholder, need to be changed) --- src/gallery-zui-charcount-plugin/README.md | 74 +++++++++++++++++++ .../gallery-zui-charcount-plugin-core.css | 3 + .../build.properties | 29 ++++++++ src/gallery-zui-charcount-plugin/build.xml | 7 ++ .../js/zui-charcount-plugin.js | 55 ++++++++++++++ .../tests/test.html | 34 +++++++++ src/gallery-zui-charcount-plugin/yuidoc.json | 13 ++++ 7 files changed, 215 insertions(+) create mode 100644 src/gallery-zui-charcount-plugin/README.md create mode 100644 src/gallery-zui-charcount-plugin/assets/gallery-zui-charcount-plugin-core.css create mode 100644 src/gallery-zui-charcount-plugin/build.properties create mode 100644 src/gallery-zui-charcount-plugin/build.xml create mode 100644 src/gallery-zui-charcount-plugin/js/zui-charcount-plugin.js create mode 100644 src/gallery-zui-charcount-plugin/tests/test.html create mode 100644 src/gallery-zui-charcount-plugin/yuidoc.json diff --git a/src/gallery-zui-charcount-plugin/README.md b/src/gallery-zui-charcount-plugin/README.md new file mode 100644 index 0000000000..9dac07783e --- /dev/null +++ b/src/gallery-zui-charcount-plugin/README.md @@ -0,0 +1,74 @@ +ZUI character counter +===================== + +Summary +------- + +ZUI chcarcter counter is a plugin to calculate character size, and feedback when user exceeds max/min limitation. + +Description +----------- + +Simplest way to enable placeholder support in IE: Y.zui.placeholder.install(). + +You do not need to provide more congifuration to ZUI placeholder, just use +standard html5 placeholder attribute. ZUI placeholder will scan for this +attribute then change classname and value when focus status changed. + +When user using browser which supports placeholder natively, ZUI placeholder +just skip installation when utilities called. You do not need to care about +user browser versions, and no any event handling cost in this case. + +Note +---- + +* 2nd installDelegate() on the same node will not be executed, even + when you changed the css selector. + +Known Issue +----------- + +* If user input a value same with placeholder exactly, the value will be + cleaned when this input is blured. + +* If the form submit triggered and zui placeholder is not uninstalled, + inputs with empty value will send values to server as placeholder. + +Code Sample +----------- + + + // You may need to include css file + // + // or define your own style on 'input.zui-phblur, textarea.zui-phblur' + + // use html5 placeholder attribute in input or textarea + // + + // Install placeholder for all input and textarea exist in this page + Y.zui.placeholder.install(); + + // Install placeholder for some elements by css selector + Y.zui.placeholder.install('div.required input'); + + // hanlde dynamic generated inputs before insert into document + Y.zui.placeholder.install(new_div.all('input, textarea')); + someplace.append(new_div); + + // uninstall placeholder before user submit the form + form.on('submit', function (E) { + Y.zui.placeholder.uninstall(form.all('input, textarea')); + }); + + // Install with delegate version event handler + // require node-event-delegate + Y.zui.placeholder.installDelegate(); + + // Same with previous + Y.zui.placeholder.installDelegate('body', 'input, textarea'); + + // handle a dynamic generated node before insert into document + Y.zui.placeholder.installDelegate(new_div); + + // Same with previous + Y.zui.placeholder.installDelegate(new_div, 'input, textarea'); diff --git a/src/gallery-zui-charcount-plugin/assets/gallery-zui-charcount-plugin-core.css b/src/gallery-zui-charcount-plugin/assets/gallery-zui-charcount-plugin-core.css new file mode 100644 index 0000000000..d3f56a7708 --- /dev/null +++ b/src/gallery-zui-charcount-plugin/assets/gallery-zui-charcount-plugin-core.css @@ -0,0 +1,3 @@ +input.zui-phblur, textarea.zui-phblur { + color:#888; +} diff --git a/src/gallery-zui-charcount-plugin/build.properties b/src/gallery-zui-charcount-plugin/build.properties new file mode 100644 index 0000000000..9bcee97b77 --- /dev/null +++ b/src/gallery-zui-charcount-plugin/build.properties @@ -0,0 +1,29 @@ +# ZUI Character Counter Build Properties + +# As long as the 'builder' project is cloned to the default folder +# next to the 'yui3-gallery' project folder, the 'builddir' property does not +# need to be changed +# +# If the 'builder' project is checked out to an alternate location, this +# property should be updated to point to the checkout location. +builddir=../../../builder/componentbuild + +# The name of the component. E.g. event, attribute, widget +component=gallery-zui-charcount-plugin + +# The list of files which should be concatenated to create the component +# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead. +# component.jsfiles=my.custom.module.js, my.custom.moduleHelperClass.js, my.custom.moduleSubComponentClass.js +component.jsfiles=zui-charcount-plugin.js + +# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3. +component.requires=plugin, event-valuechange + +# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3. +component.supersedes= + +# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3. +component.optional= + +# If your module has a skin file, set this flag to "true" +component.skinnable=false diff --git a/src/gallery-zui-charcount-plugin/build.xml b/src/gallery-zui-charcount-plugin/build.xml new file mode 100644 index 0000000000..29b8cdad73 --- /dev/null +++ b/src/gallery-zui-charcount-plugin/build.xml @@ -0,0 +1,7 @@ + + + + ZUI Character Counter Build File + + + diff --git a/src/gallery-zui-charcount-plugin/js/zui-charcount-plugin.js b/src/gallery-zui-charcount-plugin/js/zui-charcount-plugin.js new file mode 100644 index 0000000000..2fa9d4e517 --- /dev/null +++ b/src/gallery-zui-charcount-plugin/js/zui-charcount-plugin.js @@ -0,0 +1,55 @@ + var WordCountPlugin = function (config) { + WordCountPlugin.superclass.constructor.apply(this, arguments); + } + + WordCountPlugin.NAME = 'plugWordCount'; + WordCountPlugin.NS = 'wordcount'; + WordCountPlugin.ATTRS = { + nodeCount: { + writeOnce: true, + setter: Y.one + }, + txtMax: { + value: 'overflow' + }, + txtMin: { + value: 'underflow' + }, + lenMax: { + value: 4000 + }, + lenMin: { + value: 1 + }, + nodeFlag: { + setter: Y.one + }, + txtStatus: { + } + }; + + Y.namespace('Plugin').WordCount = Y.extend(WordCountPlugin, Y.Plugin.Base, { + initializer: function (config) { + this.handleValueChange(); + this.afterHostEvent('valueChange', this.handleValueChange); + }, + handleValueChange: function (E) { + var len = this.get('host').get('value').length, + min = this.get('lenMin'), + rest = this.get('lenMax') - len, + nodeCount = this.get('nodeCount'); + + if (rest < 0) { + this.set('txtStatus', 'underflow'); + } else { + if (len < min) { + this.set('txtStatus', 'overflow'); + } + } + + nodeCount.setContent(rest); + nodeCount.toggleClass(this.get('txtMax'), rest < 0); + nodeCount.toggleClass(this.get('txtMin'), len < min); + } + }); + diff --git a/src/gallery-zui-charcount-plugin/tests/test.html b/src/gallery-zui-charcount-plugin/tests/test.html new file mode 100644 index 0000000000..df01519e8a --- /dev/null +++ b/src/gallery-zui-charcount-plugin/tests/test.html @@ -0,0 +1,34 @@ + + + + Test ZUI Character Counter + + +
+ + +
+ + + + + diff --git a/src/gallery-zui-charcount-plugin/yuidoc.json b/src/gallery-zui-charcount-plugin/yuidoc.json new file mode 100644 index 0000000000..f2d54790c2 --- /dev/null +++ b/src/gallery-zui-charcount-plugin/yuidoc.json @@ -0,0 +1,13 @@ +{ + "name": "ZUI character counter", + "description": "ZUI chcarcter counter is a plugin to calculate character size, and feedback when user exceeds max/min limitation.", + "version": "0.0.1", + "url": "https://github.com/zordius/yui3-gallery/tree/master/src/gallery-zui-charcount-plugin", + "options": { + "linkNatives": "true", + "attributesEmit": "true", + "selleck": "true", + "paths": ["./js"], + "outdir": "./api" + } +}