bastion 0.1.0

data/app/assets/javascripts/bastion/incubator/alch-flyout.directive.js

@@ -0,0 +1,19 @@
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchFlyout
+ * @restrict EA
+ *
+ * @description
+ *   Provides a "flyout" sub-menu for menu items with one or more
+ *   child menu items.
+ */
+angular.module('alchemy').directive('alchFlyout', function () {
+    return {
+        restrict: 'EA',
+        replace: true,
+        scope: {
+            'flyout' : '=alchFlyout'
+        },
+        templateUrl: 'incubator/views/alch-flyout.html'
+    };
+});

data/app/assets/javascripts/bastion/incubator/alch-form-buttons.directive.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2014 Red Hat, Inc.
+ *
+ * This software is licensed to you under the GNU General Public
+ * License as published by the Free Software Foundation; either version
+ * 2 of the License (GPLv2) or (at your option) any later version.
+ * There is NO WARRANTY for this software, express or implied,
+ * including the implied warranties of MERCHANTABILITY,
+ * NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ * have received a copy of GPLv2 along with this software; if not, see
+ * http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+ */
+
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchFormButtons
+ *
+ * @description
+ *   Encapsulates the standard structure and styling for create and cancel buttons
+ *   when used with a form.
+ *
+ * @example
+ *      <div alch-form-buttons
+             on-cancel="transitionTo('product.index')"
+             on-save="save(product)"
+             working="working">
+        </div>
+ */
+angular.module('alchemy').directive('alchFormButtons', function () {
+    return {
+        replace: true,
+        require: '^form',
+        templateUrl: 'incubator/views/alch-form-buttons.html',
+        scope: {
+            handleCancel: '&onCancel',
+            handleSave: '&onSave',
+            working: '='
+        },
+        link: function (scope, iElement, iAttrs, controller) {
+
+            if (scope.working === undefined) {
+                scope.working = false;
+            }
+
+            scope.isInvalid = function () {
+                var invalid = controller.$invalid;
+
+                angular.forEach(controller, function (value) {
+                    if (value && value.$error) {
+                        if (value.$error.server) {
+                            invalid = false;
+                        }
+                    }
+                });
+
+                return invalid;
+            };
+        }
+    };
+});

data/app/assets/javascripts/bastion/incubator/alch-form-group.directive.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright 2014 Red Hat, Inc.
+ *
+ * This software is licensed to you under the GNU General Public
+ * License as published by the Free Software Foundation; either version
+ * 2 of the License (GPLv2) or (at your option) any later version.
+ * There is NO WARRANTY for this software, express or implied,
+ * including the implied warranties of MERCHANTABILITY,
+ * NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ * have received a copy of GPLv2 along with this software; if not, see
+ * http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+ */
+
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchFormGroup
+ *
+ * @description
+ *  Encapsulates the structure and styling for a label + input used within a
+ *  Bootstrap3 based form.
+ *
+ * @example
+ *  <div alch-form-group label="{{ 'Name' | translate }}" required>
+        <input id="name"
+               name="name"
+               ng-model="product.name"
+               type="text"
+               tabindex="1"
+               required/>
+    </div>
+ */
+angular.module('alchemy').directive('alchFormGroup', function () {
+    function getInput(element) {
+        // table is used for bootstrap3 date/time pickers
+        var input = element.find('table');
+
+        if (input.length === 0) {
+            input = element.find('input');
+
+            if (input.length === 0) {
+                input = element.find('select');
+
+                if (input.length === 0) {
+                    input = element.find('textarea');
+                }
+            }
+        }
+        return input;
+    }
+
+    return {
+        transclude: true,
+        replace: true,
+        require: '^form',
+        templateUrl: 'incubator/views/alch-form-group.html',
+        scope: {
+            'label': '@',
+            'field': '@'
+        },
+        link: function (scope, iElement, iAttrs, controller) {
+            var input = getInput(iElement),
+                type = input.attr('type'),
+                field;
+
+            if (!scope.field) {
+                scope.field = input.attr('id');
+            }
+            field = scope.field;
+
+            if (['checkbox', 'radio', 'time'].indexOf(type) === -1) {
+                input.addClass('form-control');
+            }
+
+            if (input.attr('required')) {
+                iElement.addClass('required');
+            }
+
+            if (controller[field]) {
+                scope.error = controller[field].$error;
+            }
+
+            scope.hasErrors = function () {
+                return controller[field] && controller[field].$invalid && controller[field].$dirty;
+            };
+        }
+    };
+});

