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

Refactored clipboard initialization

Browse Source
This commit is contained in:
squidfunk 2017-05-31 16:22:00 +02:00
parent 3b544b94d9
commit fba1883def
9 changed files with 72 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
material/assets/javascripts/application-3f3f3473e5.js
View File

File diff suppressed because one or more lines are too long

4
material/assets/javascripts/application-91b82fceca.js Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-135a50555d.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-9749f36cad.css
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -38,7 +38,7 @@
<script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9749f36cad.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-135a50555d.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0a3e9e1c07.palette.css">
{% endif %}
@ -149,7 +149,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-3f3f3473e5.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-91b82fceca.js"></script>
<script>app.initialize({url:{base:"{{ base_url }}"}})</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

92
src/assets/javascripts/application.js
View File

@ -50,7 +50,7 @@ function initialize(config) { // eslint-disable-line func-style
})
/* Wrap all data tables for better overflow scrolling */
const tables = document.querySelectorAll("table:not([class])") // TODO: this is JSX
const tables = document.querySelectorAll("table:not([class])") // TODO: this is JSX, we should rename the file
Array.prototype.forEach.call(tables, table => {
const wrap = (
<div class="md-typeset__scrollwrap">
@ -65,6 +65,52 @@ function initialize(config) { // eslint-disable-line func-style
wrap.children[0].appendChild(table)
})
/* Clipboard integration */
if (Clipboard.isSupported()) {
const blocks = document.querySelectorAll("div > pre, pre > code")
Array.prototype.forEach.call(blocks, (block, index) => {
const id = `__code_${index}`
/* Create button with message container */
const button = (
<button class="md-clipboard" title="Copy to clipboard"
data-clipboard-target={`#${id} pre, #${id} code`}>
<span class="md-clipboard__message"></span>
</button>
)
/* Link to block and insert button */
const parent = block.parentNode
parent.id = id
parent.insertBefore(button, block)
})
/* Initialize Clipboard listener */
const copy = new Clipboard(".md-clipboard")
/* Success handler */
let timer = null
copy.on("success", action => {
const message = action.trigger.querySelector(".md-clipboard__message")
if (!(message instanceof HTMLElement))
throw new ReferenceError
/* Clear selection and reset debounce logic */
action.clearSelection()
if (timer)
clearTimeout(timer)
/* Set message indicating success and show it */
message.classList.add("md-clipboard__message--active")
message.innerHTML = "Copied to clipboard"
/* Hide message after two seconds */
timer = setTimeout(() => {
message.classList.remove("md-clipboard__message--active")
}, 2000)
})
}
/* Force 1px scroll offset to trigger overflow scrolling */
if (Modernizr.ios) {
const scrollable = document.querySelectorAll("[data-md-scrollfix]")
@ -83,50 +129,6 @@ function initialize(config) { // eslint-disable-line func-style
})
})
}
/* If Clipboard.js is available, inject "copy to clipboard" overlays
and attach Clipboard to copy the code.
Handle both div.codehilite>pre and pre>code. */
if (typeof Clipboard !== "undefined" &&
Clipboard.isSupported()) { // eslint-disable-line no-undef
const blocks = document.querySelectorAll(
"div.codehilite>pre,pre.codehilite>code")
let i = 0
Array.prototype.forEach.call(blocks, code => {
const parent = code.parentNode
const codeId = `hl_code${i}`
const btn = document.createElement("button")
// const icon = document.createElement("i")
parent.id = codeId
// icon.setAttribute("class", "md-icon md-icon--clipboard")
// btn.appendChild(icon)
btn.setAttribute("class", "md-clipboard")
btn.setAttribute("data-clipboard-target",
`#${codeId} pre, #${codeId} code`)
btn.setAttribute("aria-label", "Copy to Clipboard.")
// new Material.Event.Listener(btn, "mouseleave", e => {
// e.currentTarget.classList.remove("md-clipboard__snackbar")
// e.currentTarget.setAttribute("aria-label", "Copy to Clipboard.")
// }).listen()
parent.insertBefore(btn, parent.childNodes[0])
i += 1
})
const cBoard = new Clipboard(".md-clipboard")
cBoard.on("success", e => {
e.clearSelection()
const foo = document.createElement("span")
foo.classList.add("md-clipboard__message")
// foo.textContent = "Copied to clipboard"
foo.setAttribute("aria-label", "Copied to clipboard")
e.trigger.appendChild(foo)
// e.trigger.classList.add("md-clipboard--tip")
})
cBoard.on("error", e => {
e.clearSelection()
e.trigger.setAttribute("aria-label", "Copy Failed!")
// e.trigger.classList.add("md-clipboard--tip")
})
}
}).listen()
/* Component: header shadow toggle */

31
src/assets/javascripts/components/Material/Code.js
View File

@ -1,31 +0,0 @@
/*
* Copyright (c) 2016-2017 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 Clipboard from "./Code/Clipboard"
/* ----------------------------------------------------------------------------
* Module
* ------------------------------------------------------------------------- */
export default {
Clipboard
}

67
src/assets/javascripts/components/Material/Code/Clipboard.js
View File

@ -1,67 +0,0 @@
/*
* Copyright (c) 2016-2017 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.
*/
/* ----------------------------------------------------------------------------
* Class
* ------------------------------------------------------------------------- */
export default class Clipboard {
/**
* Blur links within the table of contents above current page y-offset
*
* @constructor
*
* @property {NodeList<HTMLElement>} els_ - Table of contents links
* @property {Array<HTMLElement>} anchors_ - Referenced anchor nodes
* @property {number} index_ - Current link index
* @property {number} offset_ - Current page y-offset
* @property {boolean} dir_ - Scroll direction change
*
* @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
*/
constructor(els) {
this.els_ = (typeof els === "string")
? document.querySelectorAll(els)
: els
/* Initialize index and page y-offset */
this.index_ = 0
this.offset_ = window.pageYOffset
/* Necessary state to correctly reset the index */
this.dir_ = false
/* Index anchor node offsets for fast lookup */
this.anchors_ = [].reduce.call(this.els_, (anchors, el) => {
return anchors.concat(
document.getElementById(el.hash.substring(1)) || [])
}, [])
}
/**
* Initialize copy buttons on all elements
*/
update() {
}
}

22
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -24,8 +24,8 @@
// Keyframes
// ----------------------------------------------------------------------------
// Show snackbar
@keyframes md-clipboard__snackbar--appear {
// Show message
@keyframes md-clipboard__message--appear {
0% {
transform: translateX(0.8rem);
opacity: 0;
@ -86,15 +86,27 @@
top: 0;
right: 3.4rem;
padding: 0.6rem 1rem;
animation:
md-clipboard__snackbar--appear
0.25s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(0.8rem);
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.175s;
border-radius: 0.2rem;
background: $md-color-black--light;
color: $md-color-white;
font-size: ms(-1);
white-space: nowrap;
opacity: 0;
pointer-events: none;
// Active message
&--active {
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.175s 0.075s;
opacity: 1;
pointer-events: initial;
}
// Inject content from ARIA label
&::before {