euantorano/ungleich-staticcms
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

import popper.js

Browse source 
Signed-off-by: Nico Schottelius <nico@nico-notebook.schottelius.org>
This commit is contained in:
Nico Schottelius 2019-12-31 01:21:21 +01:00
commit 16fb2bb919
241 changed files with 34099 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/u/static/popper.js-1.16.0/docs/_includes/example10-code.html Normal file
View file

@ -0,0 +1,13 @@
<h2 id="example10" tabindex="0">Popper on your side!</h2>
<p id="example10Title">
What are you waiting for? Select a popper from that dropdown.<br />
Placing poppers around elements is just that easy!
</p>
<div id="example10code">
{% highlight javascript %}
var popper = new Popper(referenceElement, onPopper, {
placement: 'position'
});
{% endhighlight %}
</div>

78
assets/u/static/popper.js-1.16.0/docs/_includes/example10.html Normal file
View file

@ -0,0 +1,78 @@
<div class="rel" id="example10reference1">
<p class="bold">Hey!</p>
<p class="thin">Choose where to put your popper!</p>
<select id="example10positionSelector">
<option value="top">Top</option>
<option value="right">Right</option>
<option value="bottom">Bottom</option>
<option value="left">Left</option>
</select>
</div>
<div class="popper" width="200" id="example10popper1">
<p class="bold">Popper on <b id="example10currentPosition" class="currentPosition"></b></p>
<div class="popper__arrow" x-arrow></div>
</div>
<style>
#example10positionSelector {
margin-top: 1em;
}
@media (max-width: 460px) {
#example10popper1 {
max-width: 100px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var index = 0;
var popper;
var code = $('#example10code').html();
$('#example10positionSelector').on('change', attachPopper).trigger('change');
// Stop autoflip popper when the user click on the dropdown
$('#example10positionSelector').on('click', function() {
clearInterval(autoPopperFunctionTimer);
});
var autoPopperFunctionTimer = setInterval(function() {
if (index === 0) {
$('#example10positionSelector').val('top');
$('#example10positionSelector').trigger('change');
index++;
} else if (index === 1) {
$('#example10positionSelector').val('right');
$('#example10positionSelector').trigger('change');
index++;
} else if (index === 2) {
$('#example10positionSelector').val('bottom');
$('#example10positionSelector').trigger('change');
index++;
} else {
$('#example10positionSelector').val('left');
$('#example10positionSelector').trigger('change');
index = 0;
}
}, 4000);
function attachPopper(evt) {
position = evt.target.value;
//Position of the popper
$('#example10code').html(code.replace('position', position));
$('.currentPosition').text(position);
popper && popper.destroy();
popper = new Popper(example10reference1, example10popper1, {
placement: position,
boundariesElement: example10reference1.parentNode
});
}
});
</script>

13
assets/u/static/popper.js-1.16.0/docs/_includes/example10t-code.html Normal file
View file

@ -0,0 +1,13 @@
<h2 id="example10" tabindex="0"></h2>
<p id="example10Title">
The available placements are the same you are used to with Popper.js:
</p>
<div id="example10code">
{% highlight javascript %}
new Tooltip(referenceElement, {
placement: 'top', // or bottom, left, right, and variations
title: "Top"
});
{% endhighlight %}
</div>

30
assets/u/static/popper.js-1.16.0/docs/_includes/example10t.html Normal file
View file

@ -0,0 +1,30 @@
<div class="rel" id="example10treference1">
<p class="bold">It just works</p>
<p class="thin">Hover me to see 4 tooltips!</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var index = 0;
var popper;
new Tooltip(document.getElementById("example10treference1"), {
placement: "top",
title: "Top",
});
new Tooltip(document.getElementById("example10treference1"), {
placement: "right",
title: "Right",
});
new Tooltip(document.getElementById("example10treference1"), {
placement: "bottom",
title: "Bottom",
});
new Tooltip(document.getElementById("example10treference1"), {
placement: "left",
title: "Left",
});
});
</script>

18
assets/u/static/popper.js-1.16.0/docs/_includes/example20-code.html Executable file
View file

