Open Source Monorail

appengine/monorail/static/js/framework/framework-display.js

Index: appengine/monorail/static/js/framework/framework-display.js
diff --git a/appengine/monorail/static/js/framework/framework-display.js b/appengine/monorail/static/js/framework/framework-display.js
new file mode 100644
index 0000000000000000000000000000000000000000..9ed9c55ab1c0f7d36a0965c56d9ccecf89f4b44e
--- /dev/null
+++ b/appengine/monorail/static/js/framework/framework-display.js
@@ -0,0 +1,139 @@
+/* Copyright 2016 The Chromium Authors. All Rights Reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file or at
+ * https://developers.google.com/open-source/licenses/bsd
+ */
+
+/**
+ * Functions used by the Project Hosting to control the display of
+ * elements on the page, rollovers, and popup menus.
+ *
+ * Most of these functions are extracted from dit-display.js
+ */
+
+
+/**
+ * Hide the HTML element with the given ID.
+ * @param {string} id The HTML element ID.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_hideID(id) {
+  $(id).style.display = 'none';
+  return false;
+}
+
+
+/**
+ * Show the HTML element with the given ID.
+ * @param {string} id The HTML element ID.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_showID(id) {
+  $(id).style.display = '';
+  return false;
+}
+
+
+/**
+ * Hide the given HTML element.
+ * @param {Element} el The HTML element.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_hideEl(el) {
+  el.style.display = 'none';
+  return false;
+}
+
+
+/**
+ * Show the given HTML element.
+ * @param {Element} el The HTML element.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_showEl(el) {
+    el.style.display = '';
+  return false;
+}
+
+
+/**
+ * Show one element instead of another.  That is to say, show a new element and
+ * hide an old one.  Usually the element is the element that the user clicked
+ * on with the intention of "expanding it" to access the new element.
+ * @param {string} newID The ID of the HTML element to show.
+ * @param {Element} oldEl The HTML element to hide.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_showInstead(newID, oldEl) {
+  $(newID).style.display = '';
+  oldEl.style.display = 'none';
+  return false;
+}
+
+/**
+ * Toggle the open/closed state of a section of the page.  As a result, CSS
+ * rules will make certain elements displayed and other elements hidden.  The
+ * section is some HTML element that encloses the element that the user clicked
+ * on.
+ * @param {Element} el The element that the user clicked on.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_toggleHidden(el) {
+  while (el) {
+    if (el.classList.contains('closed')) {
+      el.classList.remove('closed');
+      el.classList.add('opened');
+      return false;
+    }
+    if (el.classList.contains('opened')) {
+      el.classList.remove('opened');
+      el.classList.add('closed');
+      return false;
+    }
+    el = el.parentNode;
+  }
+}
+
+
+/**
+ * Toggle the expand/collapse state of a section of the page.  As a result, CSS
+ * rules will make certain elements displayed and other elements hidden.  The
+ * section is some HTML element that encloses the element that the user clicked
+ * on.
+ * TODO(jrobbins): eliminate redundancy with function above.
+ * @param {Element} el The element that the user clicked on.
+ * @return {boolean} Always returns false to cancel the browser event
+ *     if used as an event handler.
+ */
+function CS_toggleCollapse(el) {
+  while (el) {
+    if (el.classList.contains('collapse')) {
+      el.classList.remove('collapse');
+      el.classList.add('expand');
+      return false;
+    }
+    if (el.classList.contains('expand')) {
+      el.classList.remove('expand');
+      el.classList.add('collapse');
+      return false;
+    }
+    el = el.parentNode;
+  }
+}
+
+
+// Exports
+_hideID = CS_hideID;
+_showID = CS_showID;
+_hideEl = CS_hideEl;
+_showEl = CS_showEl;
+_showInstead = CS_showInstead;
+_toggleHidden = CS_toggleHidden;
+_toggleCollapse = CS_toggleCollapse;