Merge pull request #3 from polarityio/develop

Add copy content button

components/block.js

@@ -15,7 +15,6 @@ polarity.export = PolarityComponent.extend({
  searchFilters: Ember.computed.alias('block.storage.searchFilters'),
  numSourcesToSearch: Ember.computed.alias('block.storage.numSourcesToSearch'),
  init: function () {
- console.log(this.get('details'))
  const sources = this.get('details.sources');
  const selectedSources = this.get('details.selectedSources');
  if (!this.get('block.storage.searchFilters')) {
@@ -33,9 +32,25 @@ polarity.export = PolarityComponent.extend({
  this.set('block.storage.numSourcesToSearch', this.get('block.storage.searchFilters.length'));
  }
 
+ let array = new Uint32Array(5);
+ this.set('uniqueIdPrefix', window.crypto.getRandomValues(array).join(''));
+
  this._super(...arguments);
  },
  actions: {
+ copyData: function () {
+ const savedViewLimit = this.get('viewLimit');
+ this.setMaxViewLimit();
+
+ Ember.run.scheduleOnce(
+ 'afterRender',
+ this,
+ this.copyElementToClipboard,
+ `security-blogs-container-${this.get('uniqueIdPrefix')}`
+ );
+
+ Ember.run.scheduleOnce('destroy', this, this.restoreCopyState, savedViewLimit);
+ },
  toggleFilter: function () {
  this.toggleProperty('viewFilters');
  },
@@ -86,9 +101,12 @@ polarity.export = PolarityComponent.extend({
  }
  },
  viewMore: function () {
- this.set('viewLimit', 10);
+ this.setMaxViewLimit();
  }
  },
+ setMaxViewLimit(){
+ this.set('viewLimit', this.get('maxViewLimit'));
+ },
  getNumSourcesSearched() {
  let numSourcesToSearch = 0;
  for (let i = 0; i < this.searchFilters.length; i++) {
@@ -97,5 +115,33 @@ polarity.export = PolarityComponent.extend({
  }
  }
  return numSourcesToSearch;
+ },
+ copyElementToClipboard(element) {
+ let images = document.getElementById(element).getElementsByTagName('img');
+ for (let i = 0; i < images.length; i++) {
+ images[i].style.display = 'none';
+ }
+
+ window.getSelection().removeAllRanges();
+ let range = document.createRange();
+
+ range.selectNode(typeof element === 'string' ? document.getElementById(element) : element);
+ window.getSelection().addRange(range);
+ document.execCommand('copy');
+ window.getSelection().removeAllRanges();
+
+ for (let i = 0; i < images.length; i++) {
+ images[i].style.display = 'block';
+ }
+ },
+ restoreCopyState(savedViewLimit) {
+ this.set('viewLimit', savedViewLimit);
+ this.set('showCopyMessage', true);
+
+ setTimeout(() => {
+ if (!this.isDestroyed) {
+ this.set('showCopyMessage', false);
+ }
+ }, 2000);
  }
 });

package.json

@@ -1,11 +1,11 @@
 {
  "main": "./integration.js",
  "name": "security-blogs",
- "version": "3.0.1-beta",
+ "version": "3.1.0",
  "private": true,
  "dependencies": {
  "async": "^3.2.4",
- "postman-request": "^2.88.1-postman.31",
+ "postman-request": "^2.88.1-postman.32",
  "uuid": "^8.3.2"
  }
 }

styles/style.less

@@ -38,8 +38,51 @@ label{
 }
 
 .filter-item{
- min-width: 110px;
+ min-width: 160px;
 }
 .filter-header{
  color: #9a9a9a;
+}
+
+.copy-btn-container {
+ flex: 1 1 auto;
+ position: absolute;
+ right: 10px;
+ top: 7px;
+
+ .copy-btn {
+ font-size: 12px;
+ padding: 0px;
+ height: 20px;
+
+ :active {
+ color: darken(#388e3c, 5%);
+ }
+ }
+
+ .copy-success-message {
+ position: absolute;
+ top: 20px;
+ right: 0px;
+ background-color: rgb(222, 226, 230);
+ min-width: max-content;
+ padding: 5px;
+ border-radius: 3px;
+
+ .copy-success-icon {
+ color: #aaa;
+ }
+
+ &.visible {
+ visibility: visible;
+ opacity: 1;
+ transition: opacity 0.25s linear;
+ }
+
+ &.hidden {
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 0s 0.25s, opacity 0.25s linear;
+ }
+ }
 }