jquery oembed plugin

-Fix Kickstarter
-Fix Dailymotion
-Fix events order
-Fix Ebay regex
This commit is contained in:
Sebastien Hut 2015-01-22 18:07:45 +01:00
parent 8122c86203
commit 340dc6552c
8 changed files with 1482 additions and 205 deletions

View File

@ -1,61 +1,14 @@
/*global $, app*/
var _ = require('underscore');
var async = require('async');
var templates = require('../templates');
var embedQueue = window.embedQueue = async.cargo(function (embeds, cb) {
cb();
var urls = [];
_.each(embeds, function (embed) {
var url = embed.find('a.source')[0].href;
urls.push({
value: url,
el: embed[0]
});
});
$.ajax({
// We have to massage the data into the URL ourselves because
// jQuery won't let us have unencoded commas between encoded URLs
url: '/oembed?' + $.param({
maxwidth: 500
}) + '&urls=' + _.map(urls, function (item) { return encodeURIComponent(item.value); }).join(','),
dataType: 'jsonp',
success: function (data) {
var maxWidth = 500;
var maxTbWidth = 100;
data = _.filter(data, function (item, i) {
item.original = urls[i].value;
item.el = urls[i].el;
return item.type === 'video' || item.type === 'photo' || item.type === 'link' || item.type === 'rich';
});
data.forEach(function (item) {
if (item.width && item.height && item.width > maxWidth) {
var ratio = maxWidth / item.width;
item.width = maxWidth;
item.height = parseInt(item.height * ratio, 10);
}
if (item.thumbnail_width && item.thumbnail_height && item.thumbnail_width > maxTbWidth) {
var tbratio = maxTbWidth / item.thumbnail_width;
item.thumbnail_width = maxTbWidth;
item.thumbnail_height = parseInt(item.thumbnail_height * tbratio, 10);
}
$(item.el).replaceWith(templates.includes.embeds(item));
});
}
});
}, 5);
module.exports = function ($html, cb) {
cb = cb || function () {};
//if (!app.settings.chatEmbeds) return cb();
var $links;
var batches = [];
var allUrls = [];
var embeds = $html.find('.embed');
if (!embeds.length) embeds = $html.filter('.embed');
_.each(embeds, function (embed) {
embedQueue.push(embeds);
$($html).find("a.source").oembed(null, {
fallback : true,
includeHandle: false,
maxWidth: 490,
afterEmbed: function() {
$($html).find(".embeds").show();
}
});
};

File diff suppressed because it is too large Load Diff

View File

@ -6,9 +6,6 @@
"key": "./fakekeys/privatekey.pem",
"cert": "./fakekeys/certificate.pem"
},
"embedly": {
"key": ""
},
"session": {
"secret": "shhhhhh don't tell anyone ok?"
},

View File

@ -26,7 +26,6 @@
"moonboots-express": "2.x",
"node-uuid": "^1.4.1",
"notify.js": "0.0.3",
"oembed": "0.1.0",
"semi-static": "0.0.4",
"serve-static": "1.7.1",
"sound-effect-manager": "0.0.5",

View File

@ -0,0 +1,422 @@
div.oembedall-githubrepos {
border: 1px solid #DDD;
border-radius: 4px 4px 4px 4px;
list-style-type: none;
margin: 0 0 10px;
padding: 8px 10px 0;
font: 13.34px/1.4 helvetica,arial,freesans,clean,sans-serif;
/*background: url("http://github.com/images/icons/public.png") no-repeat scroll 6px 9px transparent;*/
width : 452px;
background-color:#fff;
}
div.oembedall-githubrepos .oembedall-body {
background: -moz-linear-gradient(center top , #FAFAFA, #EFEFEF) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear,left top,left bottom,from(#FAFAFA),to(#EFEFEF));;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top: 1px solid #EEE;
margin-left: -10px;
margin-top: 8px;
padding: 5px 10px;
width: 100%;
}
div.oembedall-githubrepos h3 {
font-size: 14px;
margin: 0;
padding-left: 18px;
white-space: nowrap;
}
div.oembedall-githubrepos p.oembedall-description {
color: #444;
font-size: 12px;
margin: 0 0 3px;
}
div.oembedall-githubrepos p.oembedall-updated-at {
color: #888;
font-size: 11px;
margin: 0;
}
div.oembedall-githubrepos ul.oembedall-repo-stats {
/*background: url("http://github.com/images/modules/pagehead/actions_fade.png") no-repeat scroll 0 0 transparent;*/
border: medium none;
float: right;
font-size: 11px;
font-weight: bold;
padding-left: 15px;
position: relative;
z-index: 5;
margin:0;
}
div.oembedall-githubrepos ul.oembedall-repo-stats li {
border: medium none;
color: #666;
display: inline-block;
list-style-type: none;
margin: 0 !important;
}
div.oembedall-githubrepos ul.oembedall-repo-stats li a {
background-color: transparent;
background-position: 5px -2px;
border: medium none;
color: #666 !important;
background-position: 5px -2px;
background-repeat: no-repeat;
border-left: 1px solid #DDD;
display: inline-block;
height: 21px;
line-height: 21px;
padding: 0 5px 0 23px;
}
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a {
border-left: medium none;
margin-right: -3px;
}
div.oembedall-githubrepos ul.oembedall-repo-stats li a:hover {
background: none no-repeat scroll 5px -27px #4183C4;
color: #FFFFFF !important;
text-decoration: none;
}
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a:hover {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
ul.oembedall-repo-stats li:last-child a:hover {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
div.oembedall-githubrepos ul.oembedall-repo-stats li.oembedall-watchers a {
/*background-image: url("http://github.com/images/modules/pagehead/repostat_watchers.png");*/
}
div.oembedall-githubrepos ul.oembedall-repo-stats li.oembedall-forks a {
/*background-image: url("http://github.com/images/modules/pagehead/repostat_forks.png");*/
}
span.oembedall-closehide{
background-color: #aaa;
border-radius: 2px;
cursor: pointer;
margin-right: 3px;
}
div.oembedall-container {
margin-top : 5px;
text-align: left;
}
.oembedall-ljuser {
font-weight: bold;
}
.oembedall-ljuser img {
vertical-align: bottom;
border: 0;
padding-right: 1px;
}
.oembedall-stoqembed {
border-bottom: 1px dotted #999999;
float: left;
overflow: hidden;
padding: 11px 0;
width: 730px;
line-height: 1;
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 80%;
text-align: left;
margin: 0;
padding: 0;
}
.oembedall-stoqembed a {
color: #0077CC;
text-decoration: none;
margin: 0;
padding: 0;
}
.oembedall-stoqembed a:hover {
text-decoration: underline;
}
.oembedall-stoqembed a:visited {
color: #4A6B82;
}
.oembedall-stoqembed h3 {
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 0;
padding: 0;
}
.oembedall-stoqembed .oembedall-reputation-score {
color: #444444;
font-size: 120%;
font-weight: bold;
margin-right: 2px;
}
.oembedall-stoqembed .oembedall-user-info {
height: 35px;
width: 185px;
}
.oembedall-stoqembed .oembedall-user-info .oembedall-user-gravatar32 {
float: left;
height: 32px;
width: 32px;
}
.oembedall-stoqembed .oembedall-user-info .oembedall-user-details {
float: left;
margin-left: 5px;
overflow: hidden;
white-space: nowrap;
width: 145px;
}
.oembedall-stoqembed .oembedall-question-hyperlink {
font-weight: bold;
}
.oembedall-stoqembed .oembedall-stats {
background: none repeat scroll 0 0 #EEEEEE;
margin: 0 0 0 7px;
padding: 4px 7px 6px;
width: 58px;
}
.oembedall-stoqembed .oembedall-statscontainer {
float: left;
margin-right: 8px;
width: 86px;
}
.oembedall-stoqembed .oembedall-votes {
color: #555555;
padding: 0 0 7px;
text-align: center;
}
.oembedall-stoqembed .oembedall-vote-count-post {
display: block;
font-size: 240%;
color: #808185;
display: block;
font-weight: bold;
}
.oembedall-stoqembed .oembedall-views {
color: #999999;
padding-top: 4px;
text-align: center;
}
.oembedall-stoqembed .oembedall-status {
margin-top: -3px;
padding: 4px 0;
text-align: center;
background: none repeat scroll 0 0 #75845C;
color: #FFFFFF;
}
.oembedall-stoqembed .oembedall-status strong {
color: #FFFFFF;
display: block;
font-size: 140%;
}
.oembedall-stoqembed .oembedall-summary {
float: left;
width: 635px;
}
.oembedall-stoqembed .oembedall-excerpt {
line-height: 1.2;
margin: 0;
padding: 0 0 5px;
}
.oembedall-stoqembed .oembedall-tags {
float: left;
line-height: 18px;
}
.oembedall-stoqembed .oembedall-tags a:hover {
text-decoration: none;
}
.oembedall-stoqembed .oembedall-post-tag {
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
color: #3E6D8E;
font-size: 90%;
line-height: 2.4;
margin: 2px 2px 2px 0;
padding: 3px 4px;
text-decoration: none;
white-space: nowrap;
}
.oembedall-stoqembed .oembedall-post-tag:hover {
background-color: #3E6D8E;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
color: #E0EAF1;
}
.oembedall-stoqembed .oembedall-fr {
float: right;
}
.oembedall-stoqembed .oembedall-statsarrow {
background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3");
background-repeat: no-repeat;
overflow: hidden;
background-position: 0 -435px;
float: right;
height: 13px;
margin-top: 12px;
width: 7px;
}
.oembedall-facebook1 {
border: #1A3C6C solid 1px;
padding:0px;
font: 13.34px/1.4 verdana;
width : 500px;
}
.oembedall-facebook2 {
background-color: #627add;
}
.oembedall-facebook2 a {
color: #e8e8e8;
text-decoration:none;
}
.oembedall-facebookBody {
background-color: #fff;
vertical-align: top;
padding: 5px;
}
.oembedall-facebookBody .contents {
display: inline-block;
width: 100%;
}
.oembedall-facebookBody div img {
float: left;
margin-right: 5px;
}
div.oembedall-lanyard{
-webkit-box-shadow: none;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.4000000059604645s;
-webkit-transition-property: width;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
box-shadow: none;
color: #112644;
display: block;
float: left;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 16px;
height: 253px;
line-height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: none;
min-height: 0px;
outline-color: #112644;
outline-style: none;
outline-width: 0px;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-align: left;
vertical-align: baseline;
width: 804px;
}
div.oembedall-lanyard .tagline{
font-size: 1.5em;
}
div.oembedall-lanyard .wrapper{
overflow: hidden;
clear: both;
}
div.oembedall-lanyard .split{
float: left;
display: inline;
}
div.oembedall-lanyard .prominent-place .flag:link, div.oembedall-lanyard .prominent-place .flag:visited,div.oembedall-lanyard .prominent-place .flag:hover
,div.oembedall-lanyard .prominent-place .flag:focus,div.oembedall-lanyard .prominent-place .flag:active {
float: left;
display: block;
width: 48px;
height: 48px;
position: relative;
top: -5px;
margin-right: 10px;
}
div.oembedall-lanyard .place-context {
font-size: 0.889em;
}
div.oembedall-lanyard .prominent-place .sub-place {
display: block;
}
div.oembedall-lanyard .prominent-place{
font-size: 1.125em;
line-height: 1.1em;
font-weight: normal;
}
div.oembedall-lanyard .main-date{
color: #8CB4E0;
font-weight: bold;
line-height: 1.1;
}
div.oembedall-lanyard .first{
margin-left: 0;
width: 48.57%;
margin: 0 0 0 2.857%;
}

View File

@ -1537,63 +1537,24 @@ button.secondary:hover:not(:disabled) {
.embeds {
margin: 0px;
padding: 0px;
display: none;
}
.embed {
width: 500px;
max-width: 500px;
margin-bottom: 20px;
}
.embed p,
.embed p:hover {
margin: 0px;
padding: 6px;
background-color: #e6eaef;
}
.embed a,
.embed a:hover {
color: #34465a;
}
.embed.active {
display: inline-block;
margin: 5px;
padding: 10px;
border: 1px solid #eee;
background-color: #f0f0f0;
text-align: center;
}
.embed.active img {
margin-bottom: 5px;
}
.embed.active .description {
border: 1px solid #eee;
background-color: #fff;
margin: 0px;
padding: 10px;
text-align: left;
font-size: 11px;
font-weight: normal;
}
.embed.active .description h3 {
font-size: 12px;
margin: 0px;
padding: 2px;
border-bottom: 1px solid #eee;
}
.embed.active .description p {
margin: 3px;
padding: 2px;
}
.embed.active a.link img,
.embed.active a.twitter img {
float: left;
}
.embed.active a.link img + .description,
.embed.active a.twitter img + .description {
margin-left: 110px;
font-size: 12px;
}
.embed.active a.link h4,
.embed.active a.twitter h4 {
font-size: 14px;
margin: 0px;
padding: 2px;
}
.embed.collapsed img {
display: none;
}
.embed.hidden {
.embed a.source {
display: none;
}
.main > div {

View File

@ -541,56 +541,20 @@
.embeds
margin: 0px
padding: 0px
display: none
.embed
width: 500px
max-width: 500px
margin-bottom: 20px
p, p:hover
margin: 0px
padding: 6px
background-color: #E6EAEF
a, a:hover
color: #34465a
&.active
display: inline-block
margin: 5px
padding: 10px
border: 1px solid #eee
background-color: lighten($gray-lighter, 50%)
text-align: center
img
margin-bottom: 5px
.description
border: 1px solid #eee
background-color: #fff
margin: 0px
padding: 10px
text-align: left
font-size: 11px
font-weight: normal
h3
font-size: 12px
margin: 0px
padding: 2px
border-bottom: 1px solid #eee
p
margin: 3px
padding: 2px
a.link, a.twitter
img
float: left
img + .description
margin-left: 110px
font-size: 12px
h4
font-size: 14px
margin: 0px
padding: 2px
&.collapsed
img
display: none
&.hidden
a.source
display: none

View File

@ -5,7 +5,6 @@ var helmet = require('helmet');
var Moonboots = require('moonboots-express');
var config = require('getconfig');
var templatizer = require('templatizer');
var oembed = require('oembed');
var async = require('async');
var app = express();
@ -20,9 +19,6 @@ if (!config.isDev) {
app.use(helmet.iexss());
app.use(helmet.contentTypeOptions());
oembed.EMBEDLY_URL = config.embedly.url || 'https://api.embed.ly/1/oembed';
oembed.EMBEDLY_KEY = config.embedly.key;
var webappManifest = fs.readFileSync('./public/x-manifest.webapp');
app.set('views', __dirname + '/views');
@ -54,53 +50,6 @@ app.get('/manifest.webapp', function (req, res, next) {
res.send(webappManifest);
});
app.get('/oembed', function (req, res) {
var callback = req.query.callback;
if (req.query.url) {
oembed.fetch(req.query.url, req.query, function (err, result) {
if (err || !result) {
return res.status(500).send();
}
res.status(200);
res.set('Content-Type', oembed.MIME_OEMBED_JSON);
if (callback) {
res.send(callback + '(' + JSON.stringify(result) + ')');
} else {
res.send(JSON.stringify(result));
}
});
} else if (req.query.urls) {
var cache = {};
var urls = req.query.urls.split(',');
delete req.query.urls;
async.forEach(urls, function (url, cb) {
oembed.fetch(url, req.query, function (err, result) {
if (err || !result) {
result = {type: 'error'};
}
cache[url] = result;
cb();
});
}, function () {
res.status(200);
var results = [];
urls.forEach(function (url) {
results.push(cache[url]);
});
if (callback) {
res.set('Content-Type', 'application/javascript');
res.send(callback + '(' + JSON.stringify(results) + ')');
} else {
res.set('Content-Type', 'application/json');
res.send(JSON.stringify(results));
}
});
} else {
res.status(400).send();
}
});
app.use(function handleError(err, req, res, next) {
var errorResult = {message: 'Something bad happened :('};
@ -129,13 +78,15 @@ var clientApp = new Moonboots({
__dirname + '/clientapp/libraries/ui.js',
__dirname + '/clientapp/libraries/resampler.js',
__dirname + '/clientapp/libraries/IndexedDBShim.min.js',
__dirname + '/clientapp/libraries/sugar-1.2.1-dates.js'
__dirname + '/clientapp/libraries/sugar-1.2.1-dates.js',
__dirname + '/clientapp/libraries/jquery.oembed.js'
],
browserify: {
debug: false
},
stylesheets: [
__dirname + '/public/css/otalk.css'
__dirname + '/public/css/otalk.css',
__dirname + '/public/css/jquery.oembed.css'
],
beforeBuildJS: function () {
if (config.isDev) {