Skip to content

Fix scrolling behavior, add getCSSValue #694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 27, 2019
Merged

Fix scrolling behavior, add getCSSValue #694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f626667
upgrade moment to avoid duplicate dependencies
thet Nov 26, 2019
32ac72f
Fix scrolling behavior, add getCSSValue
thet Nov 27, 2019
069f141
update
pilz Nov 27, 2019
294809d
updated lock
pilz Nov 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
Features
~~~~~~~~

- Add ``utils.getCSSValue`` for retrieving CSS property values for DOM nodes.
- Add configurable scrolling behavior to pat-inject.
- Add ``webpack-visualizer-plugin`` for analyzation of generated bundles.
- Add ``pat-fullscreen`` pattern to allow any element to be displayed in fullscreen-mode.
Expand All @@ -13,6 +14,7 @@ Features
- Integrated pat-display-time from https://github.com/ploneintranet/pat-display-time
- Fixed an issue with pat-scroll when placed on an item without a href
- Fixed an issue with pat-autofocus that would set focus on hidden items
- Fixed an issue with pat-inject scroll that would scroll too much (#694)

Fixes
~~~~~
Expand Down
6 changes: 3 additions & 3 deletions npm-shrinkwrap.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"logging": "https://github.com/Patternslib/logging.git",
"masonry-layout": "4.2.0",
"modernizr": "^3.7.1",
"moment": "2.23.0",
"moment": "2.24.0",
"moment-timezone": "0.5.13",
"parsleyjs": "2.7.2",
"photoswipe": "4.1.3",
Expand Down
15 changes: 13 additions & 2 deletions src/core/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,6 +459,17 @@ define([
return $relatives;
}

function getCSSValue(el, property, asFloat) {
/* Return a CSS property value for a given DOM node.
* Optionally parse as float.
*/
var value = window.getComputedStyle(el).getPropertyValue(property);
if (asFloat) {
value = parseFloat(value) || 0.0;
}
return value;
}

var utils = {
// pattern pimping - own module?
jqueryPlugin: jqueryPlugin,
Expand All @@ -477,8 +488,8 @@ define([
isElementInViewport: isElementInViewport,
hasValue: hasValue,
parseTime: parseTime,
findRelatives: findRelatives

findRelatives: findRelatives,
getCSSValue: getCSSValue
};
return utils;
});
146 changes: 85 additions & 61 deletions src/pat/inject/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
</head>

<body>
<article>

<section>
<p>
In this example, a <a href="inject-sources.html" target="new">Single HTML source</a> is used for various injections.
</p>
Expand Down Expand Up @@ -62,86 +63,94 @@
</span>
</li>
</ul>
</article>


<div class="poems">
<article class="poem" id="pos-1">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
<article class="poem" id="pos-2">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
<article class="poem" id="pos-3">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
</div>

<article>

<div class="poems">
<article class="poem" id="pos-1">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
<article class="poem" id="pos-2">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
<article class="poem" id="pos-3">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
</div>

</section>

<section>
<h2>Inject and scroll demos</h2>
<ul>
<li>
<a href="inject-text.html" class="pat-inject" data-pat-inject="scroll:#scroll-target">1a) "scroll:#scroll-target": Load text into body and scoll to #scroll-target</a>
<a href="index.html" class="pat-inject" data-pat-inject="scroll:#demo-history">1) Re-inject this entire page and scroll to the history example</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;inject-text.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:#scroll-target&quot;&gt;
&lt;a href=&quot;index.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:#demo-history&quot;&gt;
</code></em>
</li>
<li>
<a href="inject-sources.html" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #dieu-nu-p-1">1b) Inject 'Cocteau' in the frame below and scroll directly to the first paragraph.</a>
<a href="index.html" class="pat-inject" data-pat-inject="scroll:top">2) Re-inject this entire page and scroll to the top</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;inject-sources.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;target:#pos-4; scroll: #dieu-nu-p-1&quot;&gt;
&lt;a href=&quot;index.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:top&quot;&gt;
</code></em>
</li>

