-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from angular-ui/master
Updating
- Loading branch information
Showing
144 changed files
with
9,787 additions
and
4,520 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # EditorConfig helps developers define and maintain consistent | ||
| # coding styles between different editors and IDEs | ||
| # editorconfig.org | ||
|
|
||
| root = true | ||
|
|
||
|
|
||
| [*] | ||
|
|
||
| # Change these settings to your own preference | ||
| indent_style = space | ||
| indent_size = 2 | ||
|
|
||
| # We recommend you to keep these unchanged | ||
| end_of_line = lf | ||
| charset = utf-8 | ||
| trim_trailing_whitespace = true | ||
| insert_final_newline = true | ||
|
|
||
| [*.md] | ||
| trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| @ngdoc overview | ||
| @name Rendering Cycle | ||
| @module | ||
| @description | ||
|
|
||
| The core grid rendering cycle is executed whenever the grid needs re-rendering. There are a number of core methods, | ||
| with some of those methods able to be called individually. | ||
|
|
||
| ### Current | ||
| The key method is `grid.refresh`. This method updates the rows and columns in the grid, then redraws and resizes the grid. | ||
|
|
||
| - grid.refresh | ||
| - rowsProcessors | ||
| - setVisibleRows | ||
| - columnsProcessors | ||
| - setVisibleColumns | ||
| - redrawInPlace | ||
| - refreshCanvas | ||
|
|
||
| By preference grid.refresh is called through a debounce function - grid.queueGridRefresh. If you use this method you are | ||
| telling the grid that you want a refresh, but you're allowing the grid to consolidate all refreshes from the current digest cycle | ||
| and process just once. | ||
|
|
||
| A similar method, `grid.refreshRows` also exists, this is the same as grid.refresh except that it doesn't run `columnsProcessors` | ||
| or `setVisibleColumns`. | ||
|
|
||
| The rows and columns processors are focused on ordering and determining the visibility of columns and rows. They include functions | ||
| such as sorting and filtering (impacting order and visibility of rows), grouping rows (which adds extra rows, and changes the ordering | ||
| and widths of columns), and pinning, which changes which render container particular columns are in. | ||
|
|
||
| `redrawInPlace` determines the correct scroll percentage in the grid, and therefore which of the rows and columns should currently | ||
| be visible in the viewport. | ||
|
|
||
| `refreshCanvas` is a complicated method that determines the sizing of each of the grid elements. In some cases it is currently iterative, | ||
| for example it determines header height by rendering each of the column headers, and determining the maximum rendered height. This largely | ||
| appears to be to accomodate filters. | ||
|
|
||
| - refreshCanvas | ||
| - buildStyles | ||
| - $timeout - calcHeaders (this is inline - should it be a style computation? It isn't a promise, and doesn't wait on the buildStyles | ||
| promise, but it does run in a timeout. Conversely, it creates a promise that it resolves - but it doesn't wait for the header calc to | ||
| complete before resolving the promise) | ||
| - may call buildStyles again if it decides headerHeight has changed | ||
|
|
||
| The style builders include: | ||
|
|
||
| - `GridRenderContainer.updateColumnWidths`, which calculates column widths based on the defined settings, including resolving * and ** etc. No rendering | ||
| is involved - all based on the availableWidth. This may be the source of some of the iteration - because availableWidth must in some way be | ||
| based on columnWidth - the canvas doesn't really have an available width. I also have question on why we calculate widths on the grid | ||
| and not on the renderContainer, that may be another source of iteration. Having said that, things like % and * probably apply to the | ||
| full grid width, not to just a container, and we wouldn't expect a column to change width when it changed container (e.g. when we pinned it) | ||
| - `uiGridRenderContainer.update()`, which is called for each renderContainer. It determines the | ||
| width of each column in the render container, and the width of the overall render container. | ||
| - `Grid.prototype.getFooterStyles()`, sets the columnFooterHeight and the gridFooterHeight based on fixed values declared in the options | ||
| - when there are multiple renderContainers (e.g. a left container), the non-body render containers appear to execute first | ||
| - `ui-pinned-container.updateContainerDimensions()`: sets the width of a pinned container. How does this interact with render container width? | ||
|
|
||
| ### Vision | ||
| The vision is to make the style calculations more deterministic, and remove any iteration or other dependencies. A single pass through | ||
| refreshCanvas should return a correctly sized grid. | ||
|
|
||
| To achieve this, we really need to: | ||
|
|
||
| - calculate all sizing in code, without reference to the sizing of rendered grid elements. We already do most of this for rows | ||
| and columns, the main gap seems to be grid header | ||
| - we could reference rendered size to determine the grid's available size (if we want to), which could allow the grid to be more | ||
| responsive. Probably we already do this. | ||
| - calculate the column widths and element heights | ||
| - layout all the columns - what render container they're in etc, then size the render containers | ||
| - calculate the overall grid sizing based on all the elements (headerHeight, footerHeight, container widths etc) | ||
| - render | ||
|
|
||
| Thinking only at this stage!! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <!DOCTYPE html> | ||
| <html class="no-js" ng-app="test"><!--<![endif]--> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | ||
| <title></title> | ||
| <meta content="width=device-width" name="viewport"> | ||
|
|
||
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" /> | ||
| <link href="/dist/release/ui-grid.css" rel="stylesheet"> | ||
|
|
||
| <!--<script src="https://code.jquery.com/jquery-1.11.1.js"></script>--> | ||
| <script src="/lib/test/angular/1.2.26/angular.js"></script> | ||
| <script src="/dist/release/ui-grid.js"></script> | ||
|
|
||
| <style> | ||
| body { | ||
| padding: 60px; | ||
| min-height: 600px; | ||
| } | ||
| .grid { | ||
| width: 500px; | ||
| height: 400px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body ng-controller="Main"> | ||
|
|
||
| <h2>Grid</h2> | ||
| <div ui-grid="gridOptions" class="grid" ui-grid-save-state ui-grid-selection ui-grid-cellNav ui-grid-resize-columns ui-grid-move-columns ui-grid-pinning ></div> | ||
| <button id="save" type="button" class="btn btn-success" ng-click="saveState()">Save</button> | ||
| <button id="restore" type="button" class="btn btn-success" ng-click="restoreState()">Restore</button> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <script> | ||
| var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns', 'ui.grid.saveState']); | ||
| app.controller('Main', function($scope, $http) { | ||
| $scope.gridOptions = {}; | ||
| $scope.gridOptions.columnDefs = [ | ||
| { name:'id', width:50 }, | ||
| { name:'name', width:100, pinnedLeft:true }, | ||
| { name:'age', width:100, pinnedRight:true }, | ||
| { name:'address.street', width:150 }, | ||
| { name:'address.city', width:150 }, | ||
| { name:'address.state', width:50 }, | ||
| { name:'address.zip', width:50 }, | ||
| { name:'company', width:100 }, | ||
| { name:'email', width:100 }, | ||
| { name:'phone', width:200 }, | ||
| { name:'about', width:300 }, | ||
| { name:'friends[0].name', displayName:'1st friend', width:150 }, | ||
| { name:'friends[1].name', displayName:'2nd friend', width:150 }, | ||
| { name:'friends[2].name', displayName:'3rd friend', width:150 } | ||
| ]; | ||
| $scope.gridOptions.enableFiltering = true; | ||
| $scope.gridOptions.onRegisterApi = function(gridApi) { | ||
| $scope.gridApi = gridApi; | ||
|
|
||
| gridApi.pinning.on.columnPinned($scope, function(col, action) { | ||
| console.log(col, action); | ||
| }); | ||
| }; | ||
| $scope.state = {}; | ||
|
|
||
| $scope.saveState = function() { | ||
| $scope.state = $scope.gridApi.saveState.save(); | ||
| }; | ||
|
|
||
| $scope.restoreState = function() { | ||
| $scope.gridApi.saveState.restore( $scope, $scope.state ); | ||
| }; | ||
|
|
||
| $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') | ||
| .success(function(data) { | ||
| $scope.gridOptions.data = data; | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <!DOCTYPE html> | ||
| <html ng-app="app"> | ||
|
|
||
| <head> | ||
| <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> | ||
| <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> | ||
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> | ||
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script> | ||
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script> | ||
| <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script> | ||
| <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> | ||
| <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> | ||
| <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> | ||
| <script src="/dist/release/ui-grid.js"></script> | ||
| <link rel="stylesheet" href="/dist/release/ui-grid.css" type="text/css" /> | ||
| <style type="text/css"> | ||
| .grid { | ||
| width: 100%; | ||
| max-width: 600px; | ||
| height: 400px; | ||
| } | ||
|
|
||
| body { | ||
| padding: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div ng-controller="MainCtrl"> | ||
| <button ng-click="openModal()" class="btn btn-success">Open Modal</button> | ||
| </div> | ||
|
|
||
| <script> | ||
| var app = angular.module('app', ['ui.grid', 'ui.bootstrap']); | ||
|
|
||
| app.controller('MainCtrl', function ($scope, $modal) { | ||
| $scope.openModal = function () { | ||
| $modal.open({ | ||
| templateUrl: 'modal.html' | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| app.controller('ModalDemoCtrl', function ($scope, $http) { | ||
| $scope.gridOptions = {}; | ||
|
|
||
| $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') | ||
| .success(function(data) { | ||
| $scope.gridOptions.data = data; | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <script type="text/ng-template" id="modal.html"> | ||
| <div ng-controller="ModalDemoCtrl"> | ||
| <div class="modal-header"> | ||
| <h3 class="modal-title">I'm a modal!</h3> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <div id="grid1" ui-grid="gridOptions" class="grid"></div> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button class="btn btn-warning" ng-click="$close()">Cancel</button> | ||
| </div> | ||
| <div ng-show="selected">Selection from a modal: {{ selected }}</div> | ||
| </div> | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.