Comments (5)
Consider also a standard z-index value(s).
from neodigm55.
Reference Pop over UX pattern on TSK.
// 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.
/* __ __ __ __ __ __ __
/\ \/\ \ /\ \ /\ \/\ \ /\_\_\_\
\ \ \_\ \ \ \ \ \ \ \_\ \ \/_/\_\/_
\ \_____\ \ \_\ \ \_____\ /\_\/\_\
\/_____/ \/_/ \/_____/ \/_/\/_/ */
let oPopOver = ( ( _win, _doc, _qry ) => {
let arPops = [], ePos, iOffTop=0, iOffLft=0;
return { // Popover UX pattern
"init": function(){ // wire DOM events
arPops= [].slice.call(_doc.querySelectorAll( _qry ));
_win.addEventListener("resize", oPopOver.closeAll);
_win.addEventListener("scroll", oPopOver.closeAll);
_doc.body.addEventListener("click", function( e ){ // 👁️ Outside Click
let eTarget = e.target, bInside = false;
while( eTarget.tagName !== "HTML" ){
if( eTarget.dataset.popover ){ bInside = true; break; }
eTarget = eTarget.parentNode;
}
if( !bInside ){ // Tapped Outside of Popover
oPopOver.closeAll();
}
}, true);
},
"open": function(id, evPos){ // Open a single Popover
if( arPops.length == 0) return false;
oPopOver.closeAll();
ePos = evPos.currentTarget;
let 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"; // Open and Active
elPop.style.left = oPopOver.position().left+"px";
elPop.style.top = oPopOver.position().top+"px";
},
"closeAll": function(){ // Close all Popovers
if( arPops.length == 0) return false;
arPops.map(function(el){
el.dataset.popover = "false";
});
},
"position": function(){ // Determine Popover position
let rec = ePos.getBoundingClientRect(),
pxLft = _win.pageXOffset || _doc.documentElement.scrollLeft,
pxTop = _win.pageYOffset || _doc.documentElement.scrollTop;
return { top: (rec.top + pxTop + iOffTop), left: (rec.left + pxLft + iOffLft) }
}
}
})(window, document, "[data-popover]"); // Declarative implementation
from neodigm55.
While this component will be very useful on its own, much of its value comes from its reuse inside other new components, such as drowdown, listview, guided tour (widget), and treeview.
Now available in alpha branch under feature flag.
from neodigm55.
Update: Poptart is now available in v3.0 alpha. Testing continues.
from neodigm55.
This is complete in v3.0. The wiki and landing page have been updated.
from neodigm55.
Related Issues (20)
- Neodigm Marquee breaks the Neodigm Carousel component layout HOT 1
- Neodigm Keylime | Event Emitter HOT 1
- All Components | Standardize data attrib -hover (no more mouseenter or mouseover) HOT 1
- All Components | Retire srcElement logic HOT 2
- Neodigm SodaPop | Life Cycle Events HOT 4
- Neodigm PopTart | Specific On Close Life Cycle Callback not working HOT 1
- Neodigm Poptart | Optional Hover dismiss behavior - Closed when mouse is off both bound element and Poptart HOT 2
- Promote Release Candidate 3.0 HOT 1
- Neodigm Marque | Calling init seams to speed up the display HOT 2
- Neodigm Utils | New typeOn function. Progressive text. HOT 5
- Neodigm Carousel | getName method HOT 2
- Neodigm Soda Pop, Toast, Enchanted CTA, Pop Tart, ActIcon, Wired4Sound, and KPI - Right Click and Scroll into View Events
- Neodigm SodaPop | Create a ModalWarn life cycle event HOT 1
- Neodigm Utils Shake | Accept an Element ref or a query string HOT 4
- Neodigm Tulip - The tooltip flutters when hovering over the source element and where the arrow overlaps. HOT 3
- Neodigm | Universal Click / Hover event emitter HOT 1
- Neodigm Carousel | The life cycle events should support named panels (pages). HOT 2
- Neodigm Content | Sample UX implementations HOT 2
- Neodigm Agent | Widget requests and metering HOT 5
- Neodigm Picnic | New Component AKA Simple Table HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from neodigm55.