data/app/assets/javascripts/bastion/incubator/alch-infinite-scroll.directive.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2014 Red Hat, Inc.
+ *
+ * This software is licensed to you under the GNU General Public
+ * License as published by the Free Software Foundation; either version
+ * 2 of the License (GPLv2) or (at your option) any later version.
+ * There is NO WARRANTY for this software, express or implied,
+ * including the implied warranties of MERCHANTABILITY,
+ * NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ * have received a copy of GPLv2 along with this software; if not, see
+ * http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+ */
+
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchInfiniteScroll
+ *
+ * @description
+ *   The infinite scroll directive should be applied to a wrapping div around another element
+ *   and provides automatic loading when a user scrolls to the bottom of the element.
+ *
+ *   Note that the element using the alch-infinite-scroll directive should have it's overflow
+ *   set properly.
+ *
+ * @example
+ *   <pre>
+ *     <div alch-infinite-scroll="loadMore()" style="height: 100px; overflow-y: auto;">
+ *       <p style="height: 1000px;">Hello</p>
+ *     </div>
+ *   </pre>
+ */
+angular.module('alchemy').directive('alchInfiniteScroll', [function () {
+    return {
+        scope: {
+            data: '=',
+            loadMoreFunction: '&alchInfiniteScroll',
+            skipInitialLoad: '='
+        },
+        controller: function ($scope, $element) {
+
+            var result, raw = $element[0];
+
+            $element.bind('scroll', function () {
+                var sliderPosition = raw.scrollTop + raw.offsetHeight;
+                if (sliderPosition > 0 && sliderPosition >= raw.scrollHeight - 1) {
+                    $scope.loadMoreFunction();
+                }
+            });
+
+            var getScrollHeight = function () {
+                var scrollHeight = 0;
+                $element.children().each(function () {
+                    scrollHeight = scrollHeight + $(this).get(0).scrollHeight;
+                });
+                return scrollHeight;
+            };
+
+            var isPromise = function (promise) {
+                return promise && promise.hasOwnProperty('then');
+            };
+
+            var loadUntilScroll = function () {
+                var result;
+                if (getScrollHeight() < $element.height()) {
+                    result = $scope.loadMoreFunction();
+                    if (isPromise(result)) {
+                        result.then(function () {
+                            if (getScrollHeight() < $element.height()) {
+                                loadUntilScroll();
+                            }
+                        });
+                    }
+                }
+            };
+
+            if (!$scope.skipInitialLoad && ($scope.data === undefined || $scope.data.length === 0)) {
+                result = $scope.loadMoreFunction();
+                if (isPromise(result)) {
+                    result.then(loadUntilScroll);
+                }
+            }
+        }
+    };
+}]);

data/app/assets/javascripts/bastion/incubator/alch-menu.directive.js

@@ -0,0 +1,56 @@
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchMenu
+ * @restrict EA
+ * @requires $window
+ *
+ * @description
+ *   Provides a menu.
+ */
+angular.module('alchemy').directive('alchMenu', ['$window', function ($window) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        scope: {
+            'menu': '=alchMenu',
+            'compact' : '@'
+        },
+        templateUrl: 'incubator/views/alch-menu.html',
+        controller: ['$scope', function ($scope) {
+            $scope.dropdown = {};
+
+            $scope.handleHover = function (item, mousein) {
+                if (item.type === 'dropdown' && mousein) {
+                    item.active = true;
+                    $scope.dropdown = item.items;
+                    $scope.dropdown.show = true;
+                    $scope.dropdown.direction = $scope.menu.location;
+                } else {
+                    $scope.dropdown.show = false;
+
+                    if (item !== $scope.menu.activeItem) {
+                        item.active = false;
+                    }
+                }
+            };
+
+        }],
+        link: function (scope, element, attrs) {
+            var elementOriginalOffset;
+
+            if (attrs.compact !== undefined) {
+                elementOriginalOffset = $(element).offset().top;
+
+                angular.element($window).bind('scroll', function () {
+                    var windowScrollTop = $($window).scrollTop();
+
+                    if (windowScrollTop > elementOriginalOffset + 2) {
+                        element.parent().addClass('compact');
+                    } else if (windowScrollTop < elementOriginalOffset) {
+                        element.parent().removeClass('compact');
+                    }
+                });
+            }
+        }
+    };
+}]);

