t#32154:hide invalid element

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 4099805..c5466fe 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -31,34 +31,63 @@ $ ->
         trace = editor.element_tag_id($(@)) \r
         if rule\r
           rules[name] = rule\r
+          $(@).focusout ->\r
+            if editor.is_panel(form)\r
+              validate_panel(form)\r
+            else\r
+              validate_element(form)\r
     if Object.keys(rules).length > 0\r
       v = form.validate({ignore:[],rules: rules})\r
-\r
+  \r
+  validate_panel = (form) ->\r
+    valid = form.valid()\r
+    bc = if valid\r
+      ''\r
+    else\r
+      '#ef29ef'\r
+    $('a', $('#tabs-1-tab')).map ->\r
+      $(@).css('background-color', bc)\r
+    valid\r
+  \r
+  display_element = (element, vis) ->\r
+    v = if vis\r
+      ''\r
+    else\r
+      'none'\r
+    trace = editor.element_tag_id(element)\r
+    switch element.attr('element_type')\r
+      when 'panel_picture'\r
+        trace = trace + 'div'\r
+    $(trace).css('display', v)\r
+  \r
+  validate_element = (form) ->\r
+    valid = form.valid()\r
+    bc = if valid\r
+      ''\r
+    else\r
+      '#ef29ef'\r
+    display_element(form, valid)\r
+    trace = editor.element_tag_id(form) \r
+    $('.elements-tab', $(trace + 'element_tab')).map  ->\r
+      $(@).css('background-color', bc)\r
+    valid\r
+  \r
   validate_forms = () ->\r
     valid = true\r
     $('form', $('#tabs-1')).map  ->\r
       form_name = $(@).attr('data-form-name')\r
       if form_name\r
-        if $(@).valid()\r
-          bc = ''\r
+        if validate_panel($(@))\r
         else\r
           valid = false\r
-          bc = '#ef29ef'\r
-        $('a', $('#tabs-1-tab')).map ->\r
-          $(@).css('background-color', bc)\r
     invalid_elements = []\r
     $('form', $('#tabs-2')).map  ->\r
       form_name = $(@).attr('data-form-name')\r
       if form_name\r
-        if $(@).valid()\r
-          bc = ''\r
+        if validate_element($(@))\r
         else\r
           valid = false\r
-          bc = '#ef29ef'\r
           invalid_elements.push form_name\r
-        trace = editor.element_tag_id($(@)) \r
-        $('.elements-tab', $(trace + 'element_tab')).map  ->\r
-          $(@).css('background-color', bc)\r
     if invalid_elements.length > 0\r
       bc = '#ef29ef'\r
     else\r
@@ -131,11 +160,7 @@ $ ->
           $(trace + 'tab_panel').css('display', 'none')\r
           $(trace + 'zsort').css('display', 'none')\r
           $(trace + 'tsort').css('display', 'none')\r
-          switch $(@).attr('element_type')\r
-            when 'panel_picture'\r
-              trace = trace + 'div'\r
-          $(trace).css('display', 'none')\r
-          \r
+          display_element($(@), false)\r
     \r
     $('#pettanr-panel-submit').focusin ->\r
       editor.refresh_attribute($('#pettanr-panel-json'))\r

diff --git a/app/assets/javascripts/pettanr_editor.js.coffee b/app/assets/javascripts/pettanr_editor.js.coffee
index 24aef1f..35d1ecd 100644 (file)
--- a/app/assets/javascripts/pettanr_editor.js.coffee
+++ b/app/assets/javascripts/pettanr_editor.js.coffee
@@ -39,6 +39,11 @@ class PettanrEditor
           return true\r
       else\r
         return false\r
+  @is_panel = (o) ->\r
+    if PettanrEditor.is_element(o)\r
+      return false\r
+    else\r
+      return true\r
   @is_element = (o) ->\r
     if o.attr('element_type')\r
       return true\r

diff --git a/app/assets/stylesheets/test.css.scss b/app/assets/stylesheets/test.css.scss
index b3a7462..2c3f8ef 100644 (file)
--- a/app/assets/stylesheets/test.css.scss
+++ b/app/assets/stylesheets/test.css.scss
@@ -16,6 +16,21 @@ div.md5 {
   text-align: left;
 }
 
+input.error {
+  border-width: 3px;
+  border-style:  solid;
+  border-color:   #ef29ef;
+}
+textarea.error {
+  border-style:  solid;
+  border-color:   #111;
+}
+select.error {
+  border-style:  solid;
+  border-color:   #111;
+}
+
+
 .pettanr-comic-wrapper {
   margin:  1em auto;
 }