embed toolbar, loading indication are now relative to embed intent view

gulpfile.js

@@ -18,9 +18,11 @@ var transpile = require('gulp-es6-module-transpiler');
 var pkg = require('./package.json');
 
 var jsSrc = [
-  './src/js/*.js'
+  './src/js/**/*.js'
 ];
 
+var jsEntry = './src/js/index.js';
+
 var cssSrc = [
   './src/css/variables.less',
   './src/css/editor.less',
@@ -62,7 +64,7 @@ gulp.task('lint', function() {
 });
 
 gulp.task('build-js', function() {
-  return gulp.src(jsSrc)
+  return gulp.src(jsEntry)
              .pipe(transpile({ formatter: 'bundle' }))
              .pipe(concat(jsDistName))
              // Remove gulp-es6-module-transpiler's IIFE so we can add our own

package.json

@@ -44,6 +44,5 @@
     "gulp-uglify": "^1.1.0",
     "gulp-util": "~2.2.12",
     "qunitjs": "^1.17.1"
-
   }
 }

server/services/embed.js

@@ -2,11 +2,6 @@ var embedly = require('embedly');
 
 module.exports = function(req, res) {
 
-  var url = req.query.url;
-  if (!(/^https?:\/\//i).test(url)) {
-    url = 'http://' + url;
-  }
-
   new embedly({key: process.env.EMBEDLY_KEY}, function(err, api) {
     if (err) {
       return res.status(500).json(err);

src/css/animations.less

@@ -57,8 +57,8 @@
 }
 
 @-webkit-keyframes pop-right { 
-  0% { opacity: 0.8; -webkit-transform: scale(0.9) translateX(-14px); }
-  50% { opacity: 1; -webkit-transform: scale(1.05) translateX(4px); }
+  0% { opacity: 0.8; -webkit-transform: scale(0.9) translateX(-14px) translateY(-50%); }
+  50% { opacity: 1; -webkit-transform: scale(1.05) translateX(4px) translateY(-50%); }
   100% { }
 }
 @keyframes pop-right { 

src/css/editor.less

@@ -23,6 +23,9 @@
   content: attr(data-placeholder);
   color: #bbb;
 }
+.ck-editor > * {
+  position: relative;
+}
 .ck-editor a {
   color: @themeColorText;
 }

src/css/embeds.less

@@ -2,8 +2,20 @@
  * Embeds
  */
 
-.ck-embed-intent-btn {
+.ck-embed-intent {
   position: absolute;
+}
+
+.ck-embed-intent .ck-toolbar {
+  min-width: 100px;
+  left: 40px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.ck-embed-intent-btn {
+  position: relative;
   display: block;
   background: none;
   border: none;
@@ -40,13 +52,16 @@
   right: 0;
   bottom: 0;
 }
-.ck-embed-intent-btn.activated {
+.activated .ck-embed-intent-btn {
   -webkit-transform: rotate(-135deg);
           transform: rotate(-135deg);
 }
 
 .ck-embed-loading {
   position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -0.75em;
   width: 1.5em;
   height: 1.5em;
   border-radius: 50%;

src/css/toolbar.less

@@ -46,8 +46,7 @@
   -webkit-animation: pop-up 0.25s;
           animation: pop-up 0.25s;
 }
-.ck-toolbar.right,
-.ck-toolbar.right .ck-toolbar-prompt {
+.ck-toolbar.right {
   -webkit-animation: pop-right 0.25s;
           animation: pop-right 0.25s;
 }

src/js/renderers/editor-html-renderer.js

@@ -25,7 +25,7 @@ function embedRenderer(model) {
   var customRendererId = providerName && providerName.toUpperCase();
   var customRenderer = embedRenderers[customRendererId];
   if (!customRenderer && embedType === 'link' && embedAttrs.thumbnail) {
-    customRenderer = embedRenderers['LINK_IMAGE'];
+    customRenderer = embedRenderers.LINK_IMAGE;
   }
   var renderer = customRenderer ? customRenderer : this;
 

src/js/views/embed-intent.js

@@ -3,8 +3,8 @@ import Toolbar from './toolbar';
 import { inherit } from 'node_modules/content-kit-utils/src/object-utils';
 import { getSelectionBlockElement } from '../utils/selection-utils';
 import { elementContentIsEmpty, positionElementToLeftOf, positionElementCenteredIn } from '../utils/element-utils';
-import Keycodes from '../utils/keycodes';
 import { createDiv } from '../utils/element-utils';
+import Keycodes from '../utils/keycodes';
 
 var LayoutStyle = {
   GUTTER   : 1,
@@ -21,14 +21,17 @@ function computeLayoutStyle(rootElement) {
 function EmbedIntent(options) {
   var embedIntent = this;
   var rootElement = embedIntent.rootElement = options.rootElement;
-  options.tagName = 'button';
-  options.classNames = ['ck-embed-intent-btn'];
+  options.classNames = ['ck-embed-intent'];
   View.call(embedIntent, options);
 
+  embedIntent.isActive = false;
   embedIntent.editorContext = options.editorContext;
   embedIntent.loadingIndicator = createDiv('ck-embed-loading');
-  embedIntent.element.title = 'Insert image or embed...';
-  embedIntent.element.addEventListener('mouseup', function(e) {
+  embedIntent.button = document.createElement('button');
+  embedIntent.button.className = 'ck-embed-intent-btn';
+  embedIntent.button.title = 'Insert image or embed...';
+  embedIntent.element.appendChild(embedIntent.button);
+  embedIntent.button.addEventListener('mouseup', function(e) {
     if (embedIntent.isActive) {
       embedIntent.deactivate();
     } else {
@@ -37,8 +40,13 @@ function EmbedIntent(options) {
     e.stopPropagation();
   });
 
-  embedIntent.toolbar = new Toolbar({ embedIntent: embedIntent, editor: embedIntent.editorContext, commands: options.commands, direction: Toolbar.Direction.RIGHT });
-  embedIntent.isActive = false;
+  embedIntent.toolbar = new Toolbar({
+    container: embedIntent.element,
+    embedIntent: embedIntent,
+    editor: embedIntent.editorContext,
+    commands: options.commands,
+    direction: Toolbar.Direction.RIGHT
+  });
 
   function embedIntentHandler() {
     var blockElement = getSelectionBlockElement();
@@ -63,9 +71,6 @@ function EmbedIntent(options) {
   window.addEventListener('resize', function() {
     if(embedIntent.isShowing) {
       embedIntent.reposition();
-      if (embedIntent.toolbar.isShowing) {
-        embedIntent.toolbar.positionToContent(embedIntent.element);
-      }
     }
   });
 }
@@ -96,7 +101,6 @@ EmbedIntent.prototype.activate = function() {
   if (!this.isActive) {
     this.addClass('activated');
     this.toolbar.show();
-    this.toolbar.positionToContent(this.element);
     this.isActive = true;
   }
 };
@@ -113,12 +117,11 @@ EmbedIntent.prototype.showLoading = function() {
   var embedIntent = this;
   var loadingIndicator = embedIntent.loadingIndicator;
   embedIntent.hide();
-  embedIntent.container.appendChild(loadingIndicator);
-  positionElementCenteredIn(loadingIndicator, embedIntent.atNode);
+  embedIntent.atNode.appendChild(loadingIndicator);
 };
 
 EmbedIntent.prototype.hideLoading = function() {
-  this.container.removeChild(this.loadingIndicator);
+  this.atNode.removeChild(this.loadingIndicator);
 };
 
 export default EmbedIntent;