<li>
<a href="index.html" class="pat-inject" data-pat-inject="scroll:#demo-history">1c) "scroll:#demo-history" Re-inject this entire page and scroll to the history example</a>
<a href="inject-text.html" class="pat-inject" data-pat-inject="scroll:#scroll-target">3) Load text into body and scoll to #scroll-target</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;index.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:#demo-history&quot;&gt;
&lt;a href=&quot;inject-text.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:#scroll-target&quot;&gt;
</code></em>
</li>
<li>
<a href="index.html" class="pat-inject" data-pat-inject="scroll:top">2) "scroll:top" Re-inject this entire page and scroll to the top</a>
<a href="inject-text.html#scroll-target" class="pat-inject" data-pat-inject="scroll:target">4) Scroll to the target defined in the URL part as anchor-reference</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;index.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:top&quot;&gt;
&lt;a href=&quot;inject-text.html#pos-4&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:target&quot;&gt;
</code></em>
</li>
<li>
<a href="inject-text.html#pos-4" class="pat-inject" data-pat-inject="scroll:target">3) "scroll:target" Scroll to the target defined in the URL part as anchor-reference</a>
<a href="inject-text.html" class="pat-inject" data-pat-inject="scroll:none">5) "scroll:none" Do not scroll (default behavior)</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;inject-text.html#pos-4&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:target&quot;&gt;
&lt;a href=&quot;inject-text.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:none&quot;&gt;
</code></em>
</li>


<li>
<a href="inject-text.html" class="pat-inject" data-pat-inject="scroll:none">4) "scroll:none" Do not scroll (default behavior)</a>
<a href="inject-sources.html#pos-3" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #dieu-nu-p-1">6) Inject 'Cocteau' in the frame below and scroll to the first paragraph.</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;inject-text.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;scroll:none&quot;&gt;
&lt;a href=&quot;inject-sources.html#pos-3&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;target:#pos-4; scroll: #dieu-nu-p-1&quot;&gt;
</code></em>
</li>
<li>
<a href="inject-sources.html" class="pat-inject" data-pat-inject="target:#pos-4; scroll: #pos-2">7) Inject all content from source in the frame below and scroll to the second article.</a>
<em class="iconified icon-info-circle pat-tooltip" data-pat-tooltip="trigger: click; source: content; class: large code"><code class="pat-syntax-highlight">
&lt;a href=&quot;inject-sources.html&quot; class=&quot;pat-inject&quot; data-pat-inject=&quot;target:#pos-4; scroll: #pos-2&quot;&gt;
</code></em>
</li>

</ul>
</article>

<div class="poems">
<article class="poem cols-full" id="pos-4">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
</div>

<div class="poems">
<article class="poem cols-full" id="pos-5">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
</div>

<article>

<div class="poems">
<article class="poem cols-full" id="pos-4">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
</div>

<div class="poems">
<article class="poem cols-full" id="pos-5">
<p>
<strong class="placeholder">?</strong>
</p>
</article>
</div>

<ul>
<li>
Place "Wilde in the frame above when <a href="inject-sources.html#pos-2" class="pat-inject" data-pat-inject="trigger: autoload-visible; target: #pos-5">this link</a> appears in view.
Expand All @@ -150,16 +159,18 @@ <h2>Inject and scroll demos</h2>
<a href="inject-sources#pos-2" class="pat-inject" data-pat-inject="scroll: target">Place "Cocteau" in the second frame on this page and scroll towards it.</a>
</li>
</ul>
</article>

<article id="demo-history">
</section>


<section id="demo-history">
<h3>Inject history example</h3>
<p><a href="history-inject-source.html#content" class="pat-inject" data-pat-inject="history:record; source: #content; target: #history-inject-target">Inject some text and record the history</a></p>

