diff --git a/_layouts/default.html b/_layouts/default.html index 49abfe0..26a106d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,14 +1,9 @@ {% assign global = site.data.common.global %} - + {% include head.html %} -
- {% for tongue in site.languages %} - {{ tongue }} - {% endfor %} -
{% include security-camera-svgrepo-com.svg %}
{{ content }} @@ -16,5 +11,6 @@ + diff --git a/_layouts/indexpage.html b/_layouts/indexpage.html index fa013c0..961ae95 100644 --- a/_layouts/indexpage.html +++ b/_layouts/indexpage.html @@ -3,33 +3,50 @@ layout: default --- {% assign global = site.data.common.global %} {% for section in page.sections %} -
- {% if section.id != "faq" %} -
-

{{ section.heading }}

-
- {{ section.content | markdownify }} - {% if section.id == "wannahelp" %} - - {% endif %} +
+ {% if forloop.first %} + + {% endif %} + {% if section.id != "faq" %} +
+

{{ section.heading }}

+
+ {{ section.content | markdownify }} + {% if section.id == "wannahelp" %} + + {% endif %}
- {% elsif section.id == "faq" %} - {% for question in section.content %} -
-
-

{{ question.heading }}

-
-
- {{ question.content | markdownify }} -
+
+ {% elsif section.id == "faq" %} + {% for question in section.content %} +
+
+

{{ question.heading }}

- {% endfor %} - {% endif %} -
+
+ {{ question.content | markdownify }} +
+
+ {% endfor %} + {% endif %} +
{% endfor %} diff --git a/_pages/404.html b/_pages/404.md similarity index 52% rename from _pages/404.html rename to _pages/404.md index 40097d8..d4112f2 100644 --- a/_pages/404.html +++ b/_pages/404.md @@ -1,25 +1,19 @@ --- -layout: default +layout: centered permalink: /404 +redirect: true ---

404

- -

