Code Samples

Wednesday, November 16, 2016

Angular-js infinity scroll to load more data on window or other element scrolling

<!DOCTYPE html>
<html>
    <head>
        <title>Infinite scrolling to load more data using angular-js</title>
        <style type="text/css">
            div.scroll-test {
                height: 100%;
                background: #123213;
                color: #fff;
                overflow: auto;
                margin: 0 auto;
                padding: 0.5em;
            }
        </style>
        
        <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        
        <script type="text/javascript">
            var app = angular.module("myApp", []);
           
            app.controller("ScrollController", function($scope, $http) {
                $scope.items = ["You have to scroll down to load more items..."];
                $scope.loading = false;
                $scope.counter = 0;
                $scope.rows = 1;
                
                var s = "----------------------------------------------------";
                s += "-------------------------------------------------------";
                s += "-------------------------------------------------------";
                
                $scope.loadMore = function() {
                    if(!$scope.loading) {
                        $scope.loading = true;
                        $http({
                            method: "GET",
                            url: "http://localhost/scroll/data.html?counter=" + ($scope.counter++)
                        }).success(function(data, status, header, config) {
                            $scope.loading = false;
                            data = data.split("\n");
                            for(i = 0; i < data.length - 1; i++) {
                                $scope.items.push(($scope.rows++) + "=" + data[i]);
                            }
                            $scope.items.push(($scope.rows++) + s);
                        });
                    }
                };
                
                var params = {};
                window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
                    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
                });
                var type = params.type === undefined ? '' : params.type;
                
                $scope.window = true;
                if(type == 'window') {
                    //Initializing the list
                    $scope.loadMore();
                }
                else if(type == 'div') {
                    $scope.window = false;
                    $("div.scroll-test").height(window.innerHeight - 130);
                    //Initializing the list
                    $scope.loadMore();
                }
                else {
                    $scope.items.push("You have to define 'type' parameter in url & value would be 'window' or 'div' as ?type=window");
                }
            });
            
            app.directive("windowScroll", function ($window) {
                return function(scope, element, attrs) {
                    angular.element($window).bind("scroll", function() {
                        if(scope.window && $window.pageYOffset + $(window).height() + 50 >= $(document).height()) {
                            scope.$apply(attrs.windowScroll);
                        }
                    });
                };
            });
           
            app.directive("divScroll", function() {
                return {    
                    restrict: 'A',
                    link: function(scope, element, attrs) {
                        var raw = element[0];
                        element.bind("scroll", function() {
                            if(!scope.window && raw.scrollTop + raw.offsetHeight + 50 >= raw.scrollHeight) {
                                scope.$apply(attrs.divScroll);
                            }
                        });
                    }
                }
            });
        </script>
    </head>

    <body>
         <div data-ng-app="myApp" data-window-scroll="loadMore()" data-ng-controller="ScrollController">
             <div>
                 <div class="scroll-test" data-div-scroll="loadMore()">
                     <p data-ng-repeat="item in items">
                         {{item}}
                     </p>
                 </div>
                <h1><i>INFINITE SCROLLING IN ANGULAR-JS<span data-ng-show="loading"> (Loading items...)</span></i></h1>              
             </div>       
         </div>
    </body>
</html>

jQuery get params from url

var params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
});
console.log(params);

Tuesday, November 15, 2016

GIT: Updates were rejected because a pushed branch tip is behind its remote

git push -f

The -f makes this a "forced push" and overwrites the branch on the working branch on the server. That would be gone wrong when you are working with other team members. But you can force push when you sure that your local state is correct then it should be fine. You risk losing commit history if that is not the case.

GIT: How to show changed made on files on branch by commit

It will display file changes between two commits (file names only):
git diff OLDER_COMMIT RECENT_COMMIT --name-status

It will display file changes between two commits:
git diff OLDER_COMMIT RECENT_COMMIT

It will display file changes between local changes and specific commit:
git diff COMMIT_NUMBER

Monday, November 14, 2016

Git, see list of latest commits

To see list of commits:
git log

List of commits with file name & status:
git log --name-status

List of previous n commits
git log --name-status -n 2

List of commits by author name:
git log --name-status --author=Pritom (Case sensitive)

List of commits search by file name:
git log --name-status -n 2 --author=pritom | grep "Search"

GIT: How to show the changes on specific commit

Type the following to git bash to show all changes:
git show COMMIT_NUMBER

To show difference between a specific file type:
git show COMMIT_NUMBER file_location/file_name

Type following to show file list changed on the commit:
git show COMMIT_NUMBER --name-status

Will output following:
M location/file_name (Modified)

A location/file_name (Added New)

Git list all commits for a specific file

Type to git bash:

git log --follow filename

and to quit from list type:

Pages