<p id="history-inject-target"><i>here goes the injection</i></p>
</article>
</section>

<article>
<section>
<h3>Inject autosubmit with form using GET and POST</h3>

<form method="post" class="pat-inject pat-autosubmit" data-pat-inject="history:record" action="inject-form.html?approach=questionable#form-submit-target">
Expand All @@ -170,9 +181,18 @@ <h3>Inject autosubmit with form using GET and POST</h3>
<p id="form-submit-target">
<i>here goes the injection</i>
</p>
</article>
</section>

<style>

body {
font-size: 16px;
}

section {
margin: 0 0 4em 0;
}

.poems {
font-family: georgia;
margin-bottom: 2em;
Expand Down Expand Up @@ -216,7 +236,7 @@ <h3>Inject autosubmit with form using GET and POST</h3>
background-color: #efefef;
box-shadow: inset 0 0 4em rgba(0, 0, 0, 0.3);
padding: 55px 20px 55px;
font-size: 0.8em;
font-size: 1em;
line-height: 180%;
height: 310px;
overflow: auto;
Expand All @@ -236,7 +256,11 @@ <h3>Inject autosubmit with form using GET and POST</h3>

.poems article * {
text-align: center;
margin-bottom: 1em;
margin-bottom: 2em;
}

.poems article {
margin-bottom: 4em;
}

.poems article h3 {
Expand Down
3 changes: 3 additions & 0 deletions src/pat/inject/inject-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
</head>

<body>
<style type="text/css" media="screen">
#pos-1 { margin-top: 60vh; }
</style>
<article id="pos-1">
<h3>Immer wieder</h3>
<p>
Expand Down
60 changes: 53 additions & 7 deletions src/pat/inject/inject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,14 +489,60 @@ define([


if (cfg.scroll && cfg.scroll !== 'none') {
if (cfg.scroll === 'top') {
var scroll_container = $(cfg.target).parents().addBack().filter(':scrollable');
scroll_container = scroll_container.length ? scroll_container : $(window);
scroll_container[0].scrollTo(0, 0);
} else if (cfg.scroll === 'target') {
$(cfg.target)[0].scrollIntoView();
var scroll_container = cfg.$target.parents().addBack().filter(':scrollable');
scroll_container = scroll_container.length ? scroll_container[0] : window;

// default for scroll===top
var top = 0;
var left = 0;

if (cfg.scroll !== 'top') {
var scroll_target;
if (cfg.scroll === 'target') {
scroll_target = cfg.$target[0];
} else {
scroll_target = $injected.filter(cfg.scroll)[0];
}

// Get the reference element to which against we calculate
// the relative position of the target.
// In case of a scroll container of window, we do not have
// getBoundingClientRect method, so get the body instead.
var scroll_container_ref = scroll_container;
if (scroll_container_ref === window) {
scroll_container_ref = document.body;
}

// Calculate absolute [¹] position difference between
// scroll_container and scroll_target.
// Substract the container's border from the scrolling
// value, as this one isn't respected by
// getBoundingClientRect [²] and would lead to covered
// items [³].
// ¹) so that it doesn't make a difference, if the element
// is below or above the scrolling container. We just need
// to know the absolute difference.
// ²) Calculations are based from the viewport.
// ³) See:
// https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
left = Math.abs(
scroll_target.getBoundingClientRect().left
- scroll_container_ref.getBoundingClientRect().left
- utils.getCSSValue(scroll_container, 'border-left', true)
);
top = Math.abs(
scroll_target.getBoundingClientRect().top
- scroll_container_ref.getBoundingClientRect().top
- utils.getCSSValue(scroll_container, 'border-top', true)
);

}
if (scroll_container === window) {
scroll_container.scrollTo(left, top);
} else {
$(cfg.scroll)[0].scrollIntoView();
scroll_container.scrollLeft = left;
scroll_container.scrollTop = top;
}
}

Expand Down
Loading