Skip to content

[WIP] pat-inject: Add configurable scroll behavior. #677

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 3 commits into from
Oct 1, 2019
Merged

[WIP] pat-inject: Add configurable scroll behavior. #677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1491f5f
autoformat
thet Oct 1, 2019
55766c8
remove unnecessary class pat-rich
thet Oct 1, 2019
3fd8d68
Add configurable scrolling behavior to pat-inject. pt.1
thet Oct 1, 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
1 change: 1 addition & 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 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.
A second pattern ``pat-fullscreen-close`` which is triggered on ``close-fullscreen`` CSS class allows for closing the fullscreen with custom buttons.
Expand Down
42 changes: 21 additions & 21 deletions src/pat/inject/_inject.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
.blue {
background-color: blue;
color: white;
background-color: blue;
color: white;
}

.red {
background-color: red;
color: white;
background-color: red;
color: white;
}

form.pat-inject,
fieldset.pat-inject {
&.executing {
[type="submit"] {
-ms-pointer-events: none;
-moz-pointer-events: none;
-webkit-pointer-events: none;
pointer-events: none;
opacity: 0.5;
}
}
&.executing {
[type="submit"] {
-ms-pointer-events: none;
-moz-pointer-events: none;
-webkit-pointer-events: none;
pointer-events: none;
opacity: 0.5;
}
}
}

a.pat-inject {
&.executing {
-ms-pointer-events: none;
-moz-pointer-events: none;
-webkit-pointer-events: none;
pointer-events: none;
opacity: 0.5;
}
}
&.executing {
-ms-pointer-events: none;
-moz-pointer-events: none;
-webkit-pointer-events: none;
pointer-events: none;
opacity: 0.5;
}
}
5 changes: 3 additions & 2 deletions src/pat/inject/_injection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;}
animation: spin 2s infinite linear;
}

/* @end */
/* @end */
14 changes: 7 additions & 7 deletions src/pat/inject/documentation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The possibilities don't stop here. Other applications of injection include injec
The most simple form of injection is a link which loads content when clicked:

<a href="demos/frobber.html#demo-content" class="pat-inject">Demo the frobber</a>

<section id="demo-content">
…
</section>
Expand All @@ -41,7 +41,7 @@ In another situation you may not want to replace content but add new content. Yo

<a href="latest-news.html#demo-content" class="pat-inject"
data-pat-inject="target: #news::before">Tell me more</a>

<section id="news">
…
</section>
Expand Down Expand Up @@ -103,7 +103,7 @@ In case one source element is to be used for both targets, it can be specified a
source: #src; target: #tgt2">
One source element for two targets.
</a>

<a class="pat-inject" href="sources.html#src"
data-pat-inject="target: #tgt1 &&
target: #tgt2">
Expand Down Expand Up @@ -259,10 +259,10 @@ A `autoload` may be delayed, by providing a `delay` argument in `data-pat-inject

<a href="sources.html#id" class="pat-inject"
data-pat-inject="trigger: autoload">Autoloads as soon as initialised</a>

<a href="sources.html#id" class="pat-inject"
data-pat-inject="trigger: autoload-visible">Autoloads as soon as visible</a>

<a href="sources.html#id" class="pat-inject"
data-pat-inject="trigger: autoload; delay: 2000">Autoloads 2 seconds after the page is initialised.</a>

Expand Down Expand Up @@ -317,12 +317,12 @@ It corresponds and is shorthand notation for:
After injection was triggered:

<a class="pat-inject" href="modal-source.html" data-pat-inject="type: modal">

<div id="modal" class="pat-modal">
Content from modal-source.html's ``body``.
</div>
</body>

<a class="pat-inject" href="modal-source.html" data-pat-inject="type: modal">

### Options reference
Expand Down
36 changes: 19 additions & 17 deletions src/pat/inject/history-inject-source.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gilgamesh Epos</title>
</head>
<body>

<article class="pat-rich" id="content">
<h3>Tablet 1</h3>
<p>
of him who knew the most of all men know;<br>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gilgamesh Epos</title>
</head>

<body>

<article class="pat-rich" id="content">
<h3>Tablet 1</h3>
<p>
of him who knew the most of all men know;<br>
who made the journey; heartbroken; reconciled;<br>
<br>
who knew the way things were before the Flood,<br>
Expand All @@ -20,15 +22,15 @@ <h3>Tablet 1</h3>
<br>
He built Uruk. He built the keeping place<br>
of Anu and Ishtar. The outer wall<br>
<br>
<br>
shines in the sun like brightest copper; the inner<br>
wall is beyond the imagining of kings.<br>
</p>
<p>
<em>— Gilgamesh</em>
</p>
</article>

</body>

</p>
<p>
<em>— Gilgamesh</em>
</p>
</article>

</body>
</html>
Loading