Check to see if visibility elements should be re-initialized.

Author: adamghill

django_unicorn/static/unicorn/js/messageSender.js

@@ -223,8 +223,21 @@ export function send(component, callback) {
       // Reset all event listeners
       component.refreshEventListeners();
 
-      // Check for visibility elements
-      component.initVisibility();
+      // Check for visibility elements if the last return value from the method wasn't false
+      let reInitVisbility = true;
+
+      component.visibilityEls.forEach((el) => {
+        if (
+          el.visibility.method === component.return.method &&
+          component.return.value === false
+        ) {
+          reInitVisbility = false;
+        }
+      });
+
+      if (reInitVisbility) {
+        component.initVisibility();
+      }
 
       // Re-add unicorn validation messages from errors
       component.modelEls.forEach((element) => {

example/unicorn/components/js.py

@@ -32,6 +32,9 @@ def select_state(self, val, idx):
         self.selected_state = val
 
     def increase_counter(self):
+        if self.scroll_counter >= 2:
+            return False
+
         self.scroll_counter += 1
 
     class Meta:

example/unicorn/templates/unicorn/js.html

@@ -19,21 +19,27 @@
     }());
   </script>
 
-  <h2>
-    <button unicorn:click="call_javascript">Component view calls JavaScript</button>
-    <button unicorn:click="call_javascript_module">Component view calls JavaScript module</button>
-  </h2>
+  <h3>Visibility</h3>
+  <div unicorn:key="visibility">
+    <span unicorn:visible.threshold-25.debounce-1000="increase_counter" unicorn:partial="visibility">
+      Number of times this span was scrolled into view: {{ scroll_counter }}
+    </span>
+  </div>
+
+  <h3>Call JavaScript</h3>
+  <button unicorn:click="call_javascript">Component view calls JavaScript</button>
+  <button unicorn:click="call_javascript_module">Component view calls JavaScript module</button>
 
   <div>
-    <h2>
+    <h3>
       <code>javascript_exclude states</code>
-    </h2>
+    </h3>
     {% for state in states %}
     {{ state }}
     {% endfor %}
   </div>
 
-  <h2>Select2</h2>
+  <h3>Select2</h3>
 
   <div u:ignore>
     <select unicorn:model="selected_state" class="form-control" id="select2-example" required
@@ -66,10 +72,4 @@ <h2>Select2</h2>
       select2_datetime: {{ select2_datetime }}
     </div>
   </div>
-
-  <div unicorn:key="visibility">
-    <span unicorn:visible.threshold-25.debounce-1000="increase_counter" unicorn:partial="visibility">
-      Number of times this span was scrolled into view: {{ scroll_counter }}
-    </span>
-  </div>
 </div>