@ -0,0 +1,18 @@
<h2 id="example3" tabindex="0">Custom flip behavior</h2>
<p>
Try dragging the reference element on the left side, its popper will move on its bottom edge.
Then, try to move the reference element on the bottom left corner, it will move on its top edge.
</p>
{% highlight javascript %}
var popper = new Popper(referenceElement, onLeftPopper, {
placement: 'left',
modifiers: {
flip: {
behavior: ['left', 'bottom', 'top']
},
preventOverflow: {
boundariesElement: container,
},
},
});
{% endhighlight %}

54
assets/u/static/popper.js-1.16.0/docs/_includes/example20.html Executable file
View file

@ -0,0 +1,54 @@
<div class="rel" id="example3reference1">
<p class="bold">Drag me</p>
<p class="thin">on the edges</p>
</div>
<div class="popper" id="example3popper1">
<p class="bold">Flipping popper</p>
<p class="thin">which never flips to right</p>
<div class="popper__arrow" x-arrow></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var example3popper1inst = new Popper(example3reference1, example3popper1, {
placement: 'left',
modifiers: {
flip: {
behavior: ['left', 'bottom', 'top'],
},
preventOverflow: {
boundariesElement: example3reference1.parentNode,
},
}
});
interact('#example3reference1').draggable({
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
onmove: dragMoveListener
});
var x = 0, y = 0;
function dragMoveListener (event) {
target = event.target,
// keep the dragged position in the data-x/data-y attributes
x += event.dx,
y += event.dy;
// translate the element
target.style.top = y + 'px';
target.style.left = x + 'px'
example3popper1inst.update();
}
}, false);
</script>
<style>
#example3reference1:hover {
background: rgba(255,255,255,0.2);
}
</style>

14
assets/u/static/popper.js-1.16.0/docs/_includes/example20t-code.html Normal file
View file

@ -0,0 +1,14 @@
<h2 id="example20" tabindex="0"></h2>
<p id="example20Title">
You can show, hide or toggle a tooltip programmatically:
</p>
<div id="example10code">
{% highlight javascript %}
const instance = new Tooltip(referenceElement, {
title: "Hey there",
trigger: "click",
});
instance.show();
{% endhighlight %}
</div>

18
assets/u/static/popper.js-1.16.0/docs/_includes/example20t.html Normal file
View file

@ -0,0 +1,18 @@
<div class="rel" id="example20treference1" style="width: 40%">
<p class="bold">Manually triggered</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var index = 0;
var popper;
var instance = new Tooltip(document.getElementById("example20treference1"), {
title: "Hey there",
trigger: "click",
});
instance.show();
});
</script>

10
assets/u/static/popper.js-1.16.0/docs/_includes/example30-code.html Executable file
View file

@ -0,0 +1,10 @@
<h2 id="example2" tabindex="0">Popper on scrolling container</h2>
<p>
In this example we have a relative div which contains a div with <code>overflow: scroll</code>.<br>
Inside it, there are our popper and reference elements.
</p>
{% highlight javascript %}
var popper = new Popper(referenceElement, onLeftPopper, {
placement: 'left',
});
{% endhighlight %}

44
assets/u/static/popper.js-1.16.0/docs/_includes/example30.html Executable file
View file

@ -0,0 +1,44 @@
<div class="example2__fake-body nano">
<div class="nano-content">
<div class="example2__scrol-box">
<div class="rel" id="example2reference1">
<p class="bold">Scroll me</p>
<p class="thin">up and down</p>
</div>
<div class="popper" id="example2popper1">
<p class="bold">I follow it</p>
<p class="thin">staying between boundaries</p>
<div class="popper__arrow" x-arrow></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var fakeBody = document.querySelector('.example2__fake-body');
$('.nano').nanoScroller({ scrollTop: fakeBody.clientHeight / 2 });
setTimeout(function() {
var pop1 = new Popper(example2reference1, example2popper1, {
placement: 'left',
});
}, 1000);
}, false);
</script>
<style>
.example2__fake-body {
overflow-x: scroll;
height: 450px;
flex: 1;
}
.example2__scrol-box {
height: 200%;
display: flex;
align-content: center;
align-items: center;
}
</style>

14
assets/u/static/popper.js-1.16.0/docs/_includes/example40-code.html Executable file
View file