Page not found :(

-

The requested page could not be found.

diff --git a/_pages/index-da.md b/_pages/index-da.md index b67a80d..efdbdbc 100644 --- a/_pages/index-da.md +++ b/_pages/index-da.md @@ -12,6 +12,7 @@ sections: Sammen med vores advokater arbejder vi nu på en udførlig stævning. Den er klar til en høringsfase i starten af marts, bliver offentliggjort d. 15. marts og indleveret til retten d. 2. april 2018. - id: butwhy + link: Hvorfor? heading: Hvorfor er det vigtigt? content: | Måske har du ikke noget at skjule i dag, men måske bliver dine ligegyldige data vigtige i morgen. Hvis en bekendt bliver anholdt er du automatisk under mistanke, bare fordi du sendte en nytårs-sms. Måske har du googlet “gødning” eller “TATP”, dagen før en hjemmelavet bombe bliver fundet? @@ -20,6 +21,7 @@ sections: Dansk politi kan rejse tiltale udelukkende på baggrund af ting du har skrevet i Facebook Messenger. Har du skrevet negative ting om danske politikere på Facebook? Måske bliver du sigtet i næste uge. - id: tellmemore + link: Hvordan? heading: Jeg vil vide mere… content: | Sagen startede med en registerindsigt hos teleselskabet TDC. Det var Rasmus Malver der bad om den, og efter lang tids venten og mange rykkere sendte TDC en ukrypteret indsigt. Indsigten viste sig at indeholde ulovligt optagne data, men brancheforeningen Teleindustrien insisterede på at TDC ikke ønskede at logge. Hvis det var tilfældet kunne man lægge sag an imod TDC, og de ville bare erkende at indsamlingen var ulovlig. Rasmus skrev en stævning, som du kan downloade her. @@ -28,6 +30,7 @@ sections: Sagen kan stadig anlægges imod TDC, men med brevet fra ministeren er det lettere for dem at påstå uvidenhed. I samråd med en advokat blev sagen ændret, og målet er nu at få den danske stat dømt for ikke at overholde menneskeretten. Det er en større og dyrere sag, men den har til gengæld potentiale for at ændre politikeres adgang til at ignorere vores fundamentale rettigheder. - id: wannahelp + link: Hjælp/bidrag! heading: Jeg vil hjælpe! content: | Hvis du har lyst til at hjælpe, kan du kontakte [Rasmus Malver](https://twitter.com/rasmusmalver) på [Twitter](https://twitter.com/rasmusmalver) eller på [sms/signal](sms:+4526809424). Du kan også følge foreningen på [Twitter](https://twitter.com/ulovliglogning). Eller skrive dig op til vores nyhedsbrev herunder. @@ -38,6 +41,7 @@ sections: Du kan også hjælpe ved at skabe opmærksomhed. Kontakt dit netværk, journalister og din familie, og fortæl hvorfor det er vigtigt at kæmpe for vores basale rettigheder. - id: faq + link: FAQ content: - heading: Hvorfor Søren Pape? content: | diff --git a/_pages/index-en.md b/_pages/index-en.md index a3f18aa..da70cc0 100644 --- a/_pages/index-en.md +++ b/_pages/index-en.md @@ -12,6 +12,7 @@ sections: In cooperation with our attorneys we are currently working on the suppœna to file suit against the minister of justice, Søren Pape Poulsen. The document will be published 15 March for public consultation, and filed on 2 April 2018. - id: butwhy + link: Why? heading: But why? content: | You might not think that your secrets are worth keeping, but with enough data, everyone's a suspect. Maybe you've sent a merry christmas-text to the suspect of an ongoing investigation? Maybe you've googled “manure” the week before a homemade bomb is found? @@ -19,6 +20,7 @@ sections: Maybe you're the only person with a mobile phone that's been near the scene of a crime, and maybe you'd just bought binliners. Mass surveillance flips the burden of proof. Your movements are recorded and can be used against you, but not in your defence. You might have left your phone at home on purpose. - id: tellmemore + link: How? heading: Tell me more! content: | The movement began when Rasmus Malver asked his phone company, TDC, for a copy of their retained data. When the company finally delivered the data, it was evident that they had retained data illegally. The Telecom Industry Association of Denmark had publically claimed that they were opposed to violating human rights. Malver decided to call their bluff, and when presented with a draft suppœna TDC disowned the association's statement. @@ -27,6 +29,7 @@ sections: The case could still be brought against the phone companies, but with this letter they have a better case for arguing ignorance (although that is [technically a moot point](https://en.wikipedia.org/wiki/Ignorantia_juris_non_excusat)). However the actions of the minister are so grave that, in consultation with our attorneys, we have decided to file suit against the state instead. A democratic society cannot tolerate officials threatening citizens and companies with prosecution if they honour the law. - id: wannahelp + link: Help us! heading: I want to help! content: | You can contact spokesperson [Rasmus Malver](https://twitter.com/rasmusmalver) on [Twitter](https://twitter.com/rasmusmalver) or via [sms/signal](sms:+4526809424). @@ -37,6 +40,7 @@ sections: You can also help us gain momentum through publicity. Contact your network, journalists, friends and family - and explain why it is important to fight for our rights. - id: faq + link: FAQ content: - heading: Why Søren Pape? content: | diff --git a/_scss/base/_base.scss b/_scss/base/_base.scss index bc1aef3..a0331d0 100644 --- a/_scss/base/_base.scss +++ b/_scss/base/_base.scss @@ -18,29 +18,3 @@ footer { .hidden { display: none !important; } - -.langSwitcher { - display: inline-block; - position: absolute; - top: 32px; - left: 32px; - z-index: 100; - font-size: 0; - background: #444; - border: 5px solid #444; - border-radius: 5px; -} -.langSwitcher a { - font-size: 2rem; - color: transparent; - box-shadow: none; - border-radius: 3px; - margin-right: 5px; - box-shadow: inset 0 50px 0 rgba(0, 0, 0, 0.35); -} -.langSwitcher a.activeLang { - box-shadow: none; -} -.langSwitcher a:last-child{ - margin-right: 0; -} \ No newline at end of file diff --git a/_scss/base/_typography.scss b/_scss/base/_typography.scss index 8f89d78..efff0bc 100644 --- a/_scss/base/_typography.scss +++ b/_scss/base/_typography.scss @@ -8,6 +8,7 @@ body { h1, h2, h3 { font-family: 'Montserrat', sans-serif; + font-weight: 500; } h1 { @@ -53,7 +54,6 @@ p { a { color: #FFF; - font-weight: bold; text-decoration: none; box-shadow: 0 2px 0 #ff5800; .even & { diff --git a/_scss/module/_camera.scss b/_scss/module/_camera.scss index 29baf0d..d6e91bb 100644 --- a/_scss/module/_camera.scss +++ b/_scss/module/_camera.scss @@ -1,7 +1,7 @@ .camera { position: fixed; right: -7px; - top: 20px; + top: 50px; width: 70px; z-index: 1000; pointer-events: none; diff --git a/_scss/module/_fonts.scss b/_scss/module/_fonts.scss index 01710c1..8ec7590 100644 --- a/_scss/module/_fonts.scss +++ b/_scss/module/_fonts.scss @@ -1,28 +1,28 @@ -/* eczar-500 - latin */ +/* montserrat-regular - latin */ @font-face { - font-family: 'Eczar'; + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */ + src: local('Montserrat Regular'), local('Montserrat-Regular'), + url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ +} +/* montserrat-500 - latin */ +@font-face { + font-family: 'Montserrat'; font-style: normal; font-weight: 500; - src: url('../fonts/eczar-v6-latin-500.eot'); /* IE9 Compat Modes */ - src: local('Eczar Medium'), local('Eczar-Medium'), - url('../fonts/eczar-v6-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/eczar-v6-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/eczar-v6-latin-500.woff') format('woff'), /* Modern Browsers */ - url('../fonts/eczar-v6-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/eczar-v6-latin-500.svg#Eczar') format('svg'); /* Legacy iOS */ -} -/* eczar-600 - latin */ -@font-face { - font-family: 'Eczar'; - font-style: normal; - font-weight: 600; - src: url('../fonts/eczar-v6-latin-600.eot'); /* IE9 Compat Modes */ - src: local('Eczar SemiBold'), local('Eczar-SemiBold'), - url('../fonts/eczar-v6-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/eczar-v6-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/eczar-v6-latin-600.woff') format('woff'), /* Modern Browsers */ - url('../fonts/eczar-v6-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/eczar-v6-latin-600.svg#Eczar') format('svg'); /* Legacy iOS */ + src: url('../fonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */ + src: local('Montserrat Medium'), local('Montserrat-Medium'), + url('../fonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */ + url('../fonts/montserrat-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/montserrat-v12-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* roboto-regular - latin */ diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss index 1cf1360..259b33d 100644 --- a/_scss/module/_indexpage.scss +++ b/_scss/module/_indexpage.scss @@ -6,6 +6,60 @@ .ctaTxt{display:none;} } +nav { + display: flex; + background: #555; + position: absolute; + top: 0; + left: 0; + width: 100%; + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + white-space: nowrap; + .js & { + -ms-overflow-style: -ms-autohiding-scrollbar; + &::-webkit-scrollbar { + display: none; + } + } + .langSwitcher a { + margin-right: 0; + &.activeLang { + background: $background-alternative; + } + } + .center { + float: left; + } + a { + display: inline-block; + padding: 10px; + box-shadow: none; + font-weight: normal; + &[data-link-for="wannahelp"]{ + background: $background-alternative; + animation: nav-link-pulse 2s linear infinite; + } + + } + .left, .right { + flex: 1; + } +} + +@keyframes nav-link-pulse { + 0% { + background: $background-alternative; + } + 50% { + background: darken($background-alternative, 15); + } + 100% { + background: $background-alternative; + } +} + .signup { input { display: block; diff --git a/_scss/module/_sections.scss b/_scss/module/_sections.scss index e034bea..3b9b5d5 100644 --- a/_scss/module/_sections.scss +++ b/_scss/module/_sections.scss @@ -27,6 +27,9 @@ section { $background-primary 50% ); } + &:first-child { + padding-top: 5rem; + } &:last-of-type { background-image: none; } diff --git a/assets/fonts/eczar-v6-latin-500.eot b/assets/fonts/eczar-v6-latin-500.eot deleted file mode 100644 index 146a063..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.eot and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-500.svg b/assets/fonts/eczar-v6-latin-500.svg deleted file mode 100644 index 8632561..0000000 --- a/assets/fonts/eczar-v6-latin-500.svg +++ /dev/null @@ -1,346 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/eczar-v6-latin-500.ttf b/assets/fonts/eczar-v6-latin-500.ttf deleted file mode 100644 index 962d389..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.ttf and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-500.woff b/assets/fonts/eczar-v6-latin-500.woff deleted file mode 100644 index 67d52ae..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.woff and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-500.woff2 b/assets/fonts/eczar-v6-latin-500.woff2 deleted file mode 100644 index 57f2055..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.woff2 and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.eot b/assets/fonts/eczar-v6-latin-600.eot deleted file mode 100644 index d97b9e5..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.eot and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.svg b/assets/fonts/eczar-v6-latin-600.svg deleted file mode 100644 index 9ad3e40..0000000 --- a/assets/fonts/eczar-v6-latin-600.svg +++ /dev/null @@ -1,348 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/eczar-v6-latin-600.ttf b/assets/fonts/eczar-v6-latin-600.ttf deleted file mode 100644 index f721dec..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.ttf and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.woff b/assets/fonts/eczar-v6-latin-600.woff deleted file mode 100644 index 93a8d54..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.woff and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.woff2 b/assets/fonts/eczar-v6-latin-600.woff2 deleted file mode 100644 index 2e96b76..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.woff2 and /dev/null differ diff --git a/assets/fonts/montserrat-v12-latin-500.eot b/assets/fonts/montserrat-v12-latin-500.eot new file mode 100644 index 0000000..5db61f2 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.eot differ diff --git a/assets/fonts/montserrat-v12-latin-500.svg b/assets/fonts/montserrat-v12-latin-500.svg new file mode 100644 index 0000000..52fc72f --- /dev/null +++ b/assets/fonts/montserrat-v12-latin-500.svg @@ -0,0 +1,326 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/montserrat-v12-latin-500.ttf b/assets/fonts/montserrat-v12-latin-500.ttf new file mode 100644 index 0000000..463c980 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.ttf differ diff --git a/assets/fonts/montserrat-v12-latin-500.woff b/assets/fonts/montserrat-v12-latin-500.woff new file mode 100644 index 0000000..e2db9c5 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.woff differ diff --git a/assets/fonts/montserrat-v12-latin-500.woff2 b/assets/fonts/montserrat-v12-latin-500.woff2 new file mode 100644 index 0000000..056145d Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.woff2 differ diff --git a/assets/fonts/montserrat-v12-latin-regular.eot b/assets/fonts/montserrat-v12-latin-regular.eot new file mode 100644 index 0000000..58433f2 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.eot differ diff --git a/assets/fonts/montserrat-v12-latin-regular.svg b/assets/fonts/montserrat-v12-latin-regular.svg new file mode 100644 index 0000000..6cc39cd --- /dev/null +++ b/assets/fonts/montserrat-v12-latin-regular.svg @@ -0,0 +1,327 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/montserrat-v12-latin-regular.ttf b/assets/fonts/montserrat-v12-latin-regular.ttf new file mode 100644 index 0000000..48bd708 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.ttf differ diff --git a/assets/fonts/montserrat-v12-latin-regular.woff b/assets/fonts/montserrat-v12-latin-regular.woff new file mode 100644 index 0000000..8a054ad Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.woff differ diff --git a/assets/fonts/montserrat-v12-latin-regular.woff2 b/assets/fonts/montserrat-v12-latin-regular.woff2 new file mode 100644 index 0000000..2064548 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.woff2 differ diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..9345170 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -0,0 +1,126 @@ +document.documentElement.classList.remove("no-js"); +document.documentElement.classList.add("js"); + +var SETTINGS = { + navTravelling: false, + navTravelDirection: "", + navTravelDistance: 150 +} + +function determineOverflow(content, container) { + var containerMetrics = container.getBoundingClientRect(); + var containerMetricsRight = Math.floor(containerMetrics.right); + var containerMetricsLeft = Math.floor(containerMetrics.left); + var contentMetrics = content.getBoundingClientRect(); + var contentMetricsRight = Math.floor(contentMetrics.right); + var contentMetricsLeft = Math.floor(contentMetrics.left); + if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) { + return "both"; + } else if (contentMetricsLeft < containerMetricsLeft) { + return "left"; + } else if (contentMetricsRight > containerMetricsRight) { + return "right"; + } else { + return "none"; + } +} + +var nav = document.getElementById("navWrapper") +var navElements = document.getElementById("navElements") +var navAdvancerLeft = document.getElementById("navAdvancerLeft"); +var navAdvancerRight = document.getElementById("navAdvancerRight"); +var last_known_scroll_position = 0; +var ticking = false; + +setOverflowIndicator(); + +function setOverflowIndicator(scroll_pos) { + nav.setAttribute("data-overflowing", determineOverflow(navElements, nav)); +} + +nav.addEventListener("scroll", function() { + last_known_scroll_position = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function() { + setOverflowIndicator(last_known_scroll_position); + ticking = false; + }); + } + ticking = true; +}); + +navAdvancerLeft.addEventListener("click", function() { + // If in the middle of a move return + if (SETTINGS.navTravelling === true) { + return; + } + // If we have content overflowing both sides or on the left + if (determineOverflow(navElements, nav) === "left" || determineOverflow(navElements, nav) === "both") { + // Find how far this panel has been scrolled + var availableScrollLeft = nav.scrollLeft; + // If the space available is less than two lots of our desired distance, just move the whole amount + // otherwise, move by the amount in the settings + if (availableScrollLeft < SETTINGS.navTravelDistance * 2) { + navElements.style.transform = "translateX(" + availableScrollLeft + "px)"; + } else { + navElements.style.transform = "translateX(" + SETTINGS.navTravelDistance + "px)"; + } + // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that + navElements.classList.remove("pn-ProductNav_Contents-no-transition"); + // Update our settings + SETTINGS.navTravelDirection = "left"; + SETTINGS.navTravelling = true; + } + // Now update the attribute in the DOM + nav.setAttribute("data-overflowing", determineOverflow(navElements, nav)); +}); + +navAdvancerRight.addEventListener("click", function() { + // If in the middle of a move return + if (SETTINGS.navTravelling === true) { + return; + } + // If we have content overflowing both sides or on the right + if (determineOverflow(navElements, nav) === "right" || determineOverflow(navElements, nav) === "both") { + // Get the right edge of the container and content + var navBarRightEdge = navElements.getBoundingClientRect().right; + var navBarScrollerRightEdge = nav.getBoundingClientRect().right; + // Now we know how much space we have available to scroll + var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge); + // If the space available is less than two lots of our desired distance, just move the whole amount + // otherwise, move by the amount in the settings + if (availableScrollRight < SETTINGS.navTravelDistance * 2) { + navElements.style.transform = "translateX(-" + availableScrollRight + "px)"; + } else { + navElements.style.transform = "translateX(-" + SETTINGS.navTravelDistance + "px)"; + } + // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that + navElements.classList.remove("pn-ProductNav_Contents-no-transition"); + // Update our settings + SETTINGS.navTravelDirection = "right"; + SETTINGS.navTravelling = true; + } + // Now update the attribute in the DOM + nav.setAttribute("data-overflowing", determineOverflow(navElements, nav)); +}); + +navElements.addEventListener( + "transitionend", + function() { + // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform + var styleOfTransform = window.getComputedStyle(navElements, null); + var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform"); + // If there is no transition we want to default to 0 and not null + var amount = Math.abs(parseInt(tr.split(",")[4]) || 0); + navElements.style.transform = "none"; + navElements.classList.add("pn-ProductNav_Contents-no-transition"); + // Now lets set the scroll position + if (SETTINGS.navTravelDirection === "left") { + nav.scrollLeft = nav.scrollLeft - amount; + } else { + nav.scrollLeft = nav.scrollLeft + amount; + } + SETTINGS.navTravelling = false; + }, + false +); \ No newline at end of file