Link to home
Start Free TrialLog in
Avatar of Paul Konstanski
Paul KonstanskiFlag for United States of America

asked on

AngularJS Page Control Understanding

I had a co-worker do some AngularJS work for me. I'm just learning Angular and they are no longer working with me.

They used the following for "Page Control" --  Can you help me better understand all that this is doing? It seems quite complex. Is there an easier way to do this?

I believe the purpose of this was to do two things: 1) Smooth Scrolling and 2) A nav bar header that changes from clear when full page background to a white menu header on subsequent pages.

This is operational on this site: Making Your Life Count

     * Controller for the pages
     */

    app.controller('PageCtrl', pageCtrl);

    function pageCtrl($scope, $location,$window, $anchorScroll, $http, $sce) {

        $scope.scrollPos = 0;
        //scroll to section_id
        //$scope.scrollTo = function(id) {
        //    var old = $location.hash();
        //    $location.hash(id);
        //    $anchorScroll();
        //    //reset to old to keep any additional routing logic from kicking in
        //    $location.hash(old);
        //};

        $scope.scrollTo = function(eID) {
                // This scrolling function
                // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript

                var startY = currentYPosition();
                var stopY = elmYPosition(eID);
                var distance = stopY > startY ? stopY - startY : startY - stopY;
                if (distance < 100) {
                    scrollTo(0, stopY); return;
                }
                var speed = Math.round(distance / 100);
                if (speed >= 20) speed = 20;
                var step = Math.round(distance / 25);
                var leapY = stopY > startY ? startY + step : startY - step;
                var timer = 0;
                if (stopY > startY) {
                    for ( var i=startY; i<stopY; i+=step ) {
                        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                        leapY += step; if (leapY > stopY) leapY = stopY; timer++;
                    } return;
                }
                for ( var i=startY; i>stopY; i-=step ) {
                    setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                    leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
                }

                function currentYPosition() {
                    // Firefox, Chrome, Opera, Safari
                    if (self.pageYOffset) return self.pageYOffset;
                    // Internet Explorer 6 - standards mode
                    if (document.documentElement && document.documentElement.scrollTop)
                        return document.documentElement.scrollTop;
                    // Internet Explorer 6, 7 and 8
                    if (document.body.scrollTop) return document.body.scrollTop;
                    return 0;
                }

                function elmYPosition(eID) {
                    var elm = document.getElementById(eID);
                    var y = elm.offsetTop;
                    var node = elm;
                    while (node.offsetParent && node.offsetParent != document.body) {
                        node = node.offsetParent;
                        y += node.offsetTop;
                    } return y;
                }

        };


        //render html code
        $scope.renderHtml = function (html_code) {
            return $sce.trustAsHtml(html_code);
        };

        //show or hide the jumbotron
        $scope.checkURl = function () {
            if ($location.url() == '/' || $location.url().indexOf('/#') > -1) return true;
            return false;
        };

        //footer class
        $scope.checkURlForFooter = function(){
            //console.log($window);
            if($location.url().indexOf('message') > -1 && $window.innerWidth > 450) return true;
            return false;
        }

        $scope.$on('$locationChangeStart', function(event) {
            $scope.checkbg = ! $scope.checkURl();
            //navigation highlight
            $scope.location = $location.url();
        });


        //accordion
        $scope.status = {
            isFirstOpen: true,
            isSecondOpen: false,
            isThirdOpen: false
        };

    }

Open in new window


Again, is this the best way to do this? Thanks.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

You right about what both does.
Why do you want to find a better way? What is the issue?
Avatar of Paul Konstanski

ASKER

There is no issue. It just looked pretty complex so I was wondering if there was an easier way to do it.
ASKER CERTIFIED SOLUTION
Avatar of BigRat
BigRat
Flag of France image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you for the insight... hopefully as I learn more about AngularJS, I'll better understand all you said. But at least it gives me some confidence with what I have.
I now have identified an issue related to one of the things that BigRat pointed out. On some pages where the footer is locked because of the function, it was causing the footer to overwrite certain parts of a page. So I've removed that particular function from firing. But now I have a different issue that I'm asking as a separate question.