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 integration, not finished

Browse Source
This commit is contained in:
squidfunk 2017-05-31 15:22:59 +02:00
parent c07ef90f0e
commit 670ae4a44c
18 changed files with 161 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
lib/declarations/clipboard.js Normal file
View File

@ -0,0 +1,37 @@
/*
* 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.
*/
/* ----------------------------------------------------------------------------
* Declarations
* ------------------------------------------------------------------------- */
declare module "clipboard" {
/* Class: Clipboard */
declare class Clipboard {
static isSupported(): boolean,
on(event: string, cb: Function): void
}
/* Exports */
declare export default typeof Clipboard
}

4
material/assets/javascripts/application-1a4408fe3b.js Normal file
View File

File diff suppressed because one or more lines are too long

3
material/assets/javascripts/application-6b4ff16fa7.js
View File

File diff suppressed because one or more lines are too long

3
material/assets/javascripts/application-876a5cae0c.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/modernizr-1df76c4e58.js Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/modernizr-56ade86843.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-99e13a48f0.css
View File

File diff suppressed because one or more lines are too long

6
material/base.html
View File

@ -35,10 +35,10 @@
{% endif %}
{% endblock %}
{% block libs %}
<script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
<script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-99e13a48f0.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9749f36cad.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-6b4ff16fa7.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-1a4408fe3b.js"></script>
<script>app.initialize({url:{base:"{{ base_url }}"}})</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

6
package.json
View File

@ -34,9 +34,7 @@
"test:visual:session": "scripts/test/visual/session",
"travis": "scripts/travis"
},
"dependencies": {
"escape-string-regexp": "^1.0.5"
},
"dependencies": {},
"devDependencies": {
"autoprefixer": "^7.0.1",
"babel-core": "^6.23.0",
@ -49,10 +47,12 @@
"babel-register": "^6.23.0",
"babel-root-import": "^4.1.5",
"chalk": "^1.1.3",
"clipboard": "^1.7.1",
"core-js": "^2.4.1",
"css-mqpacker": "^6.0.0",
"custom-event-polyfill": "^0.3.0",
"del": "^2.2.2",
"escape-string-regexp": "^1.0.5",
"eslint": "^3.16.0",
"fastclick": "^1.0.6",
"flow-bin": "^0.46.0",

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

@ -20,7 +20,9 @@
* IN THE SOFTWARE.
*/
import Clipboard from "clipboard"
import FastClick from "fastclick"
import Material from "./components/Material"
/* ----------------------------------------------------------------------------
@ -48,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])")
const tables = document.querySelectorAll("table:not([class])") // TODO: this is JSX
Array.prototype.forEach.call(tables, table => {
const wrap = (
<div class="md-typeset__scrollwrap">
@ -85,7 +87,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. */
// $FlowFixMe
if (typeof Clipboard !== "undefined" &&
Clipboard.isSupported()) { // eslint-disable-line no-undef
const blocks = document.querySelectorAll(
@ -95,31 +96,35 @@ function initialize(config) { // eslint-disable-line func-style
const parent = code.parentNode
const codeId = `hl_code${i}`
const btn = document.createElement("button")
const icon = document.createElement("i")
// const icon = document.createElement("i")
parent.id = codeId
icon.setAttribute("class", "md-icon md-icon--clipboard")
btn.appendChild(icon)
btn.setAttribute("class", "clip-btn")
// 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.setAttribute("class","clip-btn")
e.currentTarget.setAttribute("aria-label", "Copy to Clipboard.")
}).listen()
// 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(".clip-btn") // eslint-disable-line no-undef
const cBoard = new Clipboard(".md-clipboard")
cBoard.on("success", e => {
e.clearSelection()
e.trigger.setAttribute("aria-label", "Copied!")
e.trigger.setAttribute("class", "clip-btn clip-tip")
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.setAttribute("class", "clip-btn clip-tip")
// e.trigger.classList.add("md-clipboard--tip")
})
}
}).listen()

3
src/assets/stylesheets/application.scss
View File

@ -42,6 +42,7 @@
@import "base/typeset";
@import "layout/base";
@import "layout/clipboard";
@import "layout/content";
@import "layout/header";
@import "layout/footer";
@ -56,8 +57,6 @@
@import "extensions/footnotes";
@import "extensions/permalinks";
@import "clipboardjs/clipboardjs";
@import "extensions/pymdown/arithmatex";
@import "extensions/pymdown/critic";
@import "extensions/pymdown/emoji";

3
src/assets/stylesheets/base/_icons.scss
View File

