save: ability to copy-to-clipboard

src/components/dialogs/SaveDialog.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { getUrlData } from '$utils/history';
+import { copyToClipboard, getUrlData } from '$utils/history';
 import { toTranslit } from '$utils/format';
 import { TIPS } from '$constants/tips';
 import { MODES } from '$constants/modes';
+import { Icon } from '$components/panels/Icon';
 
 type Props = {
   address: String, // initial?
@@ -37,7 +38,7 @@ export class SaveDialog extends React.Component<Props, State> {
     const { path } = getUrlData();
     const { title, address } = this.state;
 
-    return toTranslit(address.trim()) || toTranslit(title.trim().toLowerCase()) || toTranslit(path.trim());
+    return toTranslit(address.trim()) || toTranslit(title.trim().toLowerCase()) || toTranslit(path.trim()).substr(0, 32);
   };
 
   setTitle = ({ target: { value } }) => this.setState({ title: (value || '') });
@@ -58,6 +59,13 @@ export class SaveDialog extends React.Component<Props, State> {
 
   forceSaveRequest = e => this.sendSaveRequest(e, true);
 
+  onCopy = e => {
+    e.preventDefault();
+
+    const { host } = getUrlData();
+    copyToClipboard(`http://${host}/${this.getAddress()}`);
+  };
+
   render() {
     const { title } = this.state;
     const { save_error, save_finished, save_overwriting, width } = this.props;
@@ -76,7 +84,16 @@ export class SaveDialog extends React.Component<Props, State> {
           <div className="save-description">
             <div className="save-address-input">
               <label className="save-address-label">http://{host}/</label>
-              <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
+              <input
+                type="text"
+                value={this.getAddress()}
+                onChange={this.setAddress}
+                readOnly={save_finished}
+                onCopy={this.onCopy}
+              />
+              <div className="save-address-copy" onClick={this.onCopy}>
+                <Icon icon="icon-copy-1" size={24} />
+              </div>
             </div>
 
             <div className="save-text">
@@ -97,6 +114,9 @@ export class SaveDialog extends React.Component<Props, State> {
                   save_overwriting &&
                   <div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
                 }
+                { save_finished &&
+                  <div className="button" onClick={this.onCopy}>Скопировать</div>
+                }
                 { save_finished &&
                   <div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
                 }

src/index.js

@@ -1,9 +1,10 @@
 /*
+
   todo add ability to copy-paste address after saving
-  todo hide sticker dialog on sticker selection
-    todo separate mode for stricker selection
   todo save progress
 
+  done hide sticker dialog on sticker selection
+    done separate mode for stricker selection
   done TEST: set initialData after saving map, clear is-modified
   done TEST: provider / logo triggers setChanged
   done shot mechanism (100%)

src/sprites/icon.svg

@@ -343,8 +343,13 @@
                 <path stroke="none" fill="black"/>
                 <path d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
             </g>
+
+            <g id="icon-copy-1" stroke="none">
+                <path stroke="none" fill="black"/>
+                <path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
+            </g>
         </svg>
     </defs>
 
-    <use xlink:href="#icon-trash-5" />
+    <use xlink:href="#icon-copy-1" />
 </svg>

src/styles/save.less

@@ -70,6 +70,24 @@
   white-space: nowrap;
 }
 
+.save-address-copy {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0 5px;
+  border-radius: 0 @panel_radius @panel_radius 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 250ms;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  svg {
+    fill: white;
+  }
+}
 .save-text {
   padding: 10px;
   line-height: 1.1em;

src/utils/history.js

@@ -33,3 +33,14 @@ export const pushLoaderState = state => {
 export const pushNetworkInitError = state => {
   document.getElementById('loader-error').style.opacity = 1;
 };
+
+export const copyToClipboard = str => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style = { position: 'absolute', left: '-9999px' };
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+}