Merge pull request #8701 from owncloud/slide-up-toggle

Create reusable data attribute for apps setting slideup

1 files changed, 76 insertions, 0 deletions

diff --git a/core/js/apps.js b/core/js/apps.js
new file mode 100644
index 00000000000..5f221bb9826
--- /dev/null
+++ b/core/js/apps.js
@@ -0,0 +1,76 @@
+/**
+ * ownCloud - core
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright Bernhard Posselt 2014
+ */
+
+(function (document, $, exports) {
+
+    'use strict';
+
+    var dynamicSlideToggleEnabled = false;
+
+    exports.Apps = {
+        enableDynamicSlideToggle: function () {
+            dynamicSlideToggleEnabled = true;
+        }
+    };
+
+    /**
+     * Provides a way to slide down a target area through a button and slide it
+     * up if the user clicks somewhere else. Used for the news app settings and
+     * add new field.
+     *
+     * Usage:
+     * <button data-apps-slide-toggle=".slide-area">slide</button>
+     * <div class=".slide-area" class="hidden">I'm sliding up</div>
+     */
+    var registerAppsSlideToggle = function () {
+        var buttons = $('[data-apps-slide-toggle]');
+
+        $(document).click(function (event) {
+
+            if (dynamicSlideToggleEnabled) {
+                buttons = $('[data-apps-slide-toggle]');
+            }
+
+            buttons.each(function (index, button) {
+
+                var areaSelector = $(button).data('apps-slide-toggle');
+                var area = $(areaSelector);
+
+                // do nothing if the area is animated
+                if (!area.is(':animated')) {
+
+                    // button toggles the area
+                    if (button === event.target) {
+                        if (area.is(':visible')) {
+                            area.slideUp();
+                        } else {
+                            area.slideDown();
+                        }
+
+                    // all other areas that have not been clicked but are open
+                    // should be slid up
+                    } else {
+                        var closest = $(event.target).closest(areaSelector);
+                        if (area.is(':visible') && closest[0] !== area[0]) {
+                            area.slideUp();
+                        }
+                    }
+                }
+            });
+
+        });
+    };
+
+
+    $(document).ready(function () {
+        registerAppsSlideToggle();
+    });
+
+}(document, jQuery, OC));
\ No newline at end of file