Permalink
Browse files

All features work in HTML5-enabled browsers

  • Loading branch information...
elivz committed Apr 29, 2012
1 parent 20d4f7d commit 869b98b90d54714a24c17ee2ab68d348478d8c3a
View
@@ -0,0 +1 @@
+.DS_Store
@@ -40,9 +40,12 @@ private function _include_jscss()
{
if (!$this->cache['jscss'])
{
- $this->EE->cp->add_to_head('<style type="text/javascript">
- .vz_regulator_field {}
- .vz_regulator_field:invalid, .vz_regulator_field_invalid {}
+ $this->EE->cp->add_to_head('<style type="text/css">
+ .vz_regulator_container { position: relative; }
+ .vz_regulator_field:invalid, .vz_regulator_field:focus:invalid, .vz_regulator_field_invalid { color: #c11; border-color: #a66;}
+ .vz_regulator_hint { opacity: 0; position: absolute; left: 10px; top: 90%; max-width: 90%; padding: 4px 8px; color: #E1E8ED; font-size: 11px; background: #3E4C54; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1); box-shadow: 0 1px 5px rgba(0,0,0,0.1); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
+ .vz_regulator_field:invalid + .vz_regulator_hint, .vz_regulator_field.invalid + .vz_regulator_hint { opacity: 1; top: 110%; }
+ .vz_regulator_hint:before { content: ""; position: absolute; left: 10px; top: -6px; width: 0; height: 0; border: 6px solid transparent; border-top: 0; border-bottom: 6px solid #3E4C54; }
</style>');
$this->EE->cp->load_package_js('vz_regulator');
@@ -55,18 +58,33 @@ private function _include_jscss()
/**
* Settings UI
*/
- private function _settings_ui($settings)
+ private function _settings_ui($settings, $is_cell=FALSE)
{
$this->EE->lang->loadfile('vz_regulator');
$pattern = isset($settings['vz_regulator_pattern']) ? $settings['vz_regulator_pattern'] : '';
+ $hint = isset($settings['vz_regulator_hint']) ? $settings['vz_regulator_hint'] : '';
$settings_ui = array(
- lang('vz_regulator_pattern_label', 'vz_regulator_pattern'),
- form_input(array(
- 'name' => 'vz_regulator_pattern',
- 'value' => $pattern,
- ))
+ array(
+ '<strong>' . lang('pattern_label') .'</strong>'.
+ ($is_cell ? '' : '<br/>' . lang('pattern_sublabel')),
+ form_input(array(
+ 'name' => 'vz_regulator_pattern',
+ 'value' => $pattern,
+ 'class' => 'matrix-textarea',
+ ))
+ ),
+ array(
+ '<strong>' . lang('hint_label') .'</strong>'.
+ ($is_cell ? '' : '<br/>' . lang('hint_sublabel')),
+ form_input(array(
+ 'name' => 'vz_regulator_hint',
+ 'value' => $hint,
+ 'class' => 'matrix-textarea',
+ ))
+
+ )
);
return $settings_ui;
@@ -79,37 +97,29 @@ function display_settings($settings)
{
$this->EE->load->library('table');
- $settings_ui = $this->_settings_ui($settings);
- $this->EE->table->add_row($settings_ui);
+ foreach ($this->_settings_ui($settings) as $row)
+ {
+ $this->EE->table->add_row($row);
+ }
}
/**
* Display Cell Settings
*/
function display_cell_settings($settings)
{
- $this->EE->lang->loadfile('vz_regulator');
-
- $pattern = isset($settings['vz_regulator_pattern']) ? $settings['vz_regulator_pattern'] : '';
-
- $settings_ui = array(
- lang('vz_regulator_pattern_cell_label', 'vz_regulator_pattern'),
- form_input(array(
- 'name' => 'vz_regulator_pattern',
- 'value' => $pattern,
- 'class' => 'matrix-textarea',
- ))
- );
-
- return array($settings_ui);
+ return $this->_settings_ui($settings, TRUE);
}
/**
* Save Field Settings
*/
function save_settings()
{
- return array('vz_regulator_pattern' => $this->EE->input->post('vz_regulator_pattern'));
+ return array(
+ 'vz_regulator_pattern' => $this->EE->input->post('vz_regulator_pattern'),
+ 'vz_regulator_hint' => $this->EE->input->post('vz_regulator_hint'),
+ );
}
// --------------------------------------------------------------------
@@ -124,13 +134,20 @@ function display_field($data, $name=FALSE)
$name = $name ? $name : $this->field_name;
$pattern = isset($this->settings['vz_regulator_pattern']) ? $this->settings['vz_regulator_pattern'] : '';
+ $hint = isset($this->settings['vz_regulator_hint']) ? $this->settings['vz_regulator_hint'] : '';
- return form_input(array(
+ $output = '<div class="vz_regulator_container">';
+ $output .= form_input(array(
'name' => $name,
'value' => $data,
- 'class' => 'vz_regulator_field',
- 'pattern' => $pattern
+ 'class' => 'vz_regulator_field matrix-textarea',
+ 'pattern' => $pattern,
+ 'title' => $hint,
));
+ $output .= $hint ? '<div class="vz_regulator_hint">' . $hint . '</div>' : '';
+ $output .= '</div>';
+
+ return $output;
}
/**
@@ -9,83 +9,54 @@
* Start the script
*/
init: function() {
- $('body').delegate('.vz_regulator_input', {
- 'keyup': vz_regulator.event_handlers.keyup
- });
+ $('#publishForm').delegate('.vz_regulator_field', 'keyup', vz_regulator.check_validity);
},
/*
* Test for native browser support of the pattern attribute
*/
- is_natively_supported : function() {
+ not_natively_supported : (function() {
var input_element = document.createElement('input');
- return !!('pattern' in input_element);
- },
-
- event_handlers : {
-
- /*
- * Check the validity of the input after every keystroke
- */
- keyup : function() {
+ return !('pattern' in input_element);
+ })(),
+ /*
+ * Check the validity of the input after every keystroke
+ */
+ check_validity : function() {
+ var $this = $(this),
+ is_invalid = false;
+
+ // Fake support, if necessary
+ if (vz_regulator.not_natively_supported) {
+ // Test against the regular expression
+ var pattern = new RegExp($this.attr('pattern', 'g'));
+ is_invalid = !pattern.test($this.val());
+
+ // Set a class so we can style the input
+ $this.toggleClass('invalid', is_invalid);
+ } else {
+ // Just use the invalidity status from the browser
+ is_invalid = $this.is(':invalid');
}
+ // Update the error message
+ vz_regulator.set_hint_visibility.apply(this, [is_invalid]);
},
- check_pattern : function() {
- if (!this.element.attr('pattern')) {
- return true;
- }
- if (this.element.attr('title')) {
- this.validationMessage.patternMismatch = this.element.attr('title');
- }
- var pattern = new RegExp(this.element.attr('pattern'), 'g');
- this.validity.patternMismatch = pattern.test(this.element.val());
- },
+ set_hint_visibility : function(is_invalid) {
+ var $this = $(this),
+ $hint = $this.next();
- updateStatus: function() {
- this.element.removeClass('valid').removeClass('invalid');
- this.element.addClass(this.isValid() ? 'valid' : 'invalid');
- },
- showTooltip : function(error) {
- if (!error) {
- error = this.getValidationMessage(this);
- }
- $.setCustomValidityCallback.apply(this.element, [error]);
+ if (is_invalid) {
+ $hint.fadeIn(200);
+ } else {
+ $hint.fadeOut(100);
+ }
}
};
- /**
- * Renders tooltip when validation error happens on form submition
- * Can be overriden
- */
- $.setCustomValidityCallback = function(error) {
- var pos = this.position(),
- tooltip = $('<div class="tooltip tooltip-e">'
- + '<div class="tooltip-arrow tooltip-arrow-e"></div>'
- + '<div class="tooltip-inner">' + error + '</div>'
- + '</div>').appendTo(this.parent());
- tooltip.css('top', pos.top - (tooltip.height() / 2) + 20 );
- tooltip.css('left', pos.left - tooltip.width() - 12);
- window.setTimeout(function(){
- tooltip.remove();
- }, 2500);
- }
- /**
- * Shim for setCustomValidity DOM element method
- */
- $.fn.setCustomValidity = function(error) {
- this.each(function() {
- if (typeof $(this).get(0).setCustomValidity === 'function') {
- $(this).get(0).setCustomValidity(error);
- }
- $(this).data('customvalidity', error);
- });
- }
-
// Document is ready
- $(document).bind('ready', vz_regulator.init);
-
+ //$(document).bind('ready', vz_regulator.init);
-})( jQuery );
+})(jQuery);
@@ -4,8 +4,12 @@
// Field Settings
-'vz_regulator_pattern_label' => 'Regular expression to validate against',
-'vz_regulator_pattern_cell_label' => 'Regex',
+'pattern_label' => 'Regular expression',
+'pattern_sublabel' => 'No flags or delimiters. You can see some examples at <a href="http://html5pattern.com/" target="_blank">HTML5Pattern</a>.',
+'pattern_cell_label' => 'Regex',
+
+'hint_label' => 'Error message',
+'hint_sublabel' => 'A short description of what should be entered in the field, which will be displayed when the validation fails.',
''=>''
);

0 comments on commit 869b98b

Please sign in to comment.