data/app/assets/javascripts/bastion/incubator/alch-modal.directive.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2014 Red Hat, Inc.
+ *
+ * This software is licensed to you under the GNU General Public
+ * License as published by the Free Software Foundation; either version
+ * 2 of the License (GPLv2) or (at your option) any later version.
+ * There is NO WARRANTY for this software, express or implied,
+ * including the implied warranties of MERCHANTABILITY,
+ * NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ * have received a copy of GPLv2 along with this software; if not, see
+ * http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+ */
+
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchConfirm
+ * @restrict A
+ *
+ * @requires $templateCache
+ * @requires $modal
+ *
+ * @description
+ *   Provides a wrapper around angular-ui's modal dialog service.
+ */
+angular.module('alchemy').directive('alchModal',
+    ['$templateCache', '$modal', function ($templateCache, $modal) {
+    return {
+        // To be expanded when we add additional type of modals
+        templateUrl: 'incubator/views/alch-modal-remove.html',
+        replace: true,
+        scope: {
+            action: '&alchModal',
+            modelName: '@model',
+            model: '=',
+            modalHeader: '@',
+            modalBody: '@'
+        },
+        compile: function (element) {
+            return function (scope) {
+                var modalInstance, modalController, modalId;
+
+                modalId = 'alchModal%d.html'.replace('%d', Math.random().toString());
+
+                modalController = ['$scope', '$modalInstance', 'model', function ($scope, $modalInstance, model) {
+                    $scope[scope.modelName] = model;
+                    $scope['modalHeader'] = scope.modalHeader;
+                    $scope['modalBody'] = scope.modalBody;
+
+                    $scope.ok = function () {
+                        $modalInstance.close();
+                    };
+
+                    $scope.cancel = function () {
+                        $modalInstance.dismiss('cancel');
+                    };
+                }];
+
+                scope.openModal = function () {
+                    modalInstance = $modal.open({
+                        templateUrl: modalId,
+                        controller: modalController,
+                        resolve: {
+                            model: function () {
+                                return scope[scope.modelName];
+                            }
+                        }
+                    });
+
+                    modalInstance.result.then(function () {
+                        scope.action();
+                    });
+                };
+
+                scope.$parent.openModal = scope.openModal;
+
+                $templateCache.put(modalId, element.html());
+            };
+        }
+    };
+}]);

data/app/assets/javascripts/bastion/incubator/alch-save-control.directive.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2014 Red Hat, Inc.
+ *
+ * This software is licensed to you under the GNU General Public
+ * License as published by the Free Software Foundation; either version
+ * 2 of the License (GPLv2) or (at your option) any later version.
+ * There is NO WARRANTY for this software, express or implied,
+ * including the implied warranties of MERCHANTABILITY,
+ * NON-INFRINGEMENT, or FITNESS FOR A PARTICULAR PURPOSE. You should
+ * have received a copy of GPLv2 along with this software; if not, see
+ * http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt.
+ **/
+
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchSaveButton
+ *
+ * @description
+ *   Simple directive for encapsulating create and cancel buttons. This includes states
+ *   for disabling buttons and setting a visual working state.
+ *
+ * @example
+ *   <pre>
+ *     <div alch-save-control
+ *          on-cancel="closeItem()"
+ *          on-save="save(product)"
+ *          invalid="productForm.$invalid">
+ *     </div>
+ */
+angular.module('alchemy').directive('alchSaveControl', function () {
+    return {
+        restrict: 'AE',
+        replace: true,
+        templateUrl: 'incubator/views/alch-save-control.html',
+        scope: {
+            handleSave: '&onSave',
+            handleCancel: '&onCancel',
+            invalid: '=',
+            working: '='
+        }
+    };
+});

data/app/assets/javascripts/bastion/incubator/alch-table.directive.js