@ -0,0 +1,14 @@
<h2 id="example4" tabindex="0">Shifted poppers</h2>
<p>
Shift your poppers on start or end of its reference element side.
</p>
{% highlight javascript %}
var shiftStart = new Popper(referenceElement, shiftStartPopper, {
placement: 'left-start',
});
var shiftEnd = new Popper(referenceElement, shiftEndPopper, {
placement: 'bottom-end',
});
{% endhighlight %}

38
assets/u/static/popper.js-1.16.0/docs/_includes/example40.html Executable file
View file

@ -0,0 +1,38 @@
<div class="rel" id="example4reference1">
<p class="bold">Reference</p>
</div>
<div class="popper" id="example4popper1">
<p class="bold">Shifted popper</p>
<p class="thin">on start</p>
<div class="popper__arrow" x-arrow></div>
</div>
<div class="popper" id="example4popper2">
<p class="bold">Shifted popper</p>
<p class="thin">on end</p>
<div class="popper__arrow" x-arrow></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var shiftStart = new Popper(example4reference1, example4popper1, {
placement: 'left-start',
});
var shiftEnd = new Popper(example4reference1, example4popper2, {
placement: 'bottom-end',
});
}, false);
</script>
<style>
#example4popper1,
#example4popper2 {
width: 100px;
}
#example4popper1 {
height: 150px;
}
</style>

11
assets/u/static/popper.js-1.16.0/docs/_includes/example50-code.html Executable file
View file

@ -0,0 +1,11 @@
<h2 id="example5" tabindex="0">Viewport boundaries</h2>
<p>
By default, poppers use as boundaries the page viewport.<br>
Scroll the page to see the popper flip when hits the page viewport margins.
</p>
{% highlight javascript %}
var popper = new Popper(referenceElement, onBottomPopper, {
placement: 'bottom'
});
{% endhighlight %}

18
assets/u/static/popper.js-1.16.0/docs/_includes/example50.html Executable file
View file

@ -0,0 +1,18 @@
<div class="rel" id="example5reference1">
<p class="bold">Pop</p>
<p class="thin">on the bottom</p>
</div>
<div class="popper" id="example5popper1">
<p class="bold">Popper on bottom</p>
<p class="thin">Flips when hits viewport</p>
<div class="popper__arrow" x-arrow></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var pop1 = new Popper(example5reference1, example5popper1, {
placement: 'bottom'
});
}, false);
</script>

27
assets/u/static/popper.js-1.16.0/docs/_includes/footer.html Executable file
View file

@ -0,0 +1,27 @@
<!-- Footer -->
<footer id="footer">
<ul class="icons">
{% for socloc in site.social %}
{% if socloc[1] %}
{% if socloc[0] == 'email' %}
<li><a target="_blank" href="{{ socloc[1] }}" class="icon fa-envelope-o"
><span class="label">E-mail</span></a></li>
{% else %}
<li><a target="_blank" href="{{ socloc[1] }}" class="icon fa-{{ socloc[0] }}"
><span class="label">{{ socloc[0] }}</span></a></li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
<ul class="copyright">
<li>&copy; {% assign thisyear = site.time | date: "%Y" %}
{% if site.first_published %}
{% capture diff %}{{ site.first_published | minus:thisyear }}{% endcapture %}
{% if diff contains '-' %}{{ site.first_published }},{% endif %}
{% endif %}
{{ thisyear }}
{% if site.owner %}{{ site.owner }}{% else %}{{ site.title }}{% endif %}</li>
<li>Design: <a href="https://html5up.net" target="_blank">HTML5 UP</a></li>
<li>Built with: <a href="https://jekyllrb.com" target="_blank">Jekyll</a></li>
</ul>
</footer>

29
assets/u/static/popper.js-1.16.0/docs/_includes/head.html Executable file
View file

@ -0,0 +1,29 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description | strip_html | strip_newlines }}{% endif %}">
<!--[if lte IE 8]><script src="{{ "/js/ie/html5shiv.js" | prepend: site.baseurl }}"></script><![endif]-->
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="stylesheet" href="{{ '/css/main.css' | prepend: site.baseurl }}">
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "/css/ie8.css" | prepend: site.baseurl }}" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{ "/css/ie9.css" | prepend: site.baseurl }}" /><![endif]-->
<script>
if (window.location.href.indexOf('github.io/popper.js') !== -1) {
window.location.href = "{{site.url}}" + "{{page.url}}"
}
</script>
<meta property="og:title" content="{{ site.title | escape }}">
<meta property="og:description" content="{{ site.description | strip_html | strip_newlines }}">
<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<meta property="og:image" content="{{ '/images/logo.png' | prepend: site.baseurl | prepend: site.url }}">
<!-- favicon -->
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="shortcut icon" href="favicon.ico">
</head>

