Visible scroll-top button and smooth scroll on privacy-policy page (Cloud-CV#111)

* Removed unnecessary changes

Removed build changes and privacy-policy UI changes.

* UI change

Added z-index value for scroll top button

* Added smooth scroll

implemented scrollOnTop method to add smooth scroll feature.

* Added Linting

Linted Privacy-policy component.ts file

* Removed unnecessary changes

deleted console.logs and commented line form scrollToTop method.

* Changed scrollToTop method

removed setInterval method and added scrollIntoView to scroll to top with smooth behaviour.

* Nav content smooth scroll

Added smooth scroll for the right side content on click of nav content.

* Fix Cloud-CV#107

Added scroll bar for nav content.
max height property has been  added  in nav container.

* Added integration tests.

Number of section title elements should be equal to the number of nav elements and should be greater than zero.

* Removed unnecessary test

component toBe(truthy) removed from the test

* Changed section title

Made section element title same as nav element title

* Added test for section title

Test checks the section title to be as same as nav element title or not.

* Fixes linting issue

fixed linting issues by adding whitespace properly

* changes for privacy-policy component tests

Made ALL_NAV and ALL_TARGET variable which gets initialized before each test.

* Added logs in test logic

Added console logs to show title of target and nav element in test-log file

* Added grep commands

Added grep commands in travis.yml file to show logs from test-log file

* Changed xvfb command

Added screen size and pixel depth in xvfb command to set specific screen size of virtual display.

* Hide Scroll button on Top

Added logic to change visibility if 'privacy-policy-title'
element gets out of the view.

Author: sanketbansal

.travis.yml

@@ -14,14 +14,17 @@ before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - export DEPLOY_DOMAIN=https://pr-${TRAVIS_PULL_REQUEST}-evalai.surge.sh
-  - sh -e /etc/init.d/xvfb start
+  - /sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16
 
 before_script:
   - npm install -g --silent @angular/cli
 
 script:
   - ng lint
   - ng test --watch=false --progress=false --code-coverage > test-log
+  - grep Executed test-log
+  - grep ERROR test-log
+  - grep LOGE test-log
   - ng e2e
   - ng build --prod
 

src/app/components/nav/footer/footer.component.scss

@@ -12,7 +12,7 @@
   overflow-x: hidden;
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  z-index: 10;
+  z-index: 0;
   margin-top:30px;
 
   &.at-home {

src/app/components/privacy-policy/privacy-policy.component.html

@@ -72,13 +72,13 @@
   </div>
   <div class="col-lg-3 col-md-4 col-sm-1 col-xs-1 privacy-empty-container">&nbsp;</div>
   <div class="privacy-content col-lg-9 col-md-8 col-sm-12 col-xs-12">
-    <img class="scroll-to-top" src="assets/images/arrow_scroll.png" (click)="scrollToTop();" />
+    <img class="scroll-to-top" *ngIf="visible" src="assets/images/arrow_scroll.png" (click)="scrollToTop();" />
     <div class="privacy-title" id="privacy-policy-title">Privacy Policy</div>
     <div class="privacy-section-content">
       This privacy policy has been compiled to better serve those who are concerned with how their 'Personally Identifiable Information' (PII) is being used online. PII, as described in US privacy law and information security, is information that can be used on its own or with other information to identify, contact, or locate a single person, or to identify an individual in context. Please read our privacy policy carefully to get a clear understanding of how we collect, use, protect or otherwise handle your Personally Identifiable Information in accordance with our website.
     </div>
     <div class="privacy-section-title">
-      What personal information do we collect from the people that visit our blog, website or app?
+      What personal information do we collect ?
     </div>
     <div class="privacy-section-content">
       When ordering or registering on our site, as appropriate, you may be asked to enter your name, email address, mailing address or other details to help you with your experience.
@@ -114,7 +114,7 @@
       Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow) that enables the site's or service provider's systems to recognize your browser and capture and remember certain information. For instance, we use cookies to help us remember and update the status of the submissions. They are also used to help us understand your preferences based on previous or current site activity, which enables us to provide you with improved services. We also use cookies to help us compile aggregate data about site traffic and site interaction so that we can offer better site experiences and tools in the future.
     </div>
     <div class="privacy-section-title">
-      We use cookies to:
+      Why do we use cookies?
     </div>
     <div class="privacy-section-content">
       <ul>
@@ -123,7 +123,7 @@
       You can choose to have your computer warn you each time a cookie is being sent, or you can choose to turn off all cookies. You do this through your browser settings. Since browser is a little different, look at your browser's Help Menu to learn the correct way to modify your cookies.
     </div>
     <div class="privacy-section-title">
-      If users disable cookies in their browser:
+      What happens if users disable cookies in their browser?
     </div>
     <div class="privacy-section-content">
       If you turn cookies off, Some of the features that make your site experience more efficient may not function properly.Some of the features that make your site experience more efficient and may not function properly.
@@ -150,7 +150,7 @@
       Google, as a third-party vendor, uses cookies to serve ads on our site. Google's use of the DART cookie enables it to serve ads to our users based on previous visits to our site and other sites on the Internet. Users may opt-out of the use of the DART cookie by visiting the Google Ad and Content Network privacy policy.
     </div>
     <div class="privacy-section-title">
-      We have implemented the following:
+      What have we implemented?
     </div>
     <div class="privacy-section-content">
       <ul>
@@ -159,7 +159,7 @@
       We, along with third-party vendors such as Google use first-party cookies (such as the Google Analytics cookies) and third-party cookies (such as the DoubleClick cookie) or other third-party identifiers together to compile data regarding user interactions with ad impressions and other ad service functions as they relate to our website.
     </div>
     <div class="privacy-section-title">
-      Opting out:
+      Opting out
     </div>
     <div class="privacy-section-content">
       Users can set preferences for how Google advertises to you using the Google Ad Settings page. Alternatively, you can opt out by visiting the Network Advertising Initiative Opt Out page or by using the Google Analytics Opt Out Browser add on.
@@ -172,7 +172,7 @@
       <a href="http://consumercal.org/california-online-privacy-protection-act-caloppa/#sthash.0FdRbT51.dpuf">http://consumercal.org/california-online-privacy-protection-act-caloppa/#sthash.0FdRbT51.dpuf</a>.
     </div>
     <div class="privacy-section-title">
-      According to CalOPPA, we agree to the following:
+      CalOPPA Terms
     </div>
     <div class="privacy-section-content">
       Users can visit our site anonymously.
@@ -208,7 +208,7 @@
       The Fair Information Practices Principles form the backbone of privacy law in the United States and the concepts they include have played a significant role in the development of data protection laws around the globe. Understanding the Fair Information Practice Principles and how they should be implemented is critical to comply with the various privacy laws that protect personal information.
     </div>
     <div class="privacy-section-title">
-      In order to be in line with Fair Information Practices we will take the following responsive action, should a data breach occur:
+      What responsive actions will we take, should a data breach occur?
     </div>
     <div class="privacy-section-content">
       We will notify you via email
@@ -224,15 +224,15 @@
       The CAN-SPAM Act is a law that sets the rules for commercial email, establishes requirements for commercial messages, gives recipients the right to have emails stopped from being sent to them, and spells out tough penalties for violations.
     </div>
     <div class="privacy-section-title">
-      We collect your email address in order to:
+      Why do we collect your email address?
     </div>
     <div class="privacy-section-content">
       <ul>
         <li>Send information, respond to inquiries, and/or other requests or questions</li>
       </ul>
     </div>
     <div class="privacy-section-title">
-      To be in accordance with CANSPAM, we agree to the following:
+      Why do we agree to, for being in accordance with CANSPAM?
     </div>
     <div class="privacy-section-content">
       If at any time you would like to unsubscribe from receiving future emails, you can email us at <a href="mailto:[email protected]">[email protected]</a> and we will promptly remove you from <b>ALL</b> correspondence.

src/app/components/privacy-policy/privacy-policy.component.scss

@@ -17,6 +17,7 @@
   position: relative;
   position: -webkit-sticky;
   position: sticky;
+    max-height: 65vh;
     ul {
       list-style-type: none;
       padding-left: 0;
@@ -54,6 +55,7 @@
       right: 4%;
       height: 50px;
       cursor: pointer;
+      z-index: 4 !important;
       &:hover {
         height: 55px;
       }

src/app/components/privacy-policy/privacy-policy.component.spec.ts

@@ -9,11 +9,17 @@ import { HeaderStaticComponent } from '../../components/nav/header-static/header
 import { ActivatedRoute, Router } from '@angular/router';
 import { FooterComponent } from '../../components/nav/footer/footer.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
 
 
 describe('PrivacyPolicyComponent', () => {
   let component: PrivacyPolicyComponent;
   let fixture: ComponentFixture<PrivacyPolicyComponent>;
+  let de: DebugElement;
+  let ALL_NAV;
+  let ALL_TARGET;
+
   const fakeActivatedRoute = {
     snapshot: { data: { } }
   } as ActivatedRoute;
@@ -35,10 +41,29 @@ describe('PrivacyPolicyComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PrivacyPolicyComponent);
     component = fixture.componentInstance;
+    de = fixture.debugElement;
     fixture.detectChanges();
+    ALL_NAV = de.queryAll(By.css('.privacy-nav'));
+    ALL_TARGET = de.queryAll(By.css('.privacy-section-title'));
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have equal number of section-title elements as nav elements', () => {
+
+    expect(ALL_NAV.length).toBeGreaterThan(0);
+    expect(ALL_TARGET.length).toBeGreaterThan(0);
+    expect(ALL_TARGET.length).toBe(ALL_NAV.length);
+  });
+
+  it('should have same section title as nav element title', () => {
+    ALL_NAV.forEach((ele, index) => {
+      console.log(`LOGE: TARGET: ${ALL_TARGET[index].nativeElement.innerText}`);
+      console.log(`LOGE: NAV: ${ele.nativeElement.innerText}`);
+      expect(ALL_TARGET[index].nativeElement.innerText).toBe(ele.nativeElement.innerText);
+    });
+  });
+
 });

src/app/components/privacy-policy/privacy-policy.component.ts

@@ -12,7 +12,11 @@ import { GlobalService } from '../../services/global.service';
 })
 export class PrivacyPolicyComponent implements OnInit {
 
-  constructor(@Inject(DOCUMENT) private document: Document, private globalService: GlobalService) { }
+  visible: boolean;
+
+  constructor(@Inject(DOCUMENT) private document: Document, private globalService: GlobalService) {
+    this.visible = false;
+  }
 
   /**
    * Checks if element is visible (called after scroll event)
@@ -85,6 +89,10 @@ export class PrivacyPolicyComponent implements OnInit {
    */
   @HostListener('window:scroll', [])
     onWindowScroll(): void {
+
+    const el = this.document.getElementById('privacy-policy-title');
+    this.visible = el.getBoundingClientRect().top < 0;
+
     if (!this.document['manuallyScrolling']) {
         const ALL_TARGETS = this.document.getElementsByClassName('privacy-section-title');
         const SELF = this;
@@ -119,19 +127,14 @@ export class PrivacyPolicyComponent implements OnInit {
 
     // Removing -nav from the id of the clicked element
     const ELEMENT_ID = ID.slice(0, -4);
-    this.document.getElementById(ELEMENT_ID).scrollIntoView();
+    this.document.getElementById(ELEMENT_ID).scrollIntoView({behavior: 'smooth'});
     this.highlightSectionTitle(ELEMENT_ID);
-    const SCROLLED_Y = window.scrollY;
-    if (SCROLLED_Y) {
-      const HEADER_HEIGHT = this.document.getElementById('header-static').clientHeight;
-      window.scroll(0, SCROLLED_Y - HEADER_HEIGHT);
-    }
   }
 
   /**
    * Scrolls to the top of the page
    */
   scrollToTop() {
-    this.document.body.scrollTop = this.document.documentElement.scrollTop = 0;
+    this.document.getElementById('privacy-policy-title').scrollIntoView({behavior: 'smooth'});
   }
 }