-
Notifications
You must be signed in to change notification settings - Fork 395
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
build: added ui kit files processing (#3460)
- Loading branch information
1 parent
26876e1
commit 2cea11c
Showing
11 changed files
with
5,032 additions
and
12,154 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -38,3 +38,6 @@ android.local.properties | |
|
||
core/out/ | ||
runners/**/out/ | ||
|
||
**/node_modules | ||
**/build |
16,920 changes: 4,769 additions & 12,151 deletions
16,920
dokka-subprojects/plugin-base-frontend/package-lock.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/* | ||
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
*/ | ||
import * as tabs from './tabs/index.js'; | ||
|
||
export { tabs }; | ||
|
5 changes: 5 additions & 0 deletions
5
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/*! | ||
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
*/ | ||
|
||
@import 'tabs/styles.scss'; |
95 changes: 95 additions & 0 deletions
95
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
/* | ||
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
*/ | ||
import './styles.scss'; | ||
|
||
/** When Dokka is viewed via iframe, local storage could be inaccessible (see https://github.com/Kotlin/dokka/issues/3323) | ||
* This is a wrapper around local storage to prevent errors in such cases | ||
* */ | ||
const safeLocalStorage = (() => { | ||
let isLocalStorageAvailable = false; | ||
try { | ||
const testKey = '__testLocalStorageKey__'; | ||
localStorage.setItem(testKey, testKey); | ||
localStorage.removeItem(testKey); | ||
isLocalStorageAvailable = true; | ||
} catch (e) { | ||
console.error('Local storage is not available', e); | ||
} | ||
|
||
return { | ||
getItem: (key) => { | ||
if (!isLocalStorageAvailable) { | ||
return null; | ||
} | ||
return localStorage.getItem(key); | ||
}, | ||
setItem: (key, value) => { | ||
if (!isLocalStorageAvailable) { | ||
return; | ||
} | ||
localStorage.setItem(key, value); | ||
} | ||
}; | ||
})(); | ||
|
||
export function initTabs() { | ||
// we could have only a single type of data - classlike or package | ||
const mainContent = document.querySelector('.main-content'); | ||
const type = mainContent ? mainContent.getAttribute("data-page-type") : null; | ||
const localStorageKey = "active-tab-" + type; | ||
document.querySelectorAll('div[tabs-section]').forEach(element => { | ||
showCorrespondingTabBody(element); | ||
element.addEventListener('click', ({ target }) => { | ||
const togglable = target ? target.getAttribute("data-togglable") : null; | ||
if (!togglable) return; | ||
|
||
safeLocalStorage.setItem(localStorageKey, JSON.stringify(togglable)); | ||
toggleSections(target); | ||
}); | ||
}); | ||
|
||
const cached = safeLocalStorage.getItem(localStorageKey); | ||
if (!cached) return; | ||
|
||
const tab = document.querySelector( | ||
'div[tabs-section] > button[data-togglable="' + JSON.parse(cached) + '"]' | ||
); | ||
if (!tab) return; | ||
|
||
toggleSections(tab); | ||
} | ||
|
||
function showCorrespondingTabBody(element) { | ||
const buttonWithKey = element.querySelector("button[data-active]") | ||
if (buttonWithKey) { | ||
toggleSections(buttonWithKey) | ||
} | ||
} | ||
|
||
function toggleSections(target) { | ||
const activateTabs = (containerClass) => { | ||
for (const element of document.getElementsByClassName(containerClass)) { | ||
for (const child of element.children) { | ||
if (child.getAttribute("data-togglable") === target.getAttribute("data-togglable")) { | ||
child.setAttribute("data-active", "") | ||
} else { | ||
child.removeAttribute("data-active") | ||
} | ||
} | ||
} | ||
} | ||
const toggleTargets = target.getAttribute("data-togglable").split(",") | ||
const activateTabsBody = (containerClass) => { | ||
document.querySelectorAll("." + containerClass + " *[data-togglable]") | ||
.forEach(child => { | ||
if (toggleTargets.includes(child.getAttribute("data-togglable"))) { | ||
child.setAttribute("data-active", "") | ||
} else if (!child.classList.contains("sourceset-dependent-content")) { // data-togglable is used to switch source set as well, ignore it | ||
child.removeAttribute("data-active") | ||
} | ||
}) | ||
} | ||
activateTabs("tabs-section") | ||
activateTabsBody("tabs-section-body") | ||
} |
48 changes: 48 additions & 0 deletions
48
dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
/*! | ||
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
*/ | ||
|
||
.section-tab, | ||
.platform-hinted > .platform-bookmarks-row > .platform-bookmark { | ||
border: 0; | ||
padding: 11px 3px; | ||
margin: 0 8px; | ||
cursor: pointer; | ||
outline: none; | ||
font-size: var(--default-font-size); | ||
background-color: transparent; | ||
color: var(--inactive-section-color); | ||
border-bottom: 1px solid var(--inactive-tab-border-color); | ||
} | ||
|
||
.section-tab:hover { | ||
color: var(--default-font-color); | ||
border-bottom: 2px solid var(--default-font-color); | ||
} | ||
|
||
.section-tab[data-active=''] { | ||
color: var(--active-section-color); | ||
border-bottom: 2px solid var(--active-tab-border-color); | ||
} | ||
|
||
.tabs-section-body > div { | ||
margin-top: 12px; | ||
} | ||
|
||
.tabs-section-body .with-platform-tabs { | ||
padding-top: 12px; | ||
padding-bottom: 12px; | ||
} | ||
|
||
.js .platform-hinted > .content:not([data-active]), | ||
.js .tabs-section-body *[data-togglable]:not([data-active]) { | ||
display: none; | ||
} | ||
|
||
/* | ||
the hack to hide the headers inside tabs for a package page because each tab | ||
has only one header, and the header text is the same as the tab name, so no point in showing it | ||
*/ | ||
.main-content[data-page-type="package"] .tabs-section-body h2 { | ||
display: none; | ||
} |
Empty file.
58 changes: 58 additions & 0 deletions
58
dokka-subprojects/plugin-base-frontend/webpack.config-ui-kit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/* | ||
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. | ||
*/ | ||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||
const path = require('path'); | ||
|
||
module.exports = { | ||
entry: { | ||
entry: ['./src/main/ui-kit/index.js'], | ||
}, | ||
mode: 'production', | ||
output: { | ||
path: path.resolve(__dirname, '../plugin-base/src/main/resources/dokka/ui-kit/'), | ||
filename: 'ui-kit.js', | ||
}, | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.scss$/, | ||
use: [ | ||
MiniCssExtractPlugin.loader, | ||
'css-loader', | ||
{ | ||
loader: 'postcss-loader', | ||
options: { | ||
postcssOptions: { | ||
plugins: [ | ||
[ | ||
'cssnano', | ||
{ | ||
preset: ['default', { discardComments: { removeAll: true } }], | ||
}, | ||
], | ||
], | ||
}, | ||
}, | ||
}, | ||
'sass-loader', | ||
], | ||
}, | ||
{ | ||
test: /\.js$/, | ||
exclude: /node_modules/, | ||
use: { | ||
loader: 'babel-loader', | ||
options: { | ||
presets: ['@babel/preset-env'] | ||
} | ||
} | ||
} | ||
], | ||
}, | ||
plugins: [ | ||
new MiniCssExtractPlugin({ | ||
filename: 'ui-kit.css', | ||
}), | ||
], | ||
}; |
34 changes: 34 additions & 0 deletions
34
dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
.platform-hinted > .platform-bookmarks-row > .platform-bookmark, .section-tab { | ||
background-color: transparent; | ||
border: 0; | ||
border-bottom: 1px solid var(--inactive-tab-border-color); | ||
color: var(--inactive-section-color); | ||
cursor: pointer; | ||
font-size: var(--default-font-size); | ||
margin: 0 8px; | ||
outline: none; | ||
padding: 11px 3px | ||
} | ||
|
||
.section-tab:hover { | ||
border-bottom: 2px solid var(--default-font-color); | ||
color: red; | ||
} | ||
|
||
.section-tab[data-active=""] { | ||
border-bottom: 2px solid var(--active-tab-border-color); | ||
color: var(--active-section-color) | ||
} | ||
|
||
.tabs-section-body > div { | ||
margin-top: 12px | ||
} | ||
|
||
.tabs-section-body .with-platform-tabs { | ||
padding-bottom: 12px; | ||
padding-top: 12px | ||
} | ||
|
||
.js .platform-hinted > .content:not([data-active]), .js .tabs-section-body [data-togglable]:not([data-active]), .main-content[data-page-type=package] .tabs-section-body h2 { | ||
display: none | ||
} |
1 change: 1 addition & 0 deletions
1
dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.js
Large diffs are not rendered by default.
Oops, something went wrong.