64
assets/u/static/popper.js-1.16.0/docs/_includes/header.html Executable file
View file

@ -0,0 +1,64 @@
<!-- Header -->
<header id="header"{% if page.layout == 'landing' %} class="alt"{% endif %}>
<h1 id="header-title" >
<a href="{{ site.baseurl }}/index.html">{{ site.title }}</a>
</h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<!--
{% for my_page in site.pages %}
{% if my_page.title %}
<li><a href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a></li>
{% endif %}
{% endfor %} -->
<li class="nav-item dropdown">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="popperJs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Popper.js
</button>
<div class="dropdown-menu" aria-labelledby="popperJs">
<a class="dropdown-item" href="/index.html#example10">Examples</a>
<a class="dropdown-item" href="/popper-documentation.html">Docs</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="tooltipJs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tooltip.js
</button>
<div class="dropdown-menu" aria-labelledby="tooltipJs">
<a class="dropdown-item" href="/tooltip-examples.html">Examples</a>
<a class="dropdown-item" href="/tooltip-documentation.html">Docs</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="usedBy" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Used in
</button>
<div class="dropdown-menu" aria-labelledby="usedBy">
<a class="dropdown-item" href="/themes.html">UI Kits & Tools</a>
<a class="dropdown-item" href="/themes.html#design-systems">Design Systems</a>
<a class="dropdown-item" href="/themes.html#free-dashboards">Free Admin & Dashboards</a>
</div>
</div>
</li>
<li><a href="{{ site.github }}" class="icon fa-github"> GitHub</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="popper" style="width: auto; height: 50px;" id="title-popper">
<iframe src="//ghbtns.com/github-btn.html?user=FezVrasta&amp;repo=popper.js&amp;type=star&amp;count=true&amp;size=large" style="height: 30px;width: 145px;"></iframe>
<div class="popper__arrow" x-arrow></div>
</div>
</header>

1086
assets/u/static/popper.js-1.16.0/docs/_includes/popper-documentation.md Normal file
View file

File diff suppressed because it is too large Load diff

27
assets/u/static/popper.js-1.16.0/docs/_includes/scripts.html Executable file
View file

@ -0,0 +1,27 @@
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/util.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
<!--[if lte IE 8]><script src="js/ie/respond.min.js"></script><![endif]-->
<script src="https://unpkg.com/popper.js@^1"></script>
<script src="https://unpkg.com/tooltip.js@^1"></script>
<script src="js/jquery.nanoscroller.js"></script>
<script>
$('h1[id], h2[id], h3[id], h4[id], h5[id]').each(function(i, el) {
var name = $(el).prev().find('a[name]:not([href])').attr('name');
if (!name) {
name = $(el).attr('id');
$(el).attr('id', '');
$(el).prepend('<a name="' + name + '"></a>')
}
$(el).wrap('<a class="anchor-wrapper" href="#' + name + '"></a>')
$(el).append('<i class="fa fa-link link-anchor" />');
});
</script>
<script src="js/main.js"></script>

84
assets/u/static/popper.js-1.16.0/docs/_includes/tooltip-documentation.md Normal file
View file

