From d62e89270e3a79f17f050ba3461a5ff033e6873b Mon Sep 17 00:00:00 2001 From: Alex Shteinikov Date: Tue, 21 May 2019 08:33:03 +1000 Subject: [PATCH] DOC-312 New header for docs (#1042) --- _includes/js/my-account-button.js | 56 +++++++ _includes/notification.html | 68 -------- _includes/template/bodycontents.html | 121 ++++++++++---- _includes/template/head.html | 35 ---- _includes/template/menu.html | 239 +++++++++++++++++++++++++++ _includes/template/notification.html | 72 ++++++++ _includes/template/search.html | 58 +++++++ images/search.svg | 6 + 8 files changed, 521 insertions(+), 134 deletions(-) create mode 100644 _includes/js/my-account-button.js delete mode 100644 _includes/notification.html create mode 100644 _includes/template/menu.html create mode 100644 _includes/template/notification.html create mode 100644 _includes/template/search.html create mode 100644 images/search.svg diff --git a/_includes/js/my-account-button.js b/_includes/js/my-account-button.js new file mode 100644 index 000000000..361e6ac63 --- /dev/null +++ b/_includes/js/my-account-button.js @@ -0,0 +1,56 @@ +(function () { + + if (typeof window.fetch === "undefined" || + typeof window.$ === "undefined" || + typeof window.localStorage === "undefined" + ) { + return; + } + + var ENDPOINT = isStagingEnvironment() + ? "https://apps.staging.tiny.cloud/tiny/user/me/" + : "https://apps.tiny.cloud/tiny/user/me/"; + + var LS_KEY_VALUE = "tiny:docs:isAuthKey"; + var LS_KEY_EXPIRE = "tiny:docs:isAuthKeyExpiry"; + var EXPIRE_TIMEOUT = 15 * 60 * 1000; + + var $getTinyBtn = $(".header-get-tiny-button, .header-get-tiny-button-mobile"); + var $myAccountBtn = $(".header-my-account-button, .header-my-account-button-mobile"); + + function getIsAuthData() { + + var isAuthFromStorage = localStorage.getItem(LS_KEY_VALUE) === "true"; + var isAuthExpireFromStorage = parseInt(localStorage.getItem(LS_KEY_EXPIRE), 10); + + if (isAuthFromStorage && isAuthExpireFromStorage > Date.now()) { + return renderMyAccountButton(); + } + + fetch(ENDPOINT, { + credentials: "include", + method: "GET", + mode: "cors" + }).then(function (response) { + return response.json() + }).then(function (response) { + localStorage.setItem(LS_KEY_VALUE, response.isAuthenticated); + localStorage.setItem(LS_KEY_EXPIRE, Date.now() + EXPIRE_TIMEOUT); + if (response.isAuthenticated) { + renderMyAccountButton(); + } + }); + } + + function isStagingEnvironment() { + return window.location.hostname.indexOf("staging") >= 0 || + window.location.hostname.indexOf("localhost") >= 0; + } + + function renderMyAccountButton() { + $getTinyBtn.hide(); + $myAccountBtn.css({ display: "block"}); + } + + $(document).ready(getIsAuthData); +})(); \ No newline at end of file diff --git a/_includes/notification.html b/_includes/notification.html deleted file mode 100644 index d3d09c526..000000000 --- a/_includes/notification.html +++ /dev/null @@ -1,68 +0,0 @@ -
-
- TinyMCE 5 webinar: Q1 review, migration tips, roadmap —  - - Visit the blog - -
- -
- - TinyMCE 5 webinar - - : Visit the blog -
-
- - diff --git a/_includes/template/bodycontents.html b/_includes/template/bodycontents.html index 585a9ddbd..7323fe1a0 100644 --- a/_includes/template/bodycontents.html +++ b/_includes/template/bodycontents.html @@ -1,46 +1,99 @@ -
- {% include notification.html %} - {% include_remote {{ site.origin }}/_docs/menu.html css="body > *" %} - -
-
-
-
- TinyMCE v5 -
-
- TinyMCE v5 - TinyMCE v4 - TinyMCE v3 -
+{% include template/notification.html %} +{% include template/menu.html css="body > *" %} + + + +
+
- -
-
- -
-
+
+

{{ page.title }}

{{ page.description }}

{% if page.url contains '/api/' %} {% else %} - Contribute to this page + Contribute to this page {% endif %} {% if page.controls %} {% assign controls = page.controls | split:',' %} @@ -50,7 +103,7 @@ {% endif %}
-
+
{{ content }} {% include feedback.html %}

@@ -61,6 +114,8 @@

{% include license.html %}
+ +
@@ -69,6 +124,10 @@ + + \ No newline at end of file + diff --git a/_includes/template/head.html b/_includes/template/head.html index 90027d50f..417c1bfa9 100644 --- a/_includes/template/head.html +++ b/_includes/template/head.html @@ -45,39 +45,4 @@ } - - - \ No newline at end of file diff --git a/_includes/template/menu.html b/_includes/template/menu.html new file mode 100644 index 000000000..2ebe2fdeb --- /dev/null +++ b/_includes/template/menu.html @@ -0,0 +1,239 @@ + + +
+
+
+
+ + Tiny logo + + + Docs + +
+ + {% include template/search.html %} + +
+ + Create Account + + + +
+
+
+ +
+ + +
+
\ No newline at end of file diff --git a/_includes/template/notification.html b/_includes/template/notification.html new file mode 100644 index 000000000..0c73be0e2 --- /dev/null +++ b/_includes/template/notification.html @@ -0,0 +1,72 @@ +
+
+ TinyMCE 5 webinar: Q1 review, migration tips, roadmap —  + + Visit the blog + +
+ + +
+ + diff --git a/_includes/template/search.html b/_includes/template/search.html new file mode 100644 index 000000000..d7652a547 --- /dev/null +++ b/_includes/template/search.html @@ -0,0 +1,58 @@ + +
+ +
diff --git a/images/search.svg b/images/search.svg new file mode 100644 index 000000000..1edccf630 --- /dev/null +++ b/images/search.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file