Skip to content

Privacy-Parnoid-Vault/Next-Generation-Storefront-NGS

This branch is 158 commits behind neodigm/Next-Generation-Storefront-NGS:gh-pages.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d162573 · Nov 11, 2020

History

37 Commits
Oct 27, 2020
Oct 10, 2020
Aug 27, 2020
Jul 4, 2020
Nov 11, 2020
Nov 11, 2020
Nov 11, 2020
Oct 27, 2020
Oct 27, 2020
Nov 11, 2020
Sep 14, 2020
Oct 27, 2020
Oct 10, 2020
Oct 10, 2020

Repository files navigation

License: BSD

Next Generation Storefront NGS ✈️ Travel Booking UX


The Next Generation Storefront™ is a UX & data standard that empowers consumers to make informed flight reservation decisions. NGS presents like options from different airlines taking the guesswork out of the customer journey. It allows travelers to compare apples to apples when shopping online.

This document presents artifacts depicting an NGS implemented design for constructing an accessible, responsive, and progessive single-page booking app.

This design is a startup travel, expense, and itinerary concierge platform that manages flight, car, and hotel reservations for corporate events.

While Vue.js is mentioned explicitly, any modern framework(s) may be implemented (Micro Frontend).

.js
//  A popover is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.     
    var oPopOver = (function( _w, _d, _q ){  // Popover UX pattern
        let arPops = [], ePos, iOffTop=0, iOffLft=0;
        return {
            "init": function(){ // wire DOM events
                arPops= [].slice.call(_d.querySelectorAll(_q));
                _w.addEventListener("resize", oPopOver.closeAll);
                _w.addEventListener("scroll", oPopOver.closeAll); 
                _d.body.addEventListener("click", function( e ){  //  Outside Click close
                    var eTarget = e.target, bInside = false;
                    while( eTarget.tagName !== "HTML" ){
                        if( eTarget.dataset.popover ){ bInside = true; break; }
                        eTarget = eTarget.parentNode;
                    }
                    if( !bInside ){
                        oPopOver.closeAll();
                    }
                }, true);
            },
            "open": function(id, evPos){
                if( arPops.length == 0) return false;
                oPopOver.closeAll();
                ePos = evPos.currentTarget;
                var elPop = arPops.filter(function(el){
                    return ( el.id == id );
                })[0];
                iOffTop = Number(elPop.dataset.popoverPos.split("|")[0]);
                iOffLft = Number(elPop.dataset.popoverPos.split("|")[1]);
                elPop.dataset.popover = "true";
                elPop.style.left = oPopOver.position().left+"px";
                elPop.style.top = oPopOver.position().top+"px";
            },
            "closeAll": function(){
                if( arPops.length == 0) return false;
                arPops.filter(function(el){
                    el.dataset.popover = "false";
                });
            },
            "position": function(){
                var rec = ePos.getBoundingClientRect(),
                pxLft = _w.pageXOffset || _d.documentElement.scrollLeft,
                pxTop = _w.pageYOffset || _d.documentElement.scrollTop;
                return { top: (rec.top + pxTop + iOffTop), left: (rec.left + pxLft + iOffLft) }
            }
        }
    })(window, _d, "[data-popover]");

Portfolio Blog | 🚀 Résumé | NPM | Github | LinkedIn | Gists | Salesforce | Code Pen | Machvive | Arcanus 55 | Repl | Twitter | Keybase | Docker | W3C


Releases

No releases published

Packages

No packages published

Languages

  • Vue 100.0%