@ -0,0 +1,84 @@
<a name="Tooltip"></a>
## Tooltip
**Kind**: global class
* [Tooltip](#Tooltip)
* [new Tooltip(reference, options)](#new_Tooltip_new)
* _instance_
* [.show()](#Tooltip+show)
* [.hide()](#Tooltip+hide)
* [.dispose()](#Tooltip+dispose)
* [.toggle()](#Tooltip+toggle)
* [.updateTitleContent(title)](#Tooltip+updateTitleContent)
* _static_
* [.TitleFunction](#Tooltip.TitleFunction) ⇒ <code>String</code>
<a name="new_Tooltip_new"></a>
### new Tooltip(reference, options)
Create a new Tooltip.js instance
**Returns**: <code>Object</code> - instance - The generated tooltip instance
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| reference | <code>HTMLElement</code> | | The DOM node used as reference of the tooltip (it can be a jQuery element). |
| options | <code>Object</code> | | |
| options.placement | <code>String</code> | <code>&#x27;top&#x27;</code> | Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)` |
| [options.arrowSelector] | <code>String</code> | <code>&#x27;.tooltip-arrow, .tooltip__arrow&#x27;</code> | className used to locate the DOM arrow element in the tooltip. |
| [options.innerSelector] | <code>String</code> | <code>&#x27;.tooltip-inner, .tooltip__inner&#x27;</code> | className used to locate the DOM inner element in the tooltip. |
| options.container | <code>HTMLElement</code> \| <code>String</code> \| <code>false</code> | <code>false</code> | Append the tooltip to a specific element. |
| options.delay | <code>Number</code> \| <code>Object</code> | <code>0</code> | Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `{ show: 500, hide: 100 }` |
| options.html | <code>Boolean</code> | <code>false</code> | Insert HTML into the tooltip. If false, the content will inserted with `textContent`. |
| [options.template] | <code>String</code> | <code>&#x27;&lt;div class=&quot;tooltip&quot; role=&quot;tooltip&quot;&gt;&lt;div class=&quot;tooltip-arrow&quot;&gt;&lt;/div&gt;&lt;div class=&quot;tooltip-inner&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;</code> | Base HTML to used when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner` or `.tooltip__inner`. `.tooltip-arrow` or `.tooltip__arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class. |
| options.title | <code>String</code> \| <code>HTMLElement</code> \| <code>TitleFunction</code> | <code>&#x27;&#x27;</code> | Default title value if `title` attribute isn't present. |
| [options.trigger] | <code>String</code> | <code>&#x27;hover focus&#x27;</code> | How tooltip is triggered - click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. |
| options.closeOnClickOutside | <code>Boolean</code> | <code>false</code> | Close a popper on click outside of the popper and reference element. This has effect only when options.trigger is 'click'. |
| options.boundariesElement | <code>String</code> \| <code>HTMLElement</code> | | The element used as boundaries for the tooltip. For more information refer to Popper.js' [boundariesElement docs](https://popper.js.org/popper-documentation.html) |
| options.offset | <code>Number</code> \| <code>String</code> | <code>0</code> | Offset of the tooltip relative to its reference. For more information refer to Popper.js' [offset docs](https://popper.js.org/popper-documentation.html) |
| options.popperOptions | <code>Object</code> | <code>{}</code> | Popper options, will be passed directly to popper instance. For more information refer to Popper.js' [options docs](https://popper.js.org/popper-documentation.html) |
<a name="Tooltip+show"></a>
### tooltip.show()
Reveals an element's tooltip. This is considered a "manual" triggering of the tooltip.
Tooltips with zero-length titles are never displayed.
**Kind**: instance method of [<code>Tooltip</code>](#Tooltip)
<a name="Tooltip+hide"></a>
### tooltip.hide()
Hides an element’s tooltip. This is considered a “manual” triggering of the tooltip.
**Kind**: instance method of [<code>Tooltip</code>](#Tooltip)
<a name="Tooltip+dispose"></a>
### tooltip.dispose()
Hides and destroys an element’s tooltip.
**Kind**: instance method of [<code>Tooltip</code>](#Tooltip)
<a name="Tooltip+toggle"></a>
### tooltip.toggle()
Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.
**Kind**: instance method of [<code>Tooltip</code>](#Tooltip)
<a name="Tooltip+updateTitleContent"></a>
### tooltip.updateTitleContent(title)
Updates the tooltip's title content
**Kind**: instance method of [<code>Tooltip</code>](#Tooltip)
| Param | Type | Description |
| --- | --- | --- |
| title | <code>String</code> \| <code>HTMLElement</code> | The new content to use for the title |
<a name="Tooltip.TitleFunction"></a>
### Tooltip.TitleFunction ⇒ <code>String</code>
Title function, its context is the Tooltip instance.
**Kind**: static typedef of [<code>Tooltip</code>](#Tooltip)
**Returns**: <code>String</code> - placement - The desired title.