OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added dialog for copy-to-clipboard action

Browse Source
This commit is contained in:
squidfunk 2020-02-18 14:30:06 +01:00
parent fdff60e33d
commit b2654777b8
17 changed files with 192 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
material/assets/javascripts/bundle.c16ffcea.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.c16ffcea.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

24
material/assets/javascripts/bundle.eb1b83da.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.eb1b83da.min.js.map
View File

File diff suppressed because one or more lines are too long

6
material/assets/manifest.json
View File

@ -1,10 +1,10 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.eb1b83da.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.eb1b83da.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.c16ffcea.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c16ffcea.min.js.map",
"assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
"assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.0a5433f7.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.0a5433f7.min.js.map",
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
"assets/stylesheets/app.scss": "assets/stylesheets/app.eacd7e91.min.css"
"assets/stylesheets/app.scss": "assets/stylesheets/app.37150387.min.css"
}

1
material/assets/stylesheets/app.37150387.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app.eacd7e91.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -43,7 +43,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.eacd7e91.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.37150387.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
{% endif %}
@ -90,7 +90,7 @@
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
{% if page.toc | first is defined %}
<a href="{{ (page.toc | first).url }}" tabindex="0" class="md-skip">
<a href="{{ (page.toc | first).url }}" class="md-skip">
{{ lang.t('skip.link.title') }}
</a>
{% endif %}
@ -190,7 +190,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.eb1b83da.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.c16ffcea.min.js' | url }}"></script>
<script id="__lang" type="application/json">
{%- set translations = {} -%}
{%- for key in [

37
src/assets/javascripts/index.ts
View File

@ -40,7 +40,8 @@ import {
tap,
filter,
withLatestFrom,
observeOn
observeOn,
take
} from "rxjs/operators"
import {
@ -77,6 +78,7 @@ import { mountClipboard } from "./integrations/clipboard"
import { patchTables, patchDetails, patchScrollfix } from "patches"
import { takeIf, not, isConfig } from "utilities"
import { fetchSourceFacts } from "integrations/source"
import { renderDialog } from "templates/dialog"
/* ------------------------------------------------------------------------- */
@ -208,7 +210,26 @@ export function initialize(config: unknown) {
/* ----------------------------------------------------------------------- */
// must be in another scope!
const dialog = renderDialog("Copied to Clipboard")
// snackbar for copy to clipboard
mountClipboard({ document$ })
.pipe(
switchMap(ev => {
ev.clearSelection()
return useComponent("container")
.pipe(
tap(el => el.appendChild(dialog)), // only set text on dialog... render once...
observeOn(animationFrameScheduler),
tap(() => dialog.dataset.mdState = "open"),
delay(2000),
tap(() => dialog.dataset.mdState = ""),
delay(400),
tap(() => dialog.remove())
)
})
)
.subscribe()
patchTables({ document$ })
@ -294,6 +315,20 @@ export function initialize(config: unknown) {
}
})
// if we use a single tab outside of search, unhide all permalinks.
keyboard$
.pipe(
takeIf(not(toggle$.pipe(switchMap(watchToggle)))),
filter(key => ["Tab"].includes(key.type)),
take(1)
)
.subscribe(() => {
for (const link of getElements(".headerlink"))
link.style.visibility = "visible"
})
// build a notification component! feed txt into it...
/* ----------------------------------------------------------------------- */
// TODO: WIP repo rendering

55
src/assets/javascripts/templates/dialog/index.tsx Normal file
View File

@ -0,0 +1,55 @@
/*
* Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import { h } from "utilities"
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* CSS classes
*/
const css = {
container: "md-dialog md-typeset"
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Render a dismissable dialog
*
* @param text - Dialog text
*
* @return Element
*/
export function renderDialog(
text: string
): HTMLElement {
return (
<div class={css.container}>
{text}
</div>
)
}

1
src/assets/javascripts/templates/index.ts
View File

@ -21,6 +21,7 @@
*/
export * from "./clipboard"
export * from "./dialog"
export * from "./search"
export * from "./source"
export * from "./table"

1
src/assets/stylesheets/app.scss
View File

@ -45,6 +45,7 @@
@import "layout/announce";
@import "layout/clipboard";
@import "layout/content";
@import "layout/dialog";
@import "layout/header";
@import "layout/hero";
@import "layout/footer";

8
src/assets/stylesheets/layout/_base.scss
View File

@ -196,8 +196,6 @@ hr {
// Skip link
.md-skip {
position: fixed;
width: px2rem(1px);
height: px2rem(1px);
margin: px2rem(10px);
padding: px2rem(6px) px2rem(10px);
transform: translateY(px2rem(8px));
@ -206,14 +204,10 @@ hr {
color: $md-color-white;
font-size: ms(-1);
opacity: 0;
overflow: hidden;
// Show skip link on focus
&:focus {
width: auto;
height: auto;
clip: auto;
transform: translateX(0);
transform: translateY(0);
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 175ms 75ms;

63
src/assets/stylesheets/layout/_dialog.scss Normal file
View File

@ -0,0 +1,63 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Dialog rendered as snackbar
.md-dialog {
@include z-depth(2);
display: block;
position: fixed;
right: px2rem(16px);
bottom: px2rem(16px);
left: initial;
min-width: px2rem(222px);
padding: px2rem(8px) px2rem(12px);
transform: translateY(100%);
transition:
transform 0ms 400ms,
opacity 400ms;
border: none;
border-radius: px2rem(2px);
background: $md-color-black;
color: $md-color-white;
font-size: px2rem(14px);
opacity: 0;
z-index: 2;
// Show open dialog
&[data-md-state="open"] {
transform: translateY(0);
transition:
transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
opacity 400ms;
opacity: 1;
}
// Hide for print
@media print {
display: none;
}
}

2
src/assets/stylesheets/layout/_nav.scss
View File

@ -218,7 +218,7 @@
// Main lists
~ .md-nav__list {
background-color: $md-color-white;
box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
overflow-y: auto;
scroll-snap-type: y mandatory;

2
src/assets/stylesheets/layout/_search.scss
View File

@ -419,7 +419,7 @@ $md-toggle__search--checked:
&__scrollwrap {
height: 100%;
background-color: $md-color-white;
box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;

2
src/base.html
View File

@ -212,7 +212,7 @@
<!-- Link to skip to content -->
{% if page.toc | first is defined %}
<a href="{{ (page.toc | first).url }}" tabindex="0" class="md-skip">
<a href="{{ (page.toc | first).url }}" class="md-skip">
{{ lang.t('skip.link.title') }}
</a>
{% endif %}