Permalink
Browse files

Replace ZeroClipboard with clipboard.js. Fixes #32.

  • Loading branch information...
1 parent fa5bd1b commit 450de0ebf4a2d9958752ff1c9e363a5609bc5acf @tomslominski committed Jul 24, 2016
View
@@ -53,3 +53,5 @@ Licensing
Just like YOURLS, Infinity Squared is licensed under the MIT license. Basically, you can do whatever you want with it as long as you give attribution wherever you use it. There is no guarantee that this software will work.
You can find the full license in the root directory of Infinity Squared, under LICENSE.md.
+
+Clipboard.js is also licensed under the MIT license.
View
@@ -20,35 +20,14 @@
<?php global $dependencies; ?>
-<?php if ( in_array( 'ZeroClipboard', $dependencies ) ) { ?>
- <!-- ZeroClipboard is MIT licensed -->
- <script type="text/javascript" src="public/ZeroClipboard/ZeroClipboard.min.js"></script>
- <script>
- ZeroClipboard.config({
- swfPath: "public/ZeroClipboard/ZeroClipboard.swf"
- });
-
- var clipboardClient = new ZeroClipboard( document.getElementsByClassName("copy-button") );
-
- var copied = "<?php yourls_e( 'Copied!', 'isq_translation'); ?>";
-
- clipboardClient.on( 'aftercopy', function(event) {
- event.target.innerHTML = copied;
- } );
- </script>
+<?php if ( in_array( 'clipboard.js', $dependencies ) ) { ?>
+ <script src="public/js/clipboard.min.js"></script>
+ <script src="public/js/app.js"></script>
<?php }
if ( in_array( 'reCAPTCHA', $dependencies ) ) { ?>
- <script src='https://www.google.com/recaptcha/api.js'></script>
+ <script src="https://www.google.com/recaptcha/api.js"></script>
<?php } ?>
-<!-- Delay loading of transitions until page is fully loaded -->
-<script>
- window.addEventListener('load',function load() {
- window.removeEventListener('load', load, false);
- document.body.classList.remove('load');
- },false);
-</script>
-
</body>
</html>
View
@@ -6,7 +6,7 @@
?>
-<div class="content">
+<div class="content index">
<h2><?php yourls_e( 'Enter a new URL to shorten', 'isq_translation'); ?></h2>
<form method="post" action="result.php" class="newurl" novalidate>
<div class="form-item full-width">
@@ -16,19 +16,17 @@
</div>
<div class="halves">
-
- <div class="form-item half-width left">
- <p><label for="keyword" class="primary"><?php yourls_e( 'Custom keyword', 'isq_translation'); ?></label></p>
- <p><label for="keyword" class="secondary"><?php yourls_e( 'A keyword replaces the default short string.', 'isq_translation'); ?></label></p>
- <input type="text" id="keyword" name="keyword" autocorrect="off" autocapitalize="none" value="<?php echo($keyword); ?>">
- </div>
-
- <div class="form-item half-width right">
- <p><label for="title" class="primary"><?php yourls_e( 'Custom title', 'isq_translation'); ?></label></p>
- <p><label for="title" class="secondary"><?php yourls_e( 'Optional title used when sharing a link from YOURLS using social sharers.', 'isq_translation'); ?></label></p>
- <input type="text" id="title" name="title" value="<?php echo($title); ?>">
- </div>
-
+ <div class="form-item half-width left">
+ <p><label for="keyword" class="primary"><?php yourls_e( 'Custom keyword', 'isq_translation'); ?></label></p>
+ <p><label for="keyword" class="secondary"><?php yourls_e( 'A keyword replaces the default short string.', 'isq_translation'); ?></label></p>
+ <input type="text" id="keyword" name="keyword" autocorrect="off" autocapitalize="none" value="<?php echo($keyword); ?>">
+ </div>
+
+ <div class="form-item half-width right">
+ <p><label for="title" class="primary"><?php yourls_e( 'Custom title', 'isq_translation'); ?></label></p>
+ <p><label for="title" class="secondary"><?php yourls_e( 'Optional title used when sharing a link from YOURLS using social sharers.', 'isq_translation'); ?></label></p>
+ <input type="text" id="title" name="title" value="<?php echo($title); ?>">
+ </div>
</div>
<?php
Oops, something went wrong.
Oops, something went wrong.
Binary file not shown.
@@ -8,7 +8,6 @@
ISQ::$general = array(
'name' => 'URL shortener', // The name of your URL shortener
'qr' => TRUE, // Do you want to display a QR code?
- 'clipboard' => 1, // Do you want to enable zeroClipboard? (uses flash)
'customstyle' => TRUE // Do you want to enable the custom stylesheet, found in public/custom.css?
);
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+ <title>clippy</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="clippy" fill="#000000">
+ <path d="M2,13 L6,13 L6,14 L2,14 L2,13 L2,13 Z M7,7 L2,7 L2,8 L7,8 L7,7 L7,7 Z M9,10 L9,8 L6,11 L9,14 L9,12 L14,12 L14,10 L9,10 L9,10 Z M4.5,9 L2,9 L2,10 L4.5,10 L4.5,9 L4.5,9 Z M2,12 L4.5,12 L4.5,11 L2,11 L2,12 L2,12 Z M11,13 L12,13 L12,15 C11.98,15.28 11.89,15.52 11.7,15.7 C11.51,15.88 11.28,15.98 11,16 L1,16 C0.45,16 0,15.55 0,15 L0,4 C0,3.45 0.45,3 1,3 L4,3 C4,1.89 4.89,1 6,1 C7.11,1 8,1.89 8,3 L11,3 C11.55,3 12,3.45 12,4 L12,9 L11,9 L11,6 L1,6 L1,15 L11,15 L11,13 L11,13 Z M2,5 L10,5 C10,4.45 9.55,4 9,4 L8,4 C7.45,4 7,3.55 7,3 C7,2.45 6.55,2 6,2 C5.45,2 5,2.45 5,3 C5,3.55 4.55,4 4,4 L3,4 C2.45,4 2,4.45 2,5 L2,5 Z" id="Shape"></path>
+ </g>
+ </g>
+</svg>
View
@@ -0,0 +1,50 @@
+function filterNodeListById( nodeList, id ) {
+
+ var elements = Array.prototype.slice.call( nodeList );
+
+ for (var i = elements.length - 1; i >= 0; i--) {
+ if( elements[i].id == id ) {
+ return elements[i];
+ }
+ }
+
+}
+
+// Clipboard.js
+if( document.querySelectorAll( '.copy-button' ).length > 0 ) {
+
+ var clipboard = new Clipboard( '.copy-button' );
+ var clipboardTimeout = 2000;
+
+ clipboard.on( 'success', function( event ) {
+ var errorElement = filterNodeListById( event.trigger.parentNode.childNodes, 'copy-success' );
+
+ errorElement.className += " visible";
+
+ window.setTimeout( function() {
+ errorElement.className = errorElement.className.replace(/\bvisible\b/,'');
+ }, clipboardTimeout );
+ } );
+
+ clipboard.on( 'error', function( event ) {
+ var errorElement = filterNodeListById( event.trigger.parentNode.childNodes, 'copy-error' );
+ var osClass;
+
+ if( /iPhone|iPad/i.test(navigator.userAgent) ) {
+ osClass = 'mobile';
+ } else if ( /Mac/i.test(navigator.userAgent) ) {
+ osClass = 'macos';
+ } else if ( /Windows/i.test(navigator.userAgent) || /X11/i.test(navigator.userAgent) ) {
+ osClass = 'pc';
+ } else {
+ osClass = 'other';
+ }
+
+ errorElement.className += " visible " + osClass;
+
+ window.setTimeout( function() {
+ errorElement.className = errorElement.className.replace(/\bvisible\b/,'');
+ }, clipboardTimeout );
+ } );
+
+}
@@ -0,0 +1,7 @@
+/*!
+ * clipboard.js v1.5.12
+ * https://zenorocha.github.io/clipboard.js
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,o){function i(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(r)return r(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return i(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a<o.length;a++)i(o[a]);return i}({1:[function(t,e,n){var o=t("matches-selector");e.exports=function(t,e,n){for(var i=n?t:t.parentNode;i&&i!==document;){if(o(i,e))return i;i=i.parentNode}}},{"matches-selector":5}],2:[function(t,e,n){function o(t,e,n,o,r){var a=i.apply(this,arguments);return t.addEventListener(n,a,r),{destroy:function(){t.removeEventListener(n,a,r)}}}function i(t,e,n,o){return function(n){n.delegateTarget=r(n.target,e,!0),n.delegateTarget&&o.call(t,n)}}var r=t("closest");e.exports=o},{closest:1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){var e=Object.prototype.toString.call(t);return"[object Function]"===e}},{}],4:[function(t,e,n){function o(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!c.string(e))throw new TypeError("Second argument must be a String");if(!c.fn(n))throw new TypeError("Third argument must be a Function");if(c.node(t))return i(t,e,n);if(c.nodeList(t))return r(t,e,n);if(c.string(t))return a(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function i(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function r(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function a(t,e,n){return s(document.body,t,e,n)}var c=t("./is"),s=t("delegate");e.exports=o},{"./is":3,delegate:2}],5:[function(t,e,n){function o(t,e){if(r)return r.call(t,e);for(var n=t.parentNode.querySelectorAll(e),o=0;o<n.length;++o)if(n[o]==t)return!0;return!1}var i=Element.prototype,r=i.matchesSelector||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||i.oMatchesSelector;e.exports=o},{}],6:[function(t,e,n){function o(t){var e;if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)t.focus(),t.setSelectionRange(0,t.value.length),e=t.value;else{t.hasAttribute("contenteditable")&&t.focus();var n=window.getSelection(),o=document.createRange();o.selectNodeContents(t),n.removeAllRanges(),n.addRange(o),e=n.toString()}return e}e.exports=o},{}],7:[function(t,e,n){function o(){}o.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function o(){i.off(t,o),e.apply(n,arguments)}var i=this;return o._=e,this.on(t,o,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,i=n.length;for(o;i>o;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],i=[];if(o&&e)for(var r=0,a=o.length;a>r;r++)o[r].fn!==e&&o[r].fn._!==e&&i.push(o[r]);return i.length?n[t]=i:delete n[t],this}},e.exports=o},{}],8:[function(e,n,o){!function(i,r){if("function"==typeof t&&t.amd)t(["module","select"],r);else if("undefined"!=typeof o)r(n,e("select"));else{var a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}}(this,function(t,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=n(e),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},a=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),c=function(){function t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return t.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""},t.prototype.initSelection=function t(){this.text?this.selectFake():this.target&&this.selectTarget()},t.prototype.selectFake=function t(){var e=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return e.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px",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,i.default)(this.fakeElem),this.copyText()},t.prototype.removeFake=function t(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)},t.prototype.selectTarget=function t(){this.selectedText=(0,i.default)(this.target),this.copyText()},t.prototype.copyText=function t(){var e=void 0;try{e=document.execCommand(this.action)}catch(n){e=!1}this.handleResult(e)},t.prototype.handleResult=function t(e){e?this.emitter.emit("success",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}):this.emitter.emit("error",{action:this.action,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})},t.prototype.clearSelection=function t(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},t.prototype.destroy=function t(){this.removeFake()},a(t,[{key:"action",set:function t(){var e=arguments.length<=0||void 0===arguments[0]?"copy":arguments[0];if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function t(){return this._action}},{key:"target",set:function t(e){if(void 0!==e){if(!e||"object"!==("undefined"==typeof e?"undefined":r(e))||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(e.hasAttribute("readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=e}},get:function t(){return this._target}}]),t}();t.exports=c})},{select:6}],9:[function(e,n,o){!function(i,r){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if("undefined"!=typeof o)r(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}}(this,function(t,e,n,o){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var l=i(e),u=i(n),f=i(o),d=function(t){function e(n,o){r(this,e);var i=a(this,t.call(this));return i.resolveOptions(o),i.listenClick(n),i}return c(e,t),e.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText},e.prototype.listenClick=function t(e){var n=this;this.listener=(0,f.default)(e,"click",function(t){return n.onClick(t)})},e.prototype.onClick=function t(e){var n=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new l.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})},e.prototype.defaultAction=function t(e){return s("action",e)},e.prototype.defaultTarget=function t(e){var n=s("target",e);return n?document.querySelector(n):void 0},e.prototype.defaultText=function t(e){return s("text",e)},e.prototype.destroy=function t(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)},e}(u.default);t.exports=d})},{"./clipboard-action":8,"good-listener":4,"tiny-emitter":7}]},{},[9])(9)});
View
@@ -200,6 +200,7 @@ input:not([type=submit]):not([type=file]) {
transition: box-shadow 0.5s, border 0.5s;
-webkit-appearance: none;
border-radius: 0;
+ height: 45px;
}
.g-recaptcha {
@@ -232,7 +233,7 @@ input[type=submit] {
display: inline-block;
}
-.button:hover, .zeroclipboard-is-hover {
+.button:hover {
background: #E2E2E2;
}
@@ -253,12 +254,62 @@ input[type=submit] {
font-weight: bold;
}
-.copy-button {
- margin-top: 2px;
+.input-with-copy {
+ position: relative;
}
-.copy-button:focus {
- outline: none;
+.input-with-copy input:not([type=submit]):not([type=file]) {
+ width: calc( 100% - 45px );
+}
+
+.input-with-copy .copy-button {
+ position: absolute;
+ right: 0;
+ top: 5px;
+ height: 45px;
+ width: 45px;
+ border-left: 0;
+}
+
+.copy-message {
+ position: absolute;
+ top: 6px;
+ left: 1px;
+ height: 43px;
+ line-height: 43px;
+ width: calc( 100% - 47px );
+ text-align: center;
+ background: rgba(0, 0, 0, 0.7);
+ transition: opacity 0.3s, visibility 0.3s;
+ color: white;
+ opacity: 0;
+ visibility: hidden;
+ -webkit-transform: translate3d(0, 0, 0); // WebKit animation fix
+}
+
+.copy-message.visible {
+ opacity: 1;
+ visibility: visible;
+}
+
+.copy-message .os {
+ display: none;
+}
+
+.copy-message.error.macos .macos {
+ display: block;
+}
+
+.copy-message.error.pc .pc {
+ display: block;
+}
+
+.copy-message.error.mobile .mobile {
+ display: block;
+}
+
+.copy-message.error.other .other {
+ display: block;
}
.social-button {
Oops, something went wrong.

0 comments on commit 450de0e

Please sign in to comment.