Add ability to short urls for uploaded content (#85)
Add ability to short urls for uploaded content
This commit is contained in:
Atrox
Andrei Marcu
parent
30d2d63466
commit
027f5cce42
|
|
@ -2,6 +2,7 @@ language: go
|
|||
|
||||
go:
|
||||
- 1.5
|
||||
- 1.6
|
||||
|
||||
before_script:
|
||||
- go vet ./...
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ allowhotlink = true
|
|||
- ```-xframeoptions "..." ``` -- X-Frame-Options header (default is "SAMEORIGIN")
|
||||
- ```-remoteuploads``` -- (optionally) enable remote uploads (/upload?url=https://...)
|
||||
- ```-nologs``` -- (optionally) disable request logs in stdout
|
||||
- ```-googleapikey``` -- (optionally) API Key for Google's URL Shortener. ([How to create one](https://developers.google.com/url-shortener/v1/getting_started#APIKey))
|
||||
|
||||
#### SSL with built-in server
|
||||
- ```-certfile path/to/your.crt``` -- Path to the ssl certificate (required if you want to use the https server)
|
||||
|
|
|
|||
16
display.go
16
display.go
|
|
@ -113,13 +113,15 @@ func fileDisplayHandler(c web.C, w http.ResponseWriter, r *http.Request) {
|
|||
}
|
||||
|
||||
err = renderTemplate(tpl, pongo2.Context{
|
||||
"mime": metadata.Mimetype,
|
||||
"filename": fileName,
|
||||
"size": sizeHuman,
|
||||
"expiry": expiryHuman,
|
||||
"extra": extra,
|
||||
"lines": lines,
|
||||
"files": metadata.ArchiveFiles,
|
||||
"mime": metadata.Mimetype,
|
||||
"filename": fileName,
|
||||
"size": sizeHuman,
|
||||
"expiry": expiryHuman,
|
||||
"extra": extra,
|
||||
"lines": lines,
|
||||
"files": metadata.ArchiveFiles,
|
||||
"shorturlEnabled": Config.googleShorterAPIKey != "",
|
||||
"shorturl": metadata.ShortURL,
|
||||
}, r, w)
|
||||
|
||||
if err != nil {
|
||||
|
|
|
|||
4
meta.go
4
meta.go
|
|
@ -26,6 +26,7 @@ type MetadataJSON struct {
|
|||
Size int64 `json:"size"`
|
||||
Expiry int64 `json:"expiry"`
|
||||
ArchiveFiles []string `json:"archive_files,omitempty"`
|
||||
ShortURL string `json:"short_url"`
|
||||
}
|
||||
|
||||
type Metadata struct {
|
||||
|
|
@ -35,6 +36,7 @@ type Metadata struct {
|
|||
Size int64
|
||||
Expiry time.Time
|
||||
ArchiveFiles []string
|
||||
ShortURL string
|
||||
}
|
||||
|
||||
var NotFoundErr = errors.New("File not found.")
|
||||
|
|
@ -146,6 +148,7 @@ func metadataWrite(filename string, metadata *Metadata) error {
|
|||
mjson.Sha256sum = metadata.Sha256sum
|
||||
mjson.Expiry = metadata.Expiry.Unix()
|
||||
mjson.Size = metadata.Size
|
||||
mjson.ShortURL = metadata.ShortURL
|
||||
|
||||
byt, err := json.Marshal(mjson)
|
||||
if err != nil {
|
||||
|
|
@ -188,6 +191,7 @@ func metadataRead(filename string) (metadata Metadata, err error) {
|
|||
metadata.Sha256sum = mjson.Sha256sum
|
||||
metadata.Expiry = time.Unix(mjson.Expiry, 0)
|
||||
metadata.Size = mjson.Size
|
||||
metadata.ShortURL = mjson.ShortURL
|
||||
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ var Config struct {
|
|||
authFile string
|
||||
remoteAuthFile string
|
||||
addHeaders headerList
|
||||
googleShorterAPIKey string
|
||||
}
|
||||
|
||||
var Templates = make(map[string]*pongo2.Template)
|
||||
|
|
@ -145,6 +146,7 @@ func setup() *web.Mux {
|
|||
selifRe := regexp.MustCompile("^" + Config.sitePath + `selif/(?P<name>[a-z0-9-\.]+)$`)
|
||||
selifIndexRe := regexp.MustCompile("^" + Config.sitePath + `selif/$`)
|
||||
torrentRe := regexp.MustCompile("^" + Config.sitePath + `(?P<name>[a-z0-9-\.]+)/torrent$`)
|
||||
shortRe := regexp.MustCompile("^" + Config.sitePath + `(?P<name>[a-z0-9-\.]+)/short$`)
|
||||
|
||||
if Config.authFile == "" {
|
||||
mux.Get(Config.sitePath, indexHandler)
|
||||
|
|
@ -182,6 +184,11 @@ func setup() *web.Mux {
|
|||
mux.Get(selifRe, fileServeHandler)
|
||||
mux.Get(selifIndexRe, unauthorizedHandler)
|
||||
mux.Get(torrentRe, fileTorrentHandler)
|
||||
|
||||
if Config.googleShorterAPIKey != "" {
|
||||
mux.Get(shortRe, shortURLHandler)
|
||||
}
|
||||
|
||||
mux.NotFound(notFoundHandler)
|
||||
|
||||
return mux
|
||||
|
|
@ -228,6 +235,8 @@ func main() {
|
|||
"value of X-Frame-Options header")
|
||||
flag.Var(&Config.addHeaders, "addheader",
|
||||
"Add an arbitrary header to the response. This option can be used multiple times.")
|
||||
flag.StringVar(&Config.googleShorterAPIKey, "googleapikey", "",
|
||||
"API Key for Google's URL Shortener.")
|
||||
|
||||
iniflags.Parse()
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"bytes"
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"net/http"
|
||||
|
||||
"github.com/zenazn/goji/web"
|
||||
)
|
||||
|
||||
type shortenerRequest struct {
|
||||
LongURL string `json:"longUrl"`
|
||||
}
|
||||
|
||||
type shortenerResponse struct {
|
||||
Kind string `json:"kind"`
|
||||
ID string `json:"id"`
|
||||
LongURL string `json:"longUrl"`
|
||||
Error struct {
|
||||
Code int `json:"code"`
|
||||
Message string `json:"message"`
|
||||
} `json:"error"`
|
||||
}
|
||||
|
||||
func shortURLHandler(c web.C, w http.ResponseWriter, r *http.Request) {
|
||||
fileName := c.URLParams["name"]
|
||||
|
||||
err := checkFile(fileName)
|
||||
if err == NotFoundErr {
|
||||
notFoundHandler(c, w, r)
|
||||
return
|
||||
}
|
||||
|
||||
metadata, err := metadataRead(fileName)
|
||||
if err != nil {
|
||||
oopsHandler(c, w, r, RespJSON, "Corrupt metadata.")
|
||||
return
|
||||
}
|
||||
|
||||
if metadata.ShortURL == "" {
|
||||
url, err := shortenURL(getSiteURL(r) + fileName)
|
||||
if err != nil {
|
||||
oopsHandler(c, w, r, RespJSON, err.Error())
|
||||
return
|
||||
}
|
||||
|
||||
metadata.ShortURL = url
|
||||
|
||||
err = metadataWrite(fileName, &metadata)
|
||||
if err != nil {
|
||||
oopsHandler(c, w, r, RespJSON, "Corrupt metadata.")
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
js, _ := json.Marshal(map[string]string{
|
||||
"shortUrl": metadata.ShortURL,
|
||||
})
|
||||
w.Write(js)
|
||||
return
|
||||
}
|
||||
|
||||
func shortenURL(url string) (string, error) {
|
||||
apiURL := "https://www.googleapis.com/urlshortener/v1/url?key=" + Config.googleShorterAPIKey
|
||||
jsonStr, _ := json.Marshal(shortenerRequest{LongURL: url})
|
||||
|
||||
req, err := http.NewRequest("POST", apiURL, bytes.NewBuffer(jsonStr))
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
client := &http.Client{}
|
||||
resp, err := client.Do(req)
|
||||
if err != nil {
|
||||
return "", err
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
|
||||
shortenerResponse := new(shortenerResponse)
|
||||
err = json.NewDecoder(resp.Body).Decode(shortenerResponse)
|
||||
if err != nil {
|
||||
return "", err
|
||||
}
|
||||
|
||||
if shortenerResponse.Error.Message != "" {
|
||||
return "", errors.New(shortenerResponse.Error.Message)
|
||||
}
|
||||
|
||||
return shortenerResponse.ID, nil
|
||||
}
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
/*! Hint.css - v1.3.1 - 2013-11-23
|
||||
/*! Hint.css - v2.3.1 - 2016-06-05
|
||||
* http://kushagragour.in/lab/hint/
|
||||
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */
|
||||
* Copyright (c) 2016 Kushagra Gour; Licensed */
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
/*-------------------------------------* HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
|
|
@ -21,20 +20,20 @@
|
|||
* Each tooltip is made of 2 parts:
|
||||
* 1) body (:after)
|
||||
* 2) arrow (:before)
|
||||
*
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint
|
||||
*/
|
||||
.hint, [data-hint] {
|
||||
[class*="hint--"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/**
|
||||
* tooltip arrow
|
||||
*/
|
||||
* tooltip arrow
|
||||
*/
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
|
||||
* tooltip body
|
||||
*/ }
|
||||
[class*="hint--"]:before, [class*="hint--"]:after {
|
||||
position: absolute;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
|
|
@ -45,26 +44,40 @@
|
|||
pointer-events: none;
|
||||
-webkit-transition: 0.3s ease;
|
||||
-moz-transition: 0.3s ease;
|
||||
transition: 0.3s ease; }
|
||||
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
|
||||
transition: 0.3s ease;
|
||||
-webkit-transition-delay: 0ms;
|
||||
-moz-transition-delay: 0ms;
|
||||
transition-delay: 0ms; }
|
||||
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1; }
|
||||
.hint:before, [data-hint]:before {
|
||||
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||
-webkit-transition-delay: 100ms;
|
||||
-moz-transition-delay: 100ms;
|
||||
transition-delay: 100ms; }
|
||||
[class*="hint--"]:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: 6px solid transparent;
|
||||
z-index: 1000001; }
|
||||
.hint:after, [data-hint]:after {
|
||||
content: attr(data-hint);
|
||||
background: #556A7F;
|
||||
[class*="hint--"]:after {
|
||||
background: #383838;
|
||||
color: white;
|
||||
text-shadow: 0 -1px 0px black;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||
white-space: nowrap; }
|
||||
[class*="hint--"][aria-label]:after {
|
||||
content: attr(aria-label); }
|
||||
[class*="hint--"][data-hint]:after {
|
||||
content: attr(data-hint); }
|
||||
|
||||
[aria-label='']:before, [aria-label='']:after,
|
||||
[data-hint='']:before,
|
||||
[data-hint='']:after {
|
||||
display: none !important; }
|
||||
|
||||
/**
|
||||
* source: hint-position.scss
|
||||
|
|
@ -80,60 +93,106 @@
|
|||
/**
|
||||
* set default color for tooltip arrows
|
||||
*/
|
||||
.hint--top-left:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--top-right:before {
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--top:before {
|
||||
border-top-color: #556A7F; }
|
||||
border-top-color: #383838; }
|
||||
|
||||
.hint--bottom-left:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--bottom-right:before {
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--bottom:before {
|
||||
border-bottom-color: #556A7F; }
|
||||
border-bottom-color: #383838; }
|
||||
|
||||
.hint--left:before {
|
||||
border-left-color: #556A7F; }
|
||||
border-left-color: #383838; }
|
||||
|
||||
.hint--right:before {
|
||||
border-right-color: #556A7F; }
|
||||
border-right-color: #383838; }
|
||||
|
||||
/**
|
||||
* top tooltip
|
||||
*/
|
||||
.hint--top:before {
|
||||
margin-bottom: -12px; }
|
||||
.hint--top:after {
|
||||
margin-left: -18px; }
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top:before, .hint--top:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
|
||||
|
||||
.hint--top:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top:after {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.hint--top:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top:hover:after {
|
||||
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||
-moz-transform: translateX(-50%) translateY(-8px);
|
||||
transform: translateX(-50%) translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom tooltip
|
||||
*/
|
||||
.hint--bottom:before {
|
||||
margin-top: -12px; }
|
||||
.hint--bottom:after {
|
||||
margin-left: -18px; }
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom:before, .hint--bottom:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
|
||||
|
||||
.hint--bottom:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom:after {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.hint--bottom:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom:hover:after {
|
||||
-webkit-transform: translateX(-50%) translateY(8px);
|
||||
-moz-transform: translateX(-50%) translateY(8px);
|
||||
transform: translateX(-50%) translateY(8px); }
|
||||
|
||||
/**
|
||||
* right tooltip
|
||||
*/
|
||||
.hint--right:before {
|
||||
margin-left: -12px;
|
||||
margin-left: -11px;
|
||||
margin-bottom: -6px; }
|
||||
|
||||
.hint--right:after {
|
||||
margin-bottom: -14px; }
|
||||
|
||||
.hint--right:before, .hint--right:after {
|
||||
left: 100%;
|
||||
bottom: 50%; }
|
||||
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
|
||||
|
||||
.hint--right:hover:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
.hint--right:hover:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
|
@ -142,18 +201,191 @@
|
|||
* left tooltip
|
||||
*/
|
||||
.hint--left:before {
|
||||
margin-right: -12px;
|
||||
margin-right: -11px;
|
||||
margin-bottom: -6px; }
|
||||
|
||||
.hint--left:after {
|
||||
margin-bottom: -14px; }
|
||||
|
||||
.hint--left:before, .hint--left:after {
|
||||
right: 100%;
|
||||
bottom: 50%; }
|
||||
.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
|
||||
|
||||
.hint--left:hover:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--left:hover:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
/**
|
||||
* top-left tooltip
|
||||
*/
|
||||
.hint--top-left:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top-left:before, .hint--top-left:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top-left:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top-left:after {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
|
||||
.hint--top-left:after {
|
||||
margin-left: 12px; }
|
||||
|
||||
.hint--top-left:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top-left:hover:after {
|
||||
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||
-moz-transform: translateX(-100%) translateY(-8px);
|
||||
transform: translateX(-100%) translateY(-8px); }
|
||||
|
||||
/**
|
||||
* top-right tooltip
|
||||
*/
|
||||
.hint--top-right:before {
|
||||
margin-bottom: -11px; }
|
||||
|
||||
.hint--top-right:before, .hint--top-right:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--top-right:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--top-right:after {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
transform: translateX(0); }
|
||||
|
||||
.hint--top-right:after {
|
||||
margin-left: -12px; }
|
||||
|
||||
.hint--top-right:hover:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--top-right:hover:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
/**
|
||||
* bottom-left tooltip
|
||||
*/
|
||||
.hint--bottom-left:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom-left:before, .hint--bottom-left:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom-left:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom-left:after {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
transform: translateX(-100%); }
|
||||
|
||||
.hint--bottom-left:after {
|
||||
margin-left: 12px; }
|
||||
|
||||
.hint--bottom-left:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom-left:hover:after {
|
||||
-webkit-transform: translateX(-100%) translateY(8px);
|
||||
-moz-transform: translateX(-100%) translateY(8px);
|
||||
transform: translateX(-100%) translateY(8px); }
|
||||
|
||||
/**
|
||||
* bottom-right tooltip
|
||||
*/
|
||||
.hint--bottom-right:before {
|
||||
margin-top: -11px; }
|
||||
|
||||
.hint--bottom-right:before, .hint--bottom-right:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
|
||||
.hint--bottom-right:before {
|
||||
left: calc(50% - 6px); }
|
||||
|
||||
.hint--bottom-right:after {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
transform: translateX(0); }
|
||||
|
||||
.hint--bottom-right:after {
|
||||
margin-left: -12px; }
|
||||
|
||||
.hint--bottom-right:hover:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--bottom-right:hover:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
/**
|
||||
* source: hint-sizes.scss
|
||||
*
|
||||
* Defines width restricted tooltips that can span
|
||||
* across multiple lines.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--small
|
||||
* 2) hint--medium
|
||||
* 3) hint--large
|
||||
*
|
||||
*/
|
||||
.hint--small:after,
|
||||
.hint--medium:after,
|
||||
.hint--large:after {
|
||||
white-space: normal;
|
||||
line-height: 1.4em; }
|
||||
|
||||
.hint--small:after {
|
||||
width: 80px; }
|
||||
|
||||
.hint--medium:after {
|
||||
width: 150px; }
|
||||
|
||||
.hint--large:after {
|
||||
width: 300px; }
|
||||
|
||||
/**
|
||||
* source: hint-theme.scss
|
||||
*
|
||||
* Defines basic theme for tooltips.
|
||||
*
|
||||
*/
|
||||
[class*="hint--"] {
|
||||
/**
|
||||
* tooltip body
|
||||
*/ }
|
||||
[class*="hint--"]:after {
|
||||
text-shadow: 0 -1px 0px black;
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
/**
|
||||
* source: hint-color-types.scss
|
||||
*
|
||||
|
|
@ -172,12 +404,28 @@
|
|||
.hint--error:after {
|
||||
background-color: #b34e4d;
|
||||
text-shadow: 0 -1px 0px #592726; }
|
||||
|
||||
.hint--error.hint--top-left:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--top-right:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--top:before {
|
||||
border-top-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom-left:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom-right:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--bottom:before {
|
||||
border-bottom-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--left:before {
|
||||
border-left-color: #b34e4d; }
|
||||
|
||||
.hint--error.hint--right:before {
|
||||
border-right-color: #b34e4d; }
|
||||
|
||||
|
|
@ -187,12 +435,28 @@
|
|||
.hint--warning:after {
|
||||
background-color: #c09854;
|
||||
text-shadow: 0 -1px 0px #6c5328; }
|
||||
|
||||
.hint--warning.hint--top-left:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--top-right:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--top:before {
|
||||
border-top-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom-left:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom-right:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--bottom:before {
|
||||
border-bottom-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--left:before {
|
||||
border-left-color: #c09854; }
|
||||
|
||||
.hint--warning.hint--right:before {
|
||||
border-right-color: #c09854; }
|
||||
|
||||
|
|
@ -201,13 +465,29 @@
|
|||
*/
|
||||
.hint--info:after {
|
||||
background-color: #3986ac;
|
||||
text-shadow: 0 -1px 0px #193b4d; }
|
||||
text-shadow: 0 -1px 0px #1a3c4d; }
|
||||
|
||||
.hint--info.hint--top-left:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--top-right:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--top:before {
|
||||
border-top-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom-left:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom-right:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--bottom:before {
|
||||
border-bottom-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--left:before {
|
||||
border-left-color: #3986ac; }
|
||||
|
||||
.hint--info.hint--right:before {
|
||||
border-right-color: #3986ac; }
|
||||
|
||||
|
|
@ -217,12 +497,28 @@
|
|||
.hint--success:after {
|
||||
background-color: #458746;
|
||||
text-shadow: 0 -1px 0px #1a321a; }
|
||||
|
||||
.hint--success.hint--top-left:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--top-right:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--top:before {
|
||||
border-top-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom-left:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom-right:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--bottom:before {
|
||||
border-bottom-color: #458746; }
|
||||
|
||||
.hint--success.hint--left:before {
|
||||
border-left-color: #458746; }
|
||||
|
||||
.hint--success.hint--right:before {
|
||||
border-right-color: #458746; }
|
||||
|
||||
|
|
@ -238,19 +534,83 @@
|
|||
.hint--always:after, .hint--always:before {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
.hint--always.hint--top:after, .hint--always.hint--top:before {
|
||||
|
||||
.hint--always.hint--top:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
|
||||
|
||||
.hint--always.hint--top:after {
|
||||
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||
-moz-transform: translateX(-50%) translateY(-8px);
|
||||
transform: translateX(-50%) translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-left:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-left:after {
|
||||
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||
-moz-transform: translateX(-100%) translateY(-8px);
|
||||
transform: translateX(-100%) translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-right:before {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--top-right:after {
|
||||
-webkit-transform: translateY(-8px);
|
||||
-moz-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
|
||||
.hint--always.hint--bottom:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
.hint--always.hint--left:after, .hint--always.hint--left:before {
|
||||
|
||||
.hint--always.hint--bottom:after {
|
||||
-webkit-transform: translateX(-50%) translateY(8px);
|
||||
-moz-transform: translateX(-50%) translateY(8px);
|
||||
transform: translateX(-50%) translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-left:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-left:after {
|
||||
-webkit-transform: translateX(-100%) translateY(8px);
|
||||
-moz-transform: translateX(-100%) translateY(8px);
|
||||
transform: translateX(-100%) translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-right:before {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--bottom-right:after {
|
||||
-webkit-transform: translateY(8px);
|
||||
-moz-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
|
||||
.hint--always.hint--left:before {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
.hint--always.hint--right:after, .hint--always.hint--right:before {
|
||||
|
||||
.hint--always.hint--left:after {
|
||||
-webkit-transform: translateX(-8px);
|
||||
-moz-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
|
||||
.hint--always.hint--right:before {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
||||
.hint--always.hint--right:after {
|
||||
-webkit-transform: translateX(8px);
|
||||
-moz-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
|
|
@ -273,9 +633,15 @@
|
|||
* Defines various transition effects for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--bounce
|
||||
* 1) hint--no-animate
|
||||
* 2) hint--bounce
|
||||
*
|
||||
*/
|
||||
.hint--no-animate:before, .hint--no-animate:after {
|
||||
-webkit-transition-duration: 0ms;
|
||||
-moz-transition-duration: 0ms;
|
||||
transition-duration: 0ms; }
|
||||
|
||||
.hint--bounce:before, .hint--bounce:after {
|
||||
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,740 @@
|
|||
/*!
|
||||
* clipboard.js v1.5.10
|
||||
* https://zenorocha.github.io/clipboard.js
|
||||
*
|
||||
* Licensed MIT © Zeno Rocha
|
||||
*/
|
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Clipboard = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
var matches = require('matches-selector')
|
||||
|
||||
module.exports = function (element, selector, checkYoSelf) {
|
||||
var parent = checkYoSelf ? element : element.parentNode
|
||||
|
||||
while (parent && parent !== document) {
|
||||
if (matches(parent, selector)) return parent;
|
||||
parent = parent.parentNode
|
||||
}
|
||||
}
|
||||
|
||||
},{"matches-selector":5}],2:[function(require,module,exports){
|
||||
var closest = require('closest');
|
||||
|
||||
/**
|
||||
* Delegates event to a selector.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @param {Boolean} useCapture
|
||||
* @return {Object}
|
||||
*/
|
||||
function delegate(element, selector, type, callback, useCapture) {
|
||||
var listenerFn = listener.apply(this, arguments);
|
||||
|
||||
element.addEventListener(type, listenerFn, useCapture);
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
element.removeEventListener(type, listenerFn, useCapture);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds closest match and invokes callback.
|
||||
*
|
||||
* @param {Element} element
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Function}
|
||||
*/
|
||||
function listener(element, selector, type, callback) {
|
||||
return function(e) {
|
||||
e.delegateTarget = closest(e.target, selector, true);
|
||||
|
||||
if (e.delegateTarget) {
|
||||
callback.call(element, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = delegate;
|
||||
|
||||
},{"closest":1}],3:[function(require,module,exports){
|
||||
/**
|
||||
* Check if argument is a HTML element.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.node = function(value) {
|
||||
return value !== undefined
|
||||
&& value instanceof HTMLElement
|
||||
&& value.nodeType === 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a list of HTML elements.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.nodeList = function(value) {
|
||||
var type = Object.prototype.toString.call(value);
|
||||
|
||||
return value !== undefined
|
||||
&& (type === '[object NodeList]' || type === '[object HTMLCollection]')
|
||||
&& ('length' in value)
|
||||
&& (value.length === 0 || exports.node(value[0]));
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a string.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.string = function(value) {
|
||||
return typeof value === 'string'
|
||||
|| value instanceof String;
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if argument is a function.
|
||||
*
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
exports.fn = function(value) {
|
||||
var type = Object.prototype.toString.call(value);
|
||||
|
||||
return type === '[object Function]';
|
||||
};
|
||||
|
||||
},{}],4:[function(require,module,exports){
|
||||
var is = require('./is');
|
||||
var delegate = require('delegate');
|
||||
|
||||
/**
|
||||
* Validates all params and calls the right
|
||||
* listener function based on its target type.
|
||||
*
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} target
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listen(target, type, callback) {
|
||||
if (!target && !type && !callback) {
|
||||
throw new Error('Missing required arguments');
|
||||
}
|
||||
|
||||
if (!is.string(type)) {
|
||||
throw new TypeError('Second argument must be a String');
|
||||
}
|
||||
|
||||
if (!is.fn(callback)) {
|
||||
throw new TypeError('Third argument must be a Function');
|
||||
}
|
||||
|
||||
if (is.node(target)) {
|
||||
return listenNode(target, type, callback);
|
||||
}
|
||||
else if (is.nodeList(target)) {
|
||||
return listenNodeList(target, type, callback);
|
||||
}
|
||||
else if (is.string(target)) {
|
||||
return listenSelector(target, type, callback);
|
||||
}
|
||||
else {
|
||||
throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds an event listener to a HTML element
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {HTMLElement} node
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenNode(node, type, callback) {
|
||||
node.addEventListener(type, callback);
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
node.removeEventListener(type, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an event listener to a list of HTML elements
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {NodeList|HTMLCollection} nodeList
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenNodeList(nodeList, type, callback) {
|
||||
Array.prototype.forEach.call(nodeList, function(node) {
|
||||
node.addEventListener(type, callback);
|
||||
});
|
||||
|
||||
return {
|
||||
destroy: function() {
|
||||
Array.prototype.forEach.call(nodeList, function(node) {
|
||||
node.removeEventListener(type, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an event listener to a selector
|
||||
* and returns a remove listener function.
|
||||
*
|
||||
* @param {String} selector
|
||||
* @param {String} type
|
||||
* @param {Function} callback
|
||||
* @return {Object}
|
||||
*/
|
||||
function listenSelector(selector, type, callback) {
|
||||
return delegate(document.body, selector, type, callback);
|
||||
}
|
||||
|
||||
module.exports = listen;
|
||||
|
||||
},{"./is":3,"delegate":2}],5:[function(require,module,exports){
|
||||
|
||||
/**
|
||||
* Element prototype.
|
||||
*/
|
||||
|
||||
var proto = Element.prototype;
|
||||
|
||||
/**
|
||||
* Vendor function.
|
||||
*/
|
||||
|
||||
var vendor = proto.matchesSelector
|
||||
|| proto.webkitMatchesSelector
|
||||
|| proto.mozMatchesSelector
|
||||
|| proto.msMatchesSelector
|
||||
|| proto.oMatchesSelector;
|
||||
|
||||
/**
|
||||
* Expose `match()`.
|
||||
*/
|
||||
|
||||
module.exports = match;
|
||||
|
||||
/**
|
||||
* Match `el` to `selector`.
|
||||
*
|
||||
* @param {Element} el
|
||||
* @param {String} selector
|
||||
* @return {Boolean}
|
||||
* @api public
|
||||
*/
|
||||
|
||||
function match(el, selector) {
|
||||
if (vendor) return vendor.call(el, selector);
|
||||
var nodes = el.parentNode.querySelectorAll(selector);
|
||||
for (var i = 0; i < nodes.length; ++i) {
|
||||
if (nodes[i] == el) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},{}],6:[function(require,module,exports){
|
||||
function select(element) {
|
||||
var selectedText;
|
||||
|
||||
if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
|
||||
element.focus();
|
||||
element.setSelectionRange(0, element.value.length);
|
||||
|
||||
selectedText = element.value;
|
||||
}
|
||||
else {
|
||||
if (element.hasAttribute('contenteditable')) {
|
||||
element.focus();
|
||||
}
|
||||
|
||||
var selection = window.getSelection();
|
||||
var range = document.createRange();
|
||||
|
||||
range.selectNodeContents(element);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
selectedText = selection.toString();
|
||||
}
|
||||
|
||||
return selectedText;
|
||||
}
|
||||
|
||||
module.exports = select;
|
||||
|
||||
},{}],7:[function(require,module,exports){
|
||||
function E () {
|
||||
// Keep this empty so it's easier to inherit from
|
||||
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
|
||||
}
|
||||
|
||||
E.prototype = {
|
||||
on: function (name, callback, ctx) {
|
||||
var e = this.e || (this.e = {});
|
||||
|
||||
(e[name] || (e[name] = [])).push({
|
||||
fn: callback,
|
||||
ctx: ctx
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
once: function (name, callback, ctx) {
|
||||
var self = this;
|
||||
function listener () {
|
||||
self.off(name, listener);
|
||||
callback.apply(ctx, arguments);
|
||||
};
|
||||
|
||||
listener._ = callback
|
||||
return this.on(name, listener, ctx);
|
||||
},
|
||||
|
||||
emit: function (name) {
|
||||
var data = [].slice.call(arguments, 1);
|
||||
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
|
||||
var i = 0;
|
||||
var len = evtArr.length;
|
||||
|
||||
for (i; i < len; i++) {
|
||||
evtArr[i].fn.apply(evtArr[i].ctx, data);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
off: function (name, callback) {
|
||||
var e = this.e || (this.e = {});
|
||||
var evts = e[name];
|
||||
var liveEvents = [];
|
||||
|
||||
if (evts && callback) {
|
||||
for (var i = 0, len = evts.length; i < len; i++) {
|
||||
if (evts[i].fn !== callback && evts[i].fn._ !== callback)
|
||||
liveEvents.push(evts[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove event from queue to prevent memory leak
|
||||
// Suggested by https://github.com/lazd
|
||||
// Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
|
||||
|
||||
(liveEvents.length)
|
||||
? e[name] = liveEvents
|
||||
: delete e[name];
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = E;
|
||||
|
||||
},{}],8:[function(require,module,exports){
|
||||
(function (global, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['module', 'select'], factory);
|
||||
} else if (typeof exports !== "undefined") {
|
||||
factory(module, require('select'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod, global.select);
|
||||
global.clipboardAction = mod.exports;
|
||||
}
|
||||
})(this, function (module, _select) {
|
||||
'use strict';
|
||||
|
||||
var _select2 = _interopRequireDefault(_select);
|
||||
|
||||
function _interopRequireDefault(obj) {
|
||||
return obj && obj.__esModule ? obj : {
|
||||
default: obj
|
||||
};
|
||||
}
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
||||
return typeof obj;
|
||||
} : function (obj) {
|
||||
return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
||||
};
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
var _createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
var ClipboardAction = function () {
|
||||
/**
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
function ClipboardAction(options) {
|
||||
_classCallCheck(this, ClipboardAction);
|
||||
|
||||
this.resolveOptions(options);
|
||||
this.initSelection();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines base properties passed from constructor.
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
|
||||
ClipboardAction.prototype.resolveOptions = function resolveOptions() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
this.action = options.action;
|
||||
this.emitter = options.emitter;
|
||||
this.target = options.target;
|
||||
this.text = options.text;
|
||||
this.trigger = options.trigger;
|
||||
|
||||
this.selectedText = '';
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.initSelection = function initSelection() {
|
||||
if (this.text) {
|
||||
this.selectFake();
|
||||
} else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.selectFake = function selectFake() {
|
||||
var _this = this;
|
||||
|
||||
var isRTL = document.documentElement.getAttribute('dir') == 'rtl';
|
||||
|
||||
this.removeFake();
|
||||
|
||||
this.fakeHandler = document.body.addEventListener('click', function () {
|
||||
return _this.removeFake();
|
||||
});
|
||||
|
||||
this.fakeElem = document.createElement('textarea');
|
||||
// Prevent zooming on iOS
|
||||
this.fakeElem.style.fontSize = '12pt';
|
||||
// Reset box model
|
||||
this.fakeElem.style.border = '0';
|
||||
this.fakeElem.style.padding = '0';
|
||||
this.fakeElem.style.margin = '0';
|
||||
// Move element out of screen horizontally
|
||||
this.fakeElem.style.position = 'fixed';
|
||||
this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
|
||||
// Move element to the same position vertically
|
||||
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
|
||||
document.body.appendChild(this.fakeElem);
|
||||
|
||||
this.selectedText = (0, _select2.default)(this.fakeElem);
|
||||
this.copyText();
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.removeFake = function removeFake() {
|
||||
if (this.fakeHandler) {
|
||||
document.body.removeEventListener('click');
|
||||
this.fakeHandler = null;
|
||||
}
|
||||
|
||||
if (this.fakeElem) {
|
||||
document.body.removeChild(this.fakeElem);
|
||||
this.fakeElem = null;
|
||||
}
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.selectTarget = function selectTarget() {
|
||||
this.selectedText = (0, _select2.default)(this.target);
|
||||
this.copyText();
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.copyText = function copyText() {
|
||||
var succeeded = undefined;
|
||||
|
||||
try {
|
||||
succeeded = document.execCommand(this.action);
|
||||
} catch (err) {
|
||||
succeeded = false;
|
||||
}
|
||||
|
||||
this.handleResult(succeeded);
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.handleResult = function handleResult(succeeded) {
|
||||
if (succeeded) {
|
||||
this.emitter.emit('success', {
|
||||
action: this.action,
|
||||
text: this.selectedText,
|
||||
trigger: this.trigger,
|
||||
clearSelection: this.clearSelection.bind(this)
|
||||
});
|
||||
} else {
|
||||
this.emitter.emit('error', {
|
||||
action: this.action,
|
||||
trigger: this.trigger,
|
||||
clearSelection: this.clearSelection.bind(this)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.clearSelection = function clearSelection() {
|
||||
if (this.target) {
|
||||
this.target.blur();
|
||||
}
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
};
|
||||
|
||||
ClipboardAction.prototype.destroy = function destroy() {
|
||||
this.removeFake();
|
||||
};
|
||||
|
||||
_createClass(ClipboardAction, [{
|
||||
key: 'action',
|
||||
set: function set() {
|
||||
var action = arguments.length <= 0 || arguments[0] === undefined ? 'copy' : arguments[0];
|
||||
|
||||
this._action = action;
|
||||
|
||||
if (this._action !== 'copy' && this._action !== 'cut') {
|
||||
throw new Error('Invalid "action" value, use either "copy" or "cut"');
|
||||
}
|
||||
},
|
||||
get: function get() {
|
||||
return this._action;
|
||||
}
|
||||
}, {
|
||||
key: 'target',
|
||||
set: function set(target) {
|
||||
if (target !== undefined) {
|
||||
if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {
|
||||
if (this.action === 'copy' && target.hasAttribute('disabled')) {
|
||||
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
|
||||
}
|
||||
|
||||
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
|
||||
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
|
||||
}
|
||||
|
||||
this._target = target;
|
||||
} else {
|
||||
throw new Error('Invalid "target" value, use a valid Element');
|
||||
}
|
||||
}
|
||||
},
|
||||
get: function get() {
|
||||
return this._target;
|
||||
}
|
||||
}]);
|
||||
|
||||
return ClipboardAction;
|
||||
}();
|
||||
|
||||
module.exports = ClipboardAction;
|
||||
});
|
||||
|
||||
},{"select":6}],9:[function(require,module,exports){
|
||||
(function (global, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['module', './clipboard-action', 'tiny-emitter', 'good-listener'], factory);
|
||||
} else if (typeof exports !== "undefined") {
|
||||
factory(module, require('./clipboard-action'), require('tiny-emitter'), require('good-listener'));
|
||||
} else {
|
||||
var mod = {
|
||||
exports: {}
|
||||
};
|
||||
factory(mod, global.clipboardAction, global.tinyEmitter, global.goodListener);
|
||||
global.clipboard = mod.exports;
|
||||
}
|
||||
})(this, function (module, _clipboardAction, _tinyEmitter, _goodListener) {
|
||||
'use strict';
|
||||
|
||||
var _clipboardAction2 = _interopRequireDefault(_clipboardAction);
|
||||
|
||||
var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);
|
||||
|
||||
var _goodListener2 = _interopRequireDefault(_goodListener);
|
||||
|
||||
function _interopRequireDefault(obj) {
|
||||
return obj && obj.__esModule ? obj : {
|
||||
default: obj
|
||||
};
|
||||
}
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
function _possibleConstructorReturn(self, call) {
|
||||
if (!self) {
|
||||
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
||||
}
|
||||
|
||||
return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
||||
}
|
||||
|
||||
function _inherits(subClass, superClass) {
|
||||
if (typeof superClass !== "function" && superClass !== null) {
|
||||
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
||||
}
|
||||
|
||||
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
||||
constructor: {
|
||||
value: subClass,
|
||||
enumerable: false,
|
||||
writable: true,
|
||||
configurable: true
|
||||
}
|
||||
});
|
||||
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
||||
}
|
||||
|
||||
var Clipboard = function (_Emitter) {
|
||||
_inherits(Clipboard, _Emitter);
|
||||
|
||||
/**
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
function Clipboard(trigger, options) {
|
||||
_classCallCheck(this, Clipboard);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Emitter.call(this));
|
||||
|
||||
_this.resolveOptions(options);
|
||||
_this.listenClick(trigger);
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines if attributes would be resolved using internal setter functions
|
||||
* or custom functions that were passed in the constructor.
|
||||
* @param {Object} options
|
||||
*/
|
||||
|
||||
|
||||
Clipboard.prototype.resolveOptions = function resolveOptions() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
|
||||
this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
|
||||
this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
|
||||
this.text = typeof options.text === 'function' ? options.text : this.defaultText;
|
||||
};
|
||||
|
||||
Clipboard.prototype.listenClick = function listenClick(trigger) {
|
||||
var _this2 = this;
|
||||
|
||||
this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {
|
||||
return _this2.onClick(e);
|
||||
});
|
||||
};
|
||||
|
||||
Clipboard.prototype.onClick = function onClick(e) {
|
||||
var trigger = e.delegateTarget || e.currentTarget;
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
|
||||
this.clipboardAction = new _clipboardAction2.default({
|
||||
action: this.action(trigger),
|
||||
target: this.target(trigger),
|
||||
text: this.text(trigger),
|
||||
trigger: trigger,
|
||||
emitter: this
|
||||
});
|
||||
};
|
||||
|
||||
Clipboard.prototype.defaultAction = function defaultAction(trigger) {
|
||||
return getAttributeValue('action', trigger);
|
||||
};
|
||||
|
||||
Clipboard.prototype.defaultTarget = function defaultTarget(trigger) {
|
||||
var selector = getAttributeValue('target', trigger);
|
||||
|
||||
if (selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
};
|
||||
|
||||
Clipboard.prototype.defaultText = function defaultText(trigger) {
|
||||
return getAttributeValue('text', trigger);
|
||||
};
|
||||
|
||||
Clipboard.prototype.destroy = function destroy() {
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
};
|
||||
|
||||
return Clipboard;
|
||||
}(_tinyEmitter2.default);
|
||||
|
||||
/**
|
||||
* Helper function to retrieve attribute value.
|
||||
* @param {String} suffix
|
||||
* @param {Element} element
|
||||
*/
|
||||
function getAttributeValue(suffix, element) {
|
||||
var attribute = 'data-clipboard-' + suffix;
|
||||
|
||||
if (!element.hasAttribute(attribute)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return element.getAttribute(attribute);
|
||||
}
|
||||
|
||||
module.exports = Clipboard;
|
||||
});
|
||||
|
||||
},{"./clipboard-action":8,"good-listener":4,"tiny-emitter":7}]},{},[9])(9)
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
document.getElementById('shorturl').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (e.target.href !== "") return;
|
||||
|
||||
xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", e.target.dataset.url, true);
|
||||
xhr.setRequestHeader('Accept', 'application/json');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
var resp = JSON.parse(xhr.responseText);
|
||||
|
||||
if (xhr.status === 200 && resp.error == null) {
|
||||
e.target.innerText = resp.shortUrl;
|
||||
e.target.href = resp.shortUrl;
|
||||
e.target.setAttribute('aria-label', 'Click to copy into clipboard')
|
||||
} else {
|
||||
e.target.setAttribute('aria-label', resp.error)
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
|
||||
var clipboard = new Clipboard("#shorturl", {
|
||||
text: function (trigger) {
|
||||
if (trigger.href == null) return;
|
||||
|
||||
return trigger.href;
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
e.trigger.setAttribute('aria-label', 'Successfully copied')
|
||||
});
|
||||
|
||||
clipboard.on('error', function (e) {
|
||||
e.trigger.setAttribute('aria-label', 'Your browser does not support coping to clipboard')
|
||||
});
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<title>{% block title %}{{ sitename }}{% endblock %}</title>
|
||||
<meta charset='utf-8' content='text/html' http-equiv='content-type'>
|
||||
<link href='{{ sitepath }}static/css/linx.css' media='screen, projection' rel='stylesheet' type='text/css'>
|
||||
<link href='{{ sitepath }}static/css/hint.css' rel='stylesheet' type='text/css'>
|
||||
<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,16 @@
|
|||
<span>file expires in {{ expiry }}</span> |
|
||||
{% endif %}
|
||||
{% block infomore %}{% endblock %}
|
||||
<span>{{ size }}</span> |
|
||||
<span>{{ size }}</span> |
|
||||
{% if shorturlEnabled %}
|
||||
{% if shorturl %}
|
||||
<a class="hint--top" aria-label="Click to copy into clipboard" id="shorturl"
|
||||
style="cursor: pointer;" href="{{shorturl}}">{{shorturl}}</a> |
|
||||
{% else %}
|
||||
<a class="hint--top" aria-label="Click to retrieve shortened url" id="shorturl"
|
||||
data-url="{{ sitepath }}{{filename}}/short" style="cursor: pointer;">short url</a> |
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<a href="{{ filename }}/torrent" download>torrent</a> |
|
||||
<a href="{{ sitepath }}selif/{{ filename }}" download>get</a>
|
||||
</div>
|
||||
|
|
@ -32,4 +41,10 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="{{ sitepath }}static/js/clipboard.js"></script>
|
||||
|
||||
{% if shorturlEnabled %}
|
||||
<script src="{{ sitepath }}static/js/shorturl.js"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block head %}
|
||||
<link href="{{ sitepath }}static/css/hint.css" rel="stylesheet" type="text/css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form id="reply" action='{{ sitepath }}upload' method='post'>
|
||||
<div id="main">
|
||||
|
|
|
|||
Loading…
Reference in New Issue