@ -57,8 +57,7 @@
"arrow_forward": "arrow-forward",
"menu": "menu",
"search": "search",
"school": "home",
"assignment": "clipboard"
"school": "home"
) {
&--#{$name}::before {
content: $ligature;

4
src/assets/stylesheets/base/_typeset.scss
View File

@ -230,7 +230,7 @@ kbd {
> code {
display: block;
margin: 0;
padding: 1rem 1.2rem;
padding: 1.05rem 1.2rem;
background-color: transparent;
font-size: inherit;
box-shadow: none;
@ -239,7 +239,7 @@ kbd {
// [mobile -]: Increase padding to match text
@include break-to-device(mobile) {
padding: 1rem 1.6rem;
padding: 1.05rem 1.6rem;
}
// Override native scrollbar styles

9
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -230,7 +230,7 @@ $codehilite-whitespace: transparent;
code {
display: block;
margin: 0;
padding: 1rem 1.2rem 0.8rem;
padding: 1.05rem 1.2rem;
background-color: transparent;
overflow: auto;
vertical-align: top;
@ -257,9 +257,10 @@ $codehilite-whitespace: transparent;
pre.codehilite {
overflow: visible;
// Actual container with code, overflowing
code {
display: block;
padding: 1rem 1.2rem 0.8rem;
padding: 1.05rem 1.2rem;
overflow: auto;
}
}
@ -296,7 +297,7 @@ $codehilite-whitespace: transparent;
// Add spacing to line number container
.linenodiv {
padding: 1rem 1.2rem 0.8rem;
padding: 1.05rem 1.2rem;
// Stretch the line number container vertically, so it always aligns with
// the code container, even when there's a scrollbar.
@ -342,7 +343,7 @@ $codehilite-whitespace: transparent;
// Actual container with code, overflowing
pre,
code {
padding: 1rem 1.6rem 0.8rem;
padding: 1.05rem 1.6rem;
}
}
}

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

@ -20,85 +20,99 @@
/// DEALINGS
////
$clip-btn-background: #C4C4C4;
$clip-tip-background: #404040;
// ----------------------------------------------------------------------------
// Keyframes
// ----------------------------------------------------------------------------
// Show snackbar
@keyframes md-clipboard__snackbar--appear {
0% {
transform: translateX(0.8rem);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
.md-typeset {
// Render muted when hovering over code and
// render fully when hovering over the button.
.codehilite {
&:hover {
.clip-btn {
transition: opacity 0.3s;
opacity: 0.4;
// Copy to clipboard
.md-clipboard {
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 2.8rem;
height: 2.8rem;
border-radius: 0.2rem;
font-size: 1.6rem;
cursor: pointer;
z-index: 1;
// Hack: put everything on the GPU to omit flickering
backface-visibility: hidden;
&:hover {
transition: opacity 0.1s;
background-color: $md-color-primary;
opacity: 1;
}
}
}
}
// Icon
&::before {
@extend %md-icon;
// Clipboard button object.
.clip-btn {
@include z-depth(2);
transition:
color 0.25s,
opacity 0.25s;
color: $md-color-black--light;
content: "content_copy";
opacity: 0.25;
display: inline-block;
position: absolute;
top: 0.2rem;
right: 0.2rem;
width: 3.2rem;
height: 3.2rem;
transition: opacity 0.3s;
border-radius: 50%;
background-color: $clip-btn-background;
color: $md-color-white;
cursor: pointer;
opacity: 0;
overflow: visible;
.md-icon--clipboard {
position: relative;
top: 0.1rem;
font-size: 1.8rem;
}
}
// Tooltips for messages when a copy is successful or fails.
// Render it to the left as somtimes it is in a code table which
// cuts off the right, or on the edge of the screen with mobile.
.clip-tip {
&::after {
position: absolute;
top: 0.3rem;
left: 0;
padding: 0.6rem 1rem;
transform: translateX(-112%) translateY(0);
transition: opacity 0.2s;
border-radius: 0.2rem;
background: $clip-tip-background;
color: $md-color-white;
font-size: ms(-1);
font-weight: 700;
white-space: nowrap;
content: attr(aria-label);
// Show on container hover
.codehilite:hover &,
.highlight:hover & {
opacity: 1;
visibility: hidden;
}
}
// Hovered and active icon
&:hover::before,
&:active::before {
color: $md-color-accent;
}
// Message
&__message {
display: block;
position: absolute;
top: 0;
right: 3.4rem;
padding: 0.6rem 1rem;
animation:
md-clipboard__snackbar--appear
0.25s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0.2rem;
background: $md-color-black--light;
color: $md-color-white;
font-size: ms(-1);
white-space: nowrap;
opacity: 1;
// Inject content from ARIA label
&::before {
content: attr(aria-label);
}
&:hover {
&::after {
display: block;
transform: translateX(-110%) translateY(0);
opacity: 0.9;
visibility: visible;
}
// Paint a nice speech bubble
&::after {
display: block;
position: absolute;
top: 50%;
right: -0.4rem;
width: 0;
margin-top: -0.4rem;
border-width: 0.4rem 0 0.4rem 0.4rem;
border-style: solid;
border-color: transparent $md-color-black--light;
content: "";
}
}
}

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

@ -36,7 +36,7 @@
transition: background-color 0.25s;
background-color: $md-color-primary;
color: $md-color-white;
z-index: 1;
z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints
backface-visibility: hidden;

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

@ -21,7 +21,7 @@
////
// ----------------------------------------------------------------------------
// Rules
// Keyframes
// ----------------------------------------------------------------------------
// Show source facts