Skip to content
This repository was archived by the owner on Oct 30, 2018. It is now read-only.

Commit

Permalink
Fixed video preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@jfresco
jfresco committed Feb 23, 2015
1 parent 16f412f commit 1c5cc6c
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 14 deletions.
4 changes: 4 additions & 0 deletions dist/quill.base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,10 @@
border: 1px dashed #000;
height: 200px;
}
.ql-video-tooltip .preview iframe {
height: 196px;
width: 272px;
}
.ql-video-tooltip .preview span {
display: inline-block;
position: absolute;
Expand Down
13 changes: 5 additions & 8 deletions dist/quill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9383,14 +9383,11 @@ VideoTooltip = (function(_super) {
VideoTooltip.prototype._preview = function() {
var img;
this._normalizeURL(this.textbox.value);
if (!this._matchVideoURL(this.textbox.value)) {
return;
}
if (this.preview.firstChild.tagName === 'IMG') {
return this.preview.firstChild.setAttribute('src', this.textbox.value);
if (this.preview.firstChild.tagName === 'IFRAME') {
return this.preview.firstChild.setAttribute('src', this.embedURL);
} else {
img = document.createElement('img');
img.setAttribute('src', this.textbox.value);
img = document.createElement('iframe');
img.setAttribute('src', this.embedURL);
return this.preview.replaceChild(img, this.preview.firstChild);
}
};
Expand Down Expand Up @@ -9865,7 +9862,7 @@ module.exports = Quill;


},{"../package.json":7,"./core/editor":9,"./core/format":10,"./core/normalizer":13,"./lib/dom":17,"./lib/range":20,"./themes/base":33,"./themes/snow":34,"eventemitter2":2,"lodash":1,"rich-text/lib/delta":3}],32:[function(_dereq_,module,exports){
module.exports = ".ql-image-tooltip{padding:10px;width:300px}.ql-image-tooltip:after{clear:both;content:\"\";display:table}.ql-image-tooltip a{border:1px solid #000;box-sizing:border-box;display:inline-block;float:left;padding:5px;text-align:center;width:50%}.ql-image-tooltip img{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.ql-image-tooltip .input{box-sizing:border-box;width:100%}.ql-image-tooltip .preview{margin:10px 0;position:relative;border:1px dashed #000;height:200px}.ql-image-tooltip .preview span{display:inline-block;position:absolute;text-align:center;top:40%;width:100%}.ql-link-tooltip{padding:5px 10px}.ql-link-tooltip input.input{width:170px}.ql-link-tooltip a.done,.ql-link-tooltip input.input{display:none}.ql-link-tooltip a.change{margin-right:4px}.ql-link-tooltip.editing a.done,.ql-link-tooltip.editing input.input{display:inline-block}.ql-link-tooltip.editing a.change,.ql-link-tooltip.editing a.remove,.ql-link-tooltip.editing a.url{display:none}.ql-multi-cursor{position:absolute;left:0;top:0;z-index:1000}.ql-multi-cursor .cursor{margin-left:-1px;position:absolute}.ql-multi-cursor .cursor-flag{bottom:100%;position:absolute;white-space:nowrap}.ql-multi-cursor .cursor-name{display:inline-block;color:#fff;padding:2px 8px}.ql-multi-cursor .cursor-caret{height:100%;position:absolute;width:2px}.ql-multi-cursor .cursor.hidden .cursor-flag{display:none}.ql-multi-cursor .cursor.top .cursor-flag{bottom:auto;top:100%}.ql-multi-cursor .cursor.right .cursor-flag{right:-2px}.ql-paste-manager{left:-100000px;position:absolute;top:50%}.ql-toolbar{box-sizing:border-box}.ql-tooltip{background-color:#fff;border:1px solid #000;box-sizing:border-box;position:absolute;top:0;white-space:nowrap;z-index:2000}.ql-tooltip a{cursor:pointer;text-decoration:none}.ql-video-tooltip{padding:10px;width:300px}.ql-video-tooltip:after{clear:both;content:\"\";display:table}.ql-video-tooltip a{border:1px solid #000;box-sizing:border-box;display:inline-block;float:left;padding:5px;text-align:center;width:50%}.ql-video-tooltip img{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.ql-video-tooltip .input{box-sizing:border-box;width:100%}.ql-video-tooltip .preview{margin:10px 0;position:relative;border:1px dashed #000;height:200px}.ql-video-tooltip .preview span{display:inline-block;position:absolute;text-align:center;top:40%;width:100%}.ql-container{box-sizing:border-box;cursor:text;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;line-height:1.42;margin:0;overflow-x:hidden;overflow-y:auto;padding:12px 15px;position:relative}.ql-editor{box-sizing:border-box;min-height:100%;outline:0;tab-size:4;white-space:pre-wrap}.ql-editor div{margin:0;padding:0}.ql-editor a{text-decoration:underline}.ql-editor b{font-weight:700}.ql-editor i{font-style:italic}.ql-editor s{text-decoration:line-through}.ql-editor u{text-decoration:underline}.ql-editor img{max-width:100%}.ql-editor blockquote,.ql-editor ol,.ql-editor ul{margin:0 0 0 2em;padding:0}.ql-editor ol{list-style-type:decimal}.ql-editor ul{list-style-type:disc}.ql-editor.ql-ie-10 br,.ql-editor.ql-ie-9 br{display:none}";
module.exports = ".ql-image-tooltip{padding:10px;width:300px}.ql-image-tooltip:after{clear:both;content:\"\";display:table}.ql-image-tooltip a{border:1px solid #000;box-sizing:border-box;display:inline-block;float:left;padding:5px;text-align:center;width:50%}.ql-image-tooltip img{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.ql-image-tooltip .input{box-sizing:border-box;width:100%}.ql-image-tooltip .preview{margin:10px 0;position:relative;border:1px dashed #000;height:200px}.ql-image-tooltip .preview span{display:inline-block;position:absolute;text-align:center;top:40%;width:100%}.ql-link-tooltip{padding:5px 10px}.ql-link-tooltip input.input{width:170px}.ql-link-tooltip a.done,.ql-link-tooltip input.input{display:none}.ql-link-tooltip a.change{margin-right:4px}.ql-link-tooltip.editing a.done,.ql-link-tooltip.editing input.input{display:inline-block}.ql-link-tooltip.editing a.change,.ql-link-tooltip.editing a.remove,.ql-link-tooltip.editing a.url{display:none}.ql-multi-cursor{position:absolute;left:0;top:0;z-index:1000}.ql-multi-cursor .cursor{margin-left:-1px;position:absolute}.ql-multi-cursor .cursor-flag{bottom:100%;position:absolute;white-space:nowrap}.ql-multi-cursor .cursor-name{display:inline-block;color:#fff;padding:2px 8px}.ql-multi-cursor .cursor-caret{height:100%;position:absolute;width:2px}.ql-multi-cursor .cursor.hidden .cursor-flag{display:none}.ql-multi-cursor .cursor.top .cursor-flag{bottom:auto;top:100%}.ql-multi-cursor .cursor.right .cursor-flag{right:-2px}.ql-paste-manager{left:-100000px;position:absolute;top:50%}.ql-toolbar{box-sizing:border-box}.ql-tooltip{background-color:#fff;border:1px solid #000;box-sizing:border-box;position:absolute;top:0;white-space:nowrap;z-index:2000}.ql-tooltip a{cursor:pointer;text-decoration:none}.ql-video-tooltip{padding:10px;width:300px}.ql-video-tooltip:after{clear:both;content:\"\";display:table}.ql-video-tooltip a{border:1px solid #000;box-sizing:border-box;display:inline-block;float:left;padding:5px;text-align:center;width:50%}.ql-video-tooltip img{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;position:absolute;right:0;top:0}.ql-video-tooltip .input{box-sizing:border-box;width:100%}.ql-video-tooltip .preview{margin:10px 0;position:relative;border:1px dashed #000;height:200px}.ql-video-tooltip .preview iframe{height:196px;width:272px}.ql-video-tooltip .preview span{display:inline-block;position:absolute;text-align:center;top:40%;width:100%}.ql-container{box-sizing:border-box;cursor:text;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;line-height:1.42;margin:0;overflow-x:hidden;overflow-y:auto;padding:12px 15px;position:relative}.ql-editor{box-sizing:border-box;min-height:100%;outline:0;tab-size:4;white-space:pre-wrap}.ql-editor div{margin:0;padding:0}.ql-editor a{text-decoration:underline}.ql-editor b{font-weight:700}.ql-editor i{font-style:italic}.ql-editor s{text-decoration:line-through}.ql-editor u{text-decoration:underline}.ql-editor img{max-width:100%}.ql-editor blockquote,.ql-editor ol,.ql-editor ul{margin:0 0 0 2em;padding:0}.ql-editor ol{list-style-type:decimal}.ql-editor ul{list-style-type:disc}.ql-editor.ql-ie-10 br,.ql-editor.ql-ie-9 br{display:none}";
},{}],33:[function(_dereq_,module,exports){
var BaseTheme, baseStyles, dom, _;

Expand Down
2 changes: 1 addition & 1 deletion dist/quill.min.js
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions dist/quill.snow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,10 @@
border: 1px dashed #000;
height: 200px;
}
.ql-video-tooltip .preview iframe {
height: 196px;
width: 272px;
}
.ql-video-tooltip .preview span {
display: inline-block;
position: absolute;
Expand Down
10 changes: 5 additions & 5 deletions src/modules/video-tooltip.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@ class VideoTooltip extends Tooltip

_preview: ->
this._normalizeURL(@textbox.value)
return unless this._matchVideoURL(@textbox.value)
if @preview.firstChild.tagName == 'IMG'
@preview.firstChild.setAttribute('src', @textbox.value)
# return unless this._matchVideoURL(@textbox.value)
if @preview.firstChild.tagName == 'IFRAME'
@preview.firstChild.setAttribute('src', @embedURL)
else
img = document.createElement('img')
img.setAttribute('src', @textbox.value)
img = document.createElement('iframe')
img.setAttribute('src', @embedURL)
@preview.replaceChild(img, @preview.firstChild)

_matchVideoURL: (url) ->
Expand Down
3 changes: 3 additions & 0 deletions src/themes/base/modules/video-tooltip.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@
position: relative
border: 1px dashed #000
height: 200px
iframe
height 196px
width 272px
span
display: inline-block
position: absolute
Expand Down

0 comments on commit 1c5cc6c

Please sign in to comment.