new preview + share pane (#591)

* shareable link * copying works * updated tests * added preview list * loop through sizes * updated stub in test
clay · Aug 18, 2016 · 0785618 · 0785618
1 parent 4eed990
commit 0785618
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 31 deletions.
diff --git a/controllers/preview-pane.js b/controllers/preview-pane.js
@@ -0,0 +1,56 @@
+const dom = require('@nymag/dom'),
+  _ = require('lodash'),
+  previewSizes = {
+    small: { w: 375, h: 660 },
+    medium: { w: 768, h: 1024 },
+    large: { w: 1024, h: 768 }
+  };
+
+module.exports = function () {
+  function Constructor(el) {
+    // share elements
+    this.link = dom.find(el, '.share-input');
+    this.button = dom.find(el, '.share-copy');
+  }
+
+  Constructor.prototype = {
+    events: {
+      '.preview-link click': 'onPreview',
+      '.share-copy click': 'onCopy',
+    },
+
+    onPreview: function (e) {
+      var link = e.currentTarget,
+        url = link.getAttribute('href'),
+        size = _.find(Object.keys(previewSizes), (s) => link.classList.contains(s));
+
+      e.preventDefault();
+      window.open(url, `Preview${size}`, `resizable=yes,scrollbars=yes,width=${previewSizes[size].w},height=${previewSizes[size].h}`);
+    },
+
+    onCopy: function () {
+      var link = this.link,
+        button = this.button,
+        success;
+
+      try {
+        link.select();
+        success = document.execCommand('copy');
+
+        if (success) {
+          button.classList.remove('error');
+          button.classList.add('success');
+        } else {
+          button.classList.remove('success');
+          button.classList.add('error');
+        }
+      } catch (e) {
+        // some browsers can't do this.
+        button.classList.remove('success');
+        button.classList.add('error');
+        console.error(e.message, e.stack);
+      }
+    }
+  };
+  return Constructor;
+};
diff --git a/media/copy.svg b/media/copy.svg
diff --git a/media/preview-large.svg b/media/preview-large.svg
diff --git a/media/preview-medium.svg b/media/preview-medium.svg
diff --git a/media/preview-small.svg b/media/preview-small.svg
diff --git a/services/pane.js b/services/pane.js
@@ -13,6 +13,7 @@ var _ = require('lodash'),
   paneController = require('../controllers/pane'),
   filterableList = require('./filterable-list'),
   publishPaneController = require('../controllers/publish-pane'),
+  previewController = require('../controllers/preview-pane'),
   references = require('./references'),
   addComponent = require('./components/add-component'),
   select = require('./components/select'),
@@ -468,27 +469,31 @@ function addPreview(preview) {
 }
 
 /**
- * open preview dialog pane
+ * open preview + share pane
+ * @returns {Element}
  */
 function openPreview() {
-  var header = 'Preview Link',
-    innerEl = document.createDocumentFragment(),
-    previewUrl = edit.getPageUrl(),
-    pageActionsSubTemplate = tpl.get('.preview-actions-template'),
-    previewInput;
-
-  if (pageActionsSubTemplate) {
-    previewInput = dom.find(pageActionsSubTemplate, '.preview-input');
-  }
+  var pageUrl = edit.getPageUrl(),
+    previewHeader = 'Preview',
+    previewContent = tpl.get('.preview-actions-template'),
+    shareHeader = 'Shareable Link',
+    shareContent = tpl.get('.share-actions-template'),
+    el;
+
+  // set the page url into the responsive preview items
+  _.each(dom.findAll(previewContent, 'a'), function (link) {
+    link.setAttribute('href', pageUrl);
+  });
 
-  if (previewInput) {
-    previewInput.setAttribute('value', previewUrl);
-  }
+  // set the page url into the share tab
+  dom.find(shareContent, '.share-input').setAttribute('value', pageUrl);
 
-  // append actions to the doc fragment
-  innerEl.appendChild(pageActionsSubTemplate);
-  // create the root pane element
-  open([{header: header, content: innerEl}]);
+  el = open([{ header: previewHeader, content: previewContent }, { header: shareHeader, content: shareContent }]);
+
+  // init controller
+  ds.controller('preview-pane', previewController);
+  ds.get('preview-pane', el);
+  return el;
 }
 
 /**

diff --git a/services/pane.test.js b/services/pane.test.js
@@ -56,10 +56,36 @@ function stubCustomUrlTemplate() {
 }
 
 function stubPreviewActionsTemplate() {
-  return dom.create(`<div class="preview-actions actions">
-    <form class="preview-link">
-      <input class="preview-input" type="url" value="" placeholder=""></input>
-    </form>
+  return dom.create(`<ul class="preview-actions actions">
+    <li class="preview-item">
+      <a class="preview-link small">
+        <span class="preview-link-size">s</span>
+        <span class="preview-link-text">Small</span>
+        <span class="preview-link-icon">↑</span>
+      </a>
+    </li>
+    <li class="preview-item">
+      <a class="preview-link medium">
+        <span class="preview-link-size">m</span>
+        <span class="preview-link-text">Medium</span>
+        <span class="preview-link-icon">↑</span>
+      </a>
+    </li>
+    <li class="preview-item">
+      <a class="preview-link large">
+        <span class="preview-link-size">l</span>
+        <span class="preview-link-text">Large</span>
+        <span class="preview-link-icon">↑</span>
+      </a>
+    </li>
+  </ul>`);
+}
+
+function stubShareActionsTemplate() {
+  return dom.create(`<div class="info-message">Share the link below to preview the latest version of this page.</div>
+  <div class="share-actions actions">
+    <input class="share-input"></input>
+    <button class="share-copy">{% include 'public/media/components/clay-kiln/copy.svg' %}</button>
   </div>`);
 }
 
@@ -105,6 +131,7 @@ describe(dirname, function () {
       getTemplate.withArgs('.publish-messages-template').returns(stubMessageTemplate());
       getTemplate.withArgs('.publish-actions-template').returns(stubPublishTemplate());
       getTemplate.withArgs('.preview-actions-template').returns(stubPreviewActionsTemplate());
+      getTemplate.withArgs('.share-actions-template').returns(stubShareActionsTemplate());
       getTemplate.withArgs('.publish-error-message-template').returns(dom.create('<div>ERROR MESSAGE</div>'));
       getTemplate.withArgs('.publish-warning-message-template').returns(dom.create('<div>WARNING MESSAGE</div>'));
       getTemplate.withArgs('.publish-errors-template').returns(stubErrorsTemplate());
@@ -362,7 +389,8 @@ describe(dirname, function () {
       it('opens a preview pane', function () {
         lib.close();
         fn();
-        expect(document.querySelector('#pane-tab-1').innerHTML).to.equal('Preview Link');
+        expect(document.querySelector('#pane-tab-1').innerHTML).to.equal('Preview');
+        expect(document.querySelector('#pane-tab-2').innerHTML).to.equal('Shareable Link');
         expect(document.querySelectorAll('.pane-inner input').length).to.equal(1);
       });
     });

diff --git a/styleguide/pane.scss b/styleguide/pane.scss
@@ -452,7 +452,63 @@ $schedule-item-width: calc(50% - 8px);
   padding-top: 20px;
 }
 
-/* preview pane */
+/* preview / share pane */
+
+.kiln-toolbar-pane .preview-actions {
+  list-style: none;
+  margin: -20px -20px 0;
+  padding: 0;
+  position: relative;
+  width: calc(100% + 40px);
+}
+
+.kiln-toolbar-pane .preview-item {
+  border-bottom: 1px solid $grey;
+  margin: 0;
+  padding: 0 20px;
+  width: 100%;
+}
+
+.kiln-toolbar-pane .preview-link {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  line-height: 16px;
+  list-style: none;
+  margin: 0;
+  text-decoration: none;
+  width: 100%;
+
+  &:hover,
+  &:active,
+  &:visited {
+    text-decoration: none;
+  }
+}
+
+.kiln-toolbar-pane .preview-link-size {
+  @include icon-button($black-75, 22px);
+
+  flex: 0 0 auto;
+  margin-right: 10px;
+  padding: 0;
+}
+
+.kiln-toolbar-pane .preview-link-text {
+  @include primary-text();
+
+  flex: 1 0 auto;
+  padding: 15px 0;
+}
+
+.kiln-toolbar-pane .preview-link-icon {
+  @include icon-button($black-50, 18px);
+
+  flex: 0 0 auto;
+  margin-left: 5px;
+  padding: 0;
+}
 
 .kiln-toolbar-pane .info-message {
   @include primary-text();
@@ -461,18 +517,67 @@ $schedule-item-width: calc(50% - 8px);
   padding: 0 0 20px;
 }
 
-.kiln-toolbar-pane .preview-actions {
+.kiln-toolbar-pane .share-actions {
+  display: flex;
   width: 100%;
 }
 
-.kiln-toolbar-pane .preview-input {
+.kiln-toolbar-pane .share-input {
   @include input();
 
   cursor: initial;
+  flex: 0 1 auto;
   margin: 0;
   padding: 8px 10px 7px;
 }
 
+.kiln-toolbar-pane .share-copy {
+  @include button-outlined($black-25);
+
+  border-radius: 0;
+  flex: 0 0 auto;
+  height: 36px; // bump up the height to match input
+  margin: 0 0 0 -1px; // cover the input border
+  position: relative;
+
+  &:before,
+  &:after {
+    @include secondary-text();
+
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 8px);
+    transition: opacity 300ms ease-out;
+    white-space: nowrap;
+  }
+
+  // :before is the success message, :after is the error
+  // this allows us to fade them in (setting the content with the class messes up the animation)
+  &:before {
+    color: $blue;
+    content: 'Copied to clipboard!';
+  }
+
+  &:after {
+    color: $red;
+    content: 'Cannot copy link';
+  }
+
+  &.success:before {
+    opacity: 1;
+  }
+
+  &.error:after {
+    opacity: 1;
+  }
+
+  svg {
+    height: 20px;
+    width: 18px;
+  }
+}
+
 /* new page pane */
 
 .add-page-form {

diff --git a/template.nunjucks b/template.nunjucks
@@ -138,13 +138,39 @@
       </div>
     </template>
 
-    {# preview link #}
+    {# preview items #}
     <template class="preview-actions-template">
-      <div class="info-message">Share the link below to preview the latest version of this page before publishing</div>
-      <div class="preview-actions actions">
-        <form class="preview-link">
-          <input class="preview-input" type="url" value="" placeholder=""></input>
-        </form>
+      <ul class="preview-actions actions">
+        <li class="preview-item">
+          <a class="preview-link small">
+            <span class="preview-link-size">{% include 'public/media/components/clay-kiln/preview-small.svg' %}</span>
+            <span class="preview-link-text">Small</span>
+            <span class="preview-link-icon">{% include 'public/media/components/clay-kiln/new-tab.svg' %}</span>
+          </a>
+        </li>
+        <li class="preview-item">
+          <a class="preview-link medium">
+            <span class="preview-link-size">{% include 'public/media/components/clay-kiln/preview-medium.svg' %}</span>
+            <span class="preview-link-text">Medium</span>
+            <span class="preview-link-icon">{% include 'public/media/components/clay-kiln/new-tab.svg' %}</span>
+          </a>
+        </li>
+        <li class="preview-item">
+          <a class="preview-link large">
+            <span class="preview-link-size">{% include 'public/media/components/clay-kiln/preview-large.svg' %}</span>
+            <span class="preview-link-text">Large</span>
+            <span class="preview-link-icon">{% include 'public/media/components/clay-kiln/new-tab.svg' %}</span>
+          </a>
+        </li>
+      </ul>
+    </template>
+
+    {# share link #}
+    <template class="share-actions-template">
+      <div class="info-message">Share the link below to preview the latest version of this page.</div>
+      <div class="share-actions actions">
+        <input class="share-input"></input>
+        <button class="share-copy">{% include 'public/media/components/clay-kiln/copy.svg' %}</button>
       </div>
     </template>