@@ -0,0 +1,295 @@
+/**
+ * @ngdoc directive
+ * @name alchemy.directive:alchTable
+ * @restrict A
+ *
+ * @description
+ *
+ * @example
+ */
+angular.module('alchemy')
+    .directive('alchTable', [function () {
+        return {
+            restrict: 'A',
+            replace: true,
+            scope: {
+                'table': '=alchTable',
+                'rowSelect': '@',
+                'rowChoice': '@'
+            },
+            controller: 'AlchTableController'
+        };
+    }])
+    .controller('AlchTableController', ['$scope', function ($scope) {
+        var rows = $scope.rows = [],
+            headers = $scope.headers = [],
+            self = this;
+
+        this.selection = {allSelected: false, selectAllDisabled: false};
+
+        $scope.table.numSelected = 0;
+        $scope.table.chosenRow = null;
+
+        $scope.table.getSelected = function () {
+            var selectedRows = [];
+            angular.forEach($scope.table.rows, function (row, rowIndex) {
+                if (row.selected === true) {
+                    selectedRows.push($scope.table.rows[rowIndex]);
+                }
+            });
+            return selectedRows;
+        };
+
+        $scope.table.selectAllDisabled = false;
+
+        this.disableSelectAll = $scope.table.disableSelectAll = function () {
+            self.selection.selectAllDisabled = true;
+        };
+
+        this.enableSelectAll = $scope.table.enableSelectAll = function () {
+            self.selection.selectAllDisabled = false;
+        };
+
+        $scope.table.allSelected = function () {
+            return self.selection.allSelected;
+        };
+
+        this.addRow = function (row) {
+            rows.push(row);
+
+            if (headers.length) {
+                angular.forEach(headers[0].columns, function (column, columnIndex) {
+                    if (row.cells[columnIndex]) {
+                        row.cells[columnIndex].show = column.show;
+                    }
+                });
+            }
+        };
+
+        this.addHeader = function (columns) {
+            headers.push(columns);
+        };
+
+        this.itemSelected = function (row) {
+            $scope.table.numSelected += row.selected ? 1 : -1;
+            self.selection.allSelected = false;
+        };
+
+        this.itemChosen = function (row) {
+            $scope.table.chosenRow = row;
+        };
+
+        this.selectAll = $scope.table.selectAll = function (selected) {
+            var table = $scope.table,
+                rowsSelected = 0;
+
+            self.selection.allSelected = selected;
+            angular.forEach(table.rows, function (row) {
+                if (!row.unselectable) {
+                    row.selected = self.selection.allSelected;
+                    rowsSelected = rowsSelected + 1;
+                }
+            });
+            $scope.table.numSelected = selected ? rowsSelected : 0;
+        };
+
+    }])
+    .directive('alchTableHead', [function () {
+        var rowSelectTemplate = function () {
+            return '<th class="row-select">' +
+                      '<input type="checkbox"' +
+                              'ng-model="selection.allSelected"' +
+                              'ng-disabled="selection.selectAllDisabled"' +
+                              'ng-change="allSelected()">' +
+                    '</th>';
+        }, rowChoiceTemplate = function () {
+            return '<th translate class="row-select"></th>';
+        };
+
+        return {
+            require: '^alchTable',
+            restrict: 'A',
+            scope: true,
+            controller: 'AlchTableHeadController',
+            compile: function (tElement, tAttrs) {
+                if (tAttrs.rowSelect !== undefined) {
+                    tElement.prepend(rowSelectTemplate());
+                } else if (tAttrs.rowChoice !== undefined) {
+                    tElement.prepend(rowChoiceTemplate());
+                }
+
+                return function (scope, element, attrs, alchTableController) {
+                    if (tAttrs.rowSelect !== undefined) {
+                        scope.table.rowSelect = true;
+                    } else  if (tAttrs.rowChoice !== undefined) {
+                        scope.table.rowChoice = true;
+                    }
+
+                    alchTableController.addHeader(scope.header);
+
+                    scope.selection = alchTableController.selection;
+
+                    scope.allSelected = function () {
+                        alchTableController.selectAll(scope.selection.allSelected);
+                    };
+                };
+            }
+        };
+    }])
+    .controller('AlchTableHeadController', ['$scope', function ($scope) {
+        $scope.header = {
+            columns: []
+        };
+
+        this.addColumn = function (column) {
+            $scope.header.columns.push(column);
+        };
+    }])
+    .directive('alchTableColumn', ['$compile', function ($compile) {
+        var sortIconTemplate = '<th ng-click="table.sortBy(column)">' +
+                                  '<i class="sort-icon" ng-show="table.resource.sort.by == column.id" ng-class="{\'icon-sort-down\': column.sortOrder == \'DESC\', \'icon-sort-up\': column.sortOrder == \'ASC\'}"></i>' +
+                               '</th>';
+        return {
+            require: '^alchTableHead',
+            restrict: 'A',
+            scope: true,
+            controller: ['$scope', function ($scope) {
+                $scope.column = { show: true };
+            }],
+            compile: function (element, attributes) {
+                if (attributes.hasOwnProperty("sortable")) {
+                    var newElement = angular.element(sortIconTemplate);
+                    newElement.find('.sort-icon').before(element.html());
+                    newElement.addClass('sortable');
+                    newElement.addClass(element.attr('class'));
+                    element.replaceWith(newElement);
+                }
+                return function (scope, element, attributes, alchTableHeadController) {
+                    if (attributes.hasOwnProperty("sortable")) {
+                        $compile(element)(scope);
+                    }
+                    scope.column.id = attributes["alchTableColumn"];
+                    alchTableHeadController.addColumn(scope.column);
+
+                    scope.$watch('column.show', function (show) {
+                        var display = show ? '' : 'none';
+                        element.css('display', display);
+                    });
+                };
+            }
+        };
+    }])
+    .directive('alchTableRow', ['$parse', function ($parse) {
+        var rowSelectTemplate, rowChoiceTemplate, activeRowTemplate;
+
+        rowSelectTemplate = function (model) {
+            return '<td class="row-select">' +
+                      '<input type="checkbox"' +
+                              'ng-model="' + model + '.selected"' +
+                              'ng-disabled="' + model + '.unselectable"' +
+                              'ng-change="itemSelected(' + model + ')">' +
+                   '</td>';
+        };
+
+        rowChoiceTemplate = function (model) {
+            return '<td class="row-choice">' +
+                      '<input type="radio"' +
+                              'ng-model="table.chosenRow"' +
+                              'ng-value="' + model + '"' +
+                              'ng-click="itemChosen(' + model + ')">' +
+                   '</td>';
+        };
+
+        activeRowTemplate = function (activeTest) {
+            return '<i class="icon-chevron-right selected-icon" ' +
+                   'ng-show="' + activeTest  + ' "></i>';
+        };
+
+        return {
+            require: '^alchTable',
+            restrict: 'A',
+            scope: true,
+            controller: 'AlchTableRowController',
+            compile: function (tElement, tAttrs) {
+
+                if (tAttrs.activeRow !== undefined) {
+                    tElement.find('td:first-child').append(activeRowTemplate(tAttrs.activeRow));
+                }
+
+                if (tAttrs.rowSelect !== undefined) {
+                    tElement.prepend(rowSelectTemplate(tAttrs.rowSelect));
+                }
+
+                if (tAttrs.rowChoice !== undefined) {
+                    tElement.prepend(rowChoiceTemplate(tAttrs.rowChoice));
+                }
+
+                if (tAttrs.activeRow !== undefined) {
+                    tElement.find('td').attr('ng-class', '{ "active-row": ' + tAttrs.activeRow + ' }');
+                }
+
+                return function (scope, element, attrs, alchTableController) {
+                    alchTableController.addRow(scope.row);
+
+                    if (attrs.rowSelect) {
+                        scope.model = $parse(attrs.rowSelect)(scope);
+
+                        if ($parse(attrs.rowSelectIf)(scope)) {
+                            scope.model.unselectable = true;
+                        }
+
+                        scope.$watch('model.selected', function (selected) {
+                            if (selected) {
+                                element.addClass('selected-row');
+                            } else {
+                                element.removeClass('selected-row');
+                            }
+                        });
+                    } else if (attrs.rowChoice) {
+                        scope.model = $parse(attrs.rowChoice)(scope);
+                    }
+
+                    if (attrs.activeRow) {
+                        scope.activeTest = $parse(attrs.activeRow)(scope);
+                    }
+
+                    scope.itemSelected = function (row) {
+                        alchTableController.itemSelected(row);
+                    };
+
+                    scope.itemChosen = function (row) {
+                        element.parent().find('.selected-row').removeClass('selected-row');
+                        element.addClass('selected-row');
+                        alchTableController.itemChosen(row);
+                    };
+                };
+            }
+        };
+    }])
+    .controller('AlchTableRowController', ['$scope', function ($scope) {
+        $scope.row = {
+            cells: []
+        };
+
+        this.addCell = function (cell) {
+            $scope.row.cells.push(cell);
+        };
+    }])
+    .directive('alchTableCell', [function () {
+        return {
+            require: '^alchTableRow',
+            restrict: 'A',
+            scope: true,
+            controller: ['$scope', function ($scope) {
+                $scope.cell = { show: true };
+            }],
+            link: function (scope, element, attrs, alchTableRowController) {
+                alchTableRowController.addCell(scope.cell);
+
+                scope.$watch('cell.show', function (show) {
+                    var display = show ? '' : 'none';
+                    element.css('display', display);
+                });
+            }
+        };
+    }]);