diff --git a/bin/Controls/StickyContent.js b/bin/Controls/StickyContent.js
index f64166cfb578cbac16df2608447383420a35244b..751577a1a1353576753a6c2fb6690d87c99c193c 100644
--- a/bin/Controls/StickyContent.js
+++ b/bin/Controls/StickyContent.js
@@ -49,6 +49,8 @@ define('package/quiqqer/presentation-bricks/bin/Controls/StickyContent', [
this.List = null;
this.PointsList = null;
+
+ this.vNav = null;
},
/**
@@ -56,23 +58,31 @@ define('package/quiqqer/presentation-bricks/bin/Controls/StickyContent', [
*/
$onImport: function () {
- this.brick = document.getElement('.qui-control-stickyContent');
- this.sections = document.getElements('.qui-control-stickyContent-entry');
+ this.brick = document.getElement('.qui-control-stickyContent');
+ this.sections = this.brick.getElements('.qui-control-stickyContent-entry');
+
this.List = [];
this.PointsList = [];
- QUI.addEvent('resize', this.$resize);
-
- this.$resize();
+ this.vNav = this.brick.getElement('.qui-control-stickyContent-vNav');
+ this.dots = this.vNav.getElements('.circle-icon');
+
+ var self = this;
+ this.dots.forEach(function (dot) {
+ dot.addEvent('click', function () {
+ self.dots.forEach(function(Elm) {
+ Elm.removeClass('control-background circle-icon-active');
+ });
+ this.addClass('control-background circle-icon-active');
+ var section = self.sections[dot.getAttribute('data-qui-section')];
+ new Fx.Scroll(window).toElement(section);
+ });
+ });
- /*// mobile?
- if (window.getSize().x < 768) {
- console.log("es ist mobile!");
- return;
- }
- console.log("PC versoin");*/
+ QUI.addEvent('resize', this.$resize);
+ this.$resize();
QUI.addEvent('scroll', function () {
this.$scroll(QUI.getScroll().y);
@@ -85,12 +95,10 @@ define('package/quiqqer/presentation-bricks/bin/Controls/StickyContent', [
$resize: function () {
console.log("resize event");
// mobile?
- if (window.getSize().x < 768) {
- return;
- }
- console.log(1111111)
+ /*if (window.getSize().x < 768) {
+ return;
+ }*/
- this.hide();
this.$calc();
this.$scroll(QUI.getScroll().y);
},
@@ -101,7 +109,7 @@ define('package/quiqqer/presentation-bricks/bin/Controls/StickyContent', [
$calc: function () {
this.firstPoint = this.sections[0].getPosition().y;
this.entryHeight = this.sections[0].getSize().y;
- this.lastPoint = this.firstPoint + (this.entryHeight * this.sections.length);
+ this.lastPoint = this.firstPoint + (this.entryHeight * (this.sections.length - 1));
this.sections.forEach(function (entry) {
var point = entry.getPosition().y - Math.round((this.entryHeight / 2)), // change img when half of next the next section is visible
@@ -112,13 +120,14 @@ define('package/quiqqer/presentation-bricks/bin/Controls/StickyContent', [
}.bind(this));
this.PointsList.push(this.lastPoint);
+
},
/**
* scroll event
*/
$scroll: function (scroll) {
- if (scroll > this.firstPoint && scroll < this.lastPoint - this.entryHeight) {
+ if (scroll > this.firstPoint && scroll < this.lastPoint) {
if (!this.imagesFixed) {
this.setImagesFixed();
@@ -172,11 +181,11 @@ define('package/quiqqer/presentation-bricks/bin/Controls/StickyContent', [
},
/**
- * set images position to absolute
+ * set images position to absolute and show all
*/
setImagesAbsolute: function () {
this.List.forEach(function (Elm) {
- Elm.setStyle('position', 'absolute')
+ Elm.setStyle('position', 'absolute');
});
this.imagesFixed = false;
diff --git a/src/QUI/PresentationBricks/Controls/StickyContent.css b/src/QUI/PresentationBricks/Controls/StickyContent.css
index 7eaf874e8f803ed78c1ae7fd1879fd37a291e742..a1217781fc8af0cebf5245fa7853b4f1ed100017 100644
--- a/src/QUI/PresentationBricks/Controls/StickyContent.css
+++ b/src/QUI/PresentationBricks/Controls/StickyContent.css
@@ -24,6 +24,7 @@
/*visibility: hidden;*/
opacity: 0;
transition: 0.3s all ease-in-out;
+ max-height: 90vh;
}
.qui-control-stickyContent-entry-content {
@@ -37,6 +38,44 @@
text-align: left;
}
+/* vertical nav */
+.qui-control-stickyContent-vNav-container {
+ position: fixed;
+ right: 0;
+ list-style-type: none;
+ z-index: 9999;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.qui-control-stickyContent-vNav {
+ position: relative;
+ padding: 0;
+ list-style: none;
+ cursor: pointer;
+}
+
+.qui-control-stickyContent-vNav li {
+ padding: 8px 10px;
+}
+
+.qui-control-stickyContent-vNav .circle-icon {
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ border: 2px solid;
+ display: block;
+ transition: 0.3s all ease-in-out;
+
+}
+
+.qui-control-stickyContent-vNav .circle-icon:hover {
+ /*transform: scale(1.4);*/
+}
+
+.qui-control-stickyContent-vNav .circle-icon-active {
+ transform: scale(1.3);
+}
@media screen and (max-width: 767px) {
.qui-control-stickyContent-entry {
@@ -48,9 +87,19 @@
.qui-control-stickyContent-entry:last-child {
border-bottom: none;
}
+
+ .qui-control-stickyContent-entry:first-child .qui-control-stickyContent-entry-image{
+ position: relative;
+ }
.qui-control-stickyContent-entry-image {
- margin-bottom: 3em;
+ /*position: fixed;*/
+ top: 0;
+ height: 50%;
+ text-align: center;
+ background: #fff;
+ padding: 1em;
+ /*box-shadow: 0 0 20px 0 rgba(0,0,0,0.1)*/
}
.qui-control-stickyContent-entry-image img {
@@ -59,6 +108,7 @@
transform: translateY(0);
opacity: 1;
transition: 0.3s all ease-in-out;
+ height: 100%;
}
}
\ No newline at end of file
diff --git a/src/QUI/PresentationBricks/Controls/StickyContent.html b/src/QUI/PresentationBricks/Controls/StickyContent.html
index 6da9a84238176c35fdd290e5c8158f581692991c..7e3311c1451edcaf103170cd6c8c778a67013397 100644
--- a/src/QUI/PresentationBricks/Controls/StickyContent.html
+++ b/src/QUI/PresentationBricks/Controls/StickyContent.html
@@ -13,8 +13,19 @@
{/if}
<section itemscope itemtype="{$this->getAttribute('itemtype')}"
- class="qui-control-stickyContent control-template"
+ class="qui-control-stickyContent control-template grid-children-container"
>
+ <div class="qui-control-stickyContent-vNav-container">
+ <ul class="qui-control-stickyContent-vNav">
+ {assign var=test value=0}
+ {foreach from=$children item=Child}
+ <li><span data-qui-section="{$test}" class="circle-icon control-color"></span></li>
+ {assign var=test value=$test+1}
+
+ {/foreach}
+ </ul>
+ </div>
+
<!--<link property="mainEntityOfPage" href="{url site=$Site}">-->
{assign var=counter value=1}
@@ -29,7 +40,7 @@
<article itemscope
itemprop="itemListElement"
itemtype="{$this->getAttribute('child-itemtype')}"
- class="qui-control-stickyContent-entry"
+ class="qui-control-stickyContent-entry grid-children"
>
<meta itemprop="position" content="{$counter}"/>
{assign var=counter value=$counter+1}