Organize code using javascript object literal.

FriendsOfCake · Oct 8, 2017 · 3f98397 · 3f98397
1 parent 3bc55fc
commit 3f98397
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 76 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -17,7 +17,7 @@ indent_size = 2
 
 [*.js]
 indent_style = space
-indent_size = 2
+indent_size = 4
 
 [Makefile]
 indent_style = tab
diff --git a/webroot/js/local.js b/webroot/js/local.js
@@ -1,92 +1,115 @@
-$(function() {
-
-    var bulkActionForm = $('.bulk-actions');
-    if (bulkActionForm.length) {
-        bulkActionForm.submit(function (e) {
-            var action = $('.bulk-actions .bulk-action-submit select').val();
-            if (!action) {
-                return e.preventDefault();
-            }
+var CrudView = {
+    bulkActionForm: function (selector) {
+        var bulkActionForm = $(selector);
+        if (bulkActionForm.length) {
+            bulkActionForm.submit(function (e) {
+                var action = $('.bulk-action-submit select', bulkActionForm).val();
+                if (!action) {
+                    return e.preventDefault();
+                }
 
-            bulkActionForm.attr('action', action);
-        });
-    }
+                bulkActionForm.attr('action', action);
+            });
+        }
+    },
 
-    $('[role=datetime-picker]').each(function() {
+    datePicker: function (selector) {
+        $(selector).each(function() {
+            var picker = $(this);
+            var date = null;
 
-        var picker = $(this);
-        var date = null;
+            if (picker.data('timestamp') && picker.data('timezone-offset')) {
+                var timezoneOffset = picker.data('timezone-offset');
+                date = new Date(picker.data('timestamp') * 1000);
 
-        if (picker.data('timestamp') && picker.data('timezone-offset')) {
-            var timezoneOffset = picker.data('timezone-offset');
-            date = new Date(picker.data('timestamp') * 1000);
+                picker.parents('form').on('submit', function () {
+                    var timezoneDiff = timezoneOffset + date.getTimezoneOffset();
+                    var currentDate = picker.data('DateTimePicker').date();
+                    var convertedDate = currentDate.add(timezoneDiff, 'minutes');
+                    picker.data('DateTimePicker').date(convertedDate);
+                });
+            }
 
-            picker.parents('form').on('submit', function () {
-                var timezoneDiff = timezoneOffset + date.getTimezoneOffset();
-                var currentDate = picker.data('DateTimePicker').date();
-                var convertedDate = currentDate.add(timezoneDiff, 'minutes');
-                picker.data('DateTimePicker').date(convertedDate);
+            picker.datetimepicker({
+                locale: $(this).data('locale'),
+                format: $(this).data('format'),
+                date: date ? date : picker.val()
             });
-        }
-
-        picker.datetimepicker({
-            locale: $(this).data('locale'),
-            format: $(this).data('format'),
-            date: date ? date : picker.val()
         });
-    });
+    },
 
-    $('select:not(.autocomplete, .no-selectize)').selectize({plugins: ['remove_button']});
+    selectize: function (selector) {
+        $(selector).selectize({plugins: ['remove_button']});
+    },
 
-    $('input.autocomplete, select.autocomplete').each(function (i, e) {
-        e = $(e);
-        e.selectize({
-            maxItems: e.data('max-items') || 1,
-            maxOptions: e.data('max-options') || 10,
-            hideSelected: e.data('hide-selected'),
-            closeAfterSelect: e.data('close-after-select'),
-            create: !e.data('exact-match'),
-            persist: false,
-            render: {
-                'option_create': function(data, escape) {
-                    return '<div class="create">🔍 <strong> ' + escape(data.input) + '</strong>&hellip;</div>';
-                }
-            },
-            load: function (query, callback) {
-                var data = {};
+    autocomplete: function (selector) {
+        $(selector).each(function (i, e) {
+            e = $(e);
+            e.selectize({
+                maxItems: e.data('max-items') || 1,
+                maxOptions: e.data('max-options') || 10,
+                hideSelected: e.data('hide-selected'),
+                closeAfterSelect: e.data('close-after-select'),
+                create: !e.data('exact-match'),
+                persist: false,
+                render: {
+                    'option_create': function(data, escape) {
+                        return '<div class="create">🔍 <strong> ' + escape(data.input) + '</strong>&hellip;</div>';
+                    }
+                },
+                load: function (query, callback) {
+                    var data = {};
 
-                data[e.data('filter-field') || e.attr('name')] = query;
+                    data[e.data('filter-field') || e.attr('name')] = query;
 
-                if (e.data('dependent-on') && $('#' + e.data('dependent-on')).val()) {
-                    data[e.data('dependent-on-field')] = $('#' + e.data('dependent-on')).val();
-                }
-                $.ajax({
-                    url: e.data('url'),
-                    dataType: 'json',
-                    data: data,
-                    error: function() {
-                        callback();
-                    },
-                    success: function(res) {
-                        callback($.map(res.data, function (name, id) {
-                            return {value: id, text: name};
-                        }));
+                    if (e.data('dependent-on') && $('#' + e.data('dependent-on')).val()) {
+                        data[e.data('dependent-on-field')] = $('#' + e.data('dependent-on')).val();
                     }
-                });
-            }
+                    $.ajax({
+                        url: e.data('url'),
+                        dataType: 'json',
+                        data: data,
+                        error: function() {
+                            callback();
+                        },
+                        success: function(res) {
+                            callback($.map(res.data, function (name, id) {
+                                return {value: id, text: name};
+                            }));
+                        }
+                    });
+                }
+            });
         });
-    });
+    },
+
+    dirtyForms: function () {
+        $.DirtyForms.dialog = false;
+        $('form[data-dirty-check=1]').dirtyForms();
+    },
+
+    dropdown: function () {
+        $('.dropdown-toggle').dropdown();
 
-    $.DirtyForms.dialog = false;
-    $('form[data-dirty-check=1]').dirtyForms();
+        // recommended hack to get dropdowns correctly work inside responsive table
+        $('.table-responsive').on('show.bs.dropdown', function () {
+            $('.table-responsive').css( "overflow", "inherit" );
+        });
+        $('.table-responsive').on('hide.bs.dropdown', function () {
+            $('.table-responsive').css( "overflow", "auto" );
+        })
+    },
 
-    $('.dropdown-toggle').dropdown();
+    initialize: function() {
+        this.bulkActionForm('.bulk-actions');
+        this.datePicker('[role=datetime-picker]');
+        this.selectize('select:not(.autocomplete, .no-selectize)');
+        this.autocomplete('input.autocomplete, select.autocomplete');
+        this.dirtyForms();
+        this.dropdown();
+    }
+};
 
-    // recommended hack to get dropdowns correctly work inside responsive table
-    $('.table-responsive').on('show.bs.dropdown', function () {
-        $('.table-responsive').css( "overflow", "inherit" );
-    });
-    $('.table-responsive').on('hide.bs.dropdown', function () {
-        $('.table-responsive').css( "overflow", "auto" );
-    })
+$(function() {
+    CrudView.initialize();
 });