mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-27 17:46:05 -05:00
Merge pull request #2561 from techAPJ/master
FEATURE: ship lazyYT plugin by default
This commit is contained in:
Robin Ward
commit
75c477a9aa
6 changed files with 138 additions and 0 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -44,6 +44,7 @@ log/
|
||||||
# Ignore plugins except for the bundled ones.
|
# Ignore plugins except for the bundled ones.
|
||||||
/plugins/*
|
/plugins/*
|
||||||
!/plugins/emoji/
|
!/plugins/emoji/
|
||||||
|
!/plugins/lazyYT/
|
||||||
!/plugins/poll/
|
!/plugins/poll/
|
||||||
/plugins/*/auto_generated/
|
/plugins/*/auto_generated/
|
||||||
|
|
||||||
|
|
|
||||||
3
plugins/lazyYT/README.md
Normal file
3
plugins/lazyYT/README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# lazyYT
|
||||||
|
|
||||||
|
Lazy load YouTube videos plugin for [Discourse](http://discourse.org), highly inspired by the [lazyYT](https://github.com/tylerpearson/lazyYT) jQuery plugin.
|
||||||
13
plugins/lazyYT/assets/javascripts/initializers/lazyYT.js.es6
Normal file
13
plugins/lazyYT/assets/javascripts/initializers/lazyYT.js.es6
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
Apply lazyYT when the app boots
|
||||||
|
**/
|
||||||
|
import { decorateCooked } from 'discourse/lib/plugin-api';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "apply-lazyYT",
|
||||||
|
initialize: function(container) {
|
||||||
|
decorateCooked(container, function($elem) {
|
||||||
|
$('.lazyYT', $elem).lazyYT();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
59
plugins/lazyYT/assets/javascripts/lazyYT.js
Normal file
59
plugins/lazyYT/assets/javascripts/lazyYT.js
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
/*! LazyYT (lazy load Youtube videos plugin) - v0.3.4 - 2014-06-30
|
||||||
|
* Usage: <div class="lazyYT" data-youtube-id="laknj093n" ratio="16:9" data-parameters="rel=0">loading...</div>
|
||||||
|
* Copyright (c) 2014 Tyler Pearson; Licensed MIT */
|
||||||
|
|
||||||
|
|
||||||
|
;(function ($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function setUp($el) {
|
||||||
|
var width = $el.data('width'),
|
||||||
|
height = $el.data('height'),
|
||||||
|
ratio = $el.data('ratio'),
|
||||||
|
id = $el.data('youtube-id'),
|
||||||
|
aspectRatio = ['16', '9'],
|
||||||
|
paddingTop = 0,
|
||||||
|
youtubeParameters = $el.data('parameters') || '';
|
||||||
|
|
||||||
|
if (typeof width === 'undefined' || typeof height === 'undefined') {
|
||||||
|
height = 0;
|
||||||
|
width = '100%';
|
||||||
|
aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100;
|
||||||
|
paddingTop = aspectRatio + '%';
|
||||||
|
}
|
||||||
|
|
||||||
|
$el.css({
|
||||||
|
'position': 'relative',
|
||||||
|
'height': height,
|
||||||
|
'width': width,
|
||||||
|
'padding-top': paddingTop,
|
||||||
|
'background': 'url(http://img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat',
|
||||||
|
'cursor': 'pointer',
|
||||||
|
'background-size': 'cover'
|
||||||
|
})
|
||||||
|
.html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
|
||||||
|
.addClass('lazyYT-image-loaded');
|
||||||
|
|
||||||
|
$.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
|
||||||
|
$('#lazyYT-title-' + id).text(data.entry.title.$t);
|
||||||
|
});
|
||||||
|
|
||||||
|
$el.on('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
|
||||||
|
$el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>')
|
||||||
|
.removeClass('lazyYT-image-loaded')
|
||||||
|
.addClass('lazyYT-video-loaded');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.lazyYT = function () {
|
||||||
|
return this.each(function () {
|
||||||
|
var $el = $(this).css('cursor', 'pointer');
|
||||||
|
setUp($el);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
34
plugins/lazyYT/assets/stylesheets/lazyYT.css
Normal file
34
plugins/lazyYT/assets/stylesheets/lazyYT.css
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
/*!
|
||||||
|
* lazyyt
|
||||||
|
* v0.3.4 - 2014-06-30
|
||||||
|
* Copyright (c) 2014 Tyler Pearson <ty.pearson@gmail.com> (http://tylerp.me); Licensed MIT %>
|
||||||
|
*/
|
||||||
|
|
||||||
|
.lazyYT-title {
|
||||||
|
z-index: 100!important;
|
||||||
|
color: #fff!important;
|
||||||
|
font-family: sans-serif!important;
|
||||||
|
font-size: 12px!important;
|
||||||
|
top: 10px!important;
|
||||||
|
left: 12px!important;
|
||||||
|
position: absolute!important;
|
||||||
|
margin: 0!important;
|
||||||
|
padding: 0!important;
|
||||||
|
line-height: 1!important;
|
||||||
|
font-style: normal!important;
|
||||||
|
font-weight: normal!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lazyYT-button {
|
||||||
|
margin: 0!important;
|
||||||
|
padding: 0!important;
|
||||||
|
width: 60px!important;
|
||||||
|
height: 41px!important;
|
||||||
|
z-index: 100!important;
|
||||||
|
position: absolute!important;
|
||||||
|
top: 50%!important;
|
||||||
|
margin-top: -22px!important;
|
||||||
|
left: 50%!important;
|
||||||
|
margin-left: -30px!important;
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAApCAYAAABp50paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABV9JREFUeNrcWk1IK1cUvrmZGBOjJvr6xKe+Slvroi6kK6GrUkSxO12IC6GgUFBcuOlC8GdRulERV3VRQV0IKhRU0NJupK3tpi1dCRaxffWHGjWZPJNnNJlMz9FzX+ZNkzylcxP1wMdMZiYz97vnu+ee+2Njmc0GyANwgANQDCgAuABOwGOAG6AAiuh+MV3Lo+fc9KyN3qGYvnEBSAA0QBTwAnBp+P0ccAxQ6bkw/T4HRABn9B+8F6f/ZiRktjJANaCSUE0kkVApoBDgAeQTIeM7dAKjAuiG6+b7wniKstgMv+2m5xMGslgZIUAAEAOcAv4GHAL+BDwDBNMRxvOPAZ8C3iUPOVNUiGaCfgOV3MZe9z5OlSDAUzxzQZXyC+BLwM+pCtMJGCTvCTJxOlpBxGpLVzF2ajqiMvyAzwDfGuXyPuALkmyY5KGZ5GVGri1duXRyVIyOPsA7gO9R/iIYtQLKiSy7Q6T+b2UkSN7vAT4U7QGDz9Mbtp/7SPySjh9gj8EpApeyh2/YoyicuhlvhuBkVU3n2jA/cBkJxyUVjBuipz2HEf0qYcKs5w1ify6DbFVVVbSrq0s9ODhQlpaWClRVdUtWUyqLE0cPEn5CXkhI8HC8ubk5ODw8XJBIJOJNTU2H/f39j/f29jxZDJI2Iowq9nJiLk1KZWWYqcKHOC9pa2t7c21tLdTR0XHgdDo1kng22rdGQaucU2YlraY1TRPJACrIXldXVzU/P+8YHR09rqysVIkwz1JWxjmNZqQRBimbBxdIvLyvr8+7uroabGxs9NP1bAS0fOmE09Q2SsxdX19fsbCw4BgcHNzzeDxhGrDItCJO2s52hiVIO3w+X+nIyEgxRPCjmpqaE8lp7VU/nCeTMASrTO++GrTDM8UQzStB4uHOzs5niqIkJLRrLIeTG2QkpVZtthu9Fgk6amtrn8zMzLgmJyePvV7vmcVl0kUuncfuhumkiIqenh7f4uJiAJKWMwuDmS4krdyxURKOYz0Qvd0NDQ1Ri9+tKIbh050Zx+q6fjg1NaWtr6/7SO5WvTuq0ABZuNyWY7L6ycnJ0dDQ0OXc3FxFJBKxW0w4opCEcmnYrDh4Vd3c3FS7u7t929vbj6ipWT3IuOREOFeeRQ/GQqGQf2xsLNDS0vIIyBbRdU2Cgl5K2pYD+SKpF1tbW0cDAwOu5eXlKkleNdqVpMMyk3eQaioJ6zCo8M/OzsZh6Fi0v79fYsi+ZNpzJByU6WHD4AEJ4QxpfHd392hiYuJyenq64vz8XGGvrlJIHSbix46lavc60xISVjc2NsK9vb0ukHKZYeIhG00I7WpeOirxQ3xnZwc99w90MaHx8fFAa2trMZAtYcl542wYOhbXoU7xox8BvmLJFTxLCRcWFkbb29tVv9+vrKyseOnj2SL6MqUEHAA+QcJ1gDl2PTcdldCexeKXCEq5GIrizOzvgC5OUTrI/rtua1ncYsl1nlzm7CjpCKcTld3vtaQbZVlY+SJoBR4wUeHIPUyykDBOwP8mZgTYw1pQQy755N2fsGlxurgO+JUmAxyGh/V7VgHmMjspNn0D+IEZZhOwDf/FrheOn7Lkdgexkm43vfB18rF8JuQGvYCD4DSUH69/B/gccJSqgG+z630euJb6Fv3JaSCfjpBm6McTFqWKNvbqPg6eIefXSbYXVAbc8PIH4EfA1+x620NGj2Cf7KMOG7cm4fi0hK5XUw0KiG1MeHQTHBZGVrFjJ0znuEXpjIItdnX7FHRPCeLeITPt4LmtBEWNiz1XYj7MxZJbmPIJpSy5pUlUXDrPxAzKiBBJN53vk9fE/q0okY4ZVBS7jaL+FWAA/y++OTUmOgsAAAAASUVORK5CYII=')!important;
|
||||||
|
}
|
||||||
28
plugins/lazyYT/plugin.rb
Normal file
28
plugins/lazyYT/plugin.rb
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
# name: lazyYT
|
||||||
|
# about: Uses the lazyYT plugin to lazy load Youtube videos
|
||||||
|
# version: 0.1
|
||||||
|
# authors: Arpit Jalan
|
||||||
|
|
||||||
|
# javascript
|
||||||
|
register_asset "javascripts/lazyYT.js"
|
||||||
|
|
||||||
|
# stylesheet
|
||||||
|
register_asset "stylesheets/lazyYT.css"
|
||||||
|
|
||||||
|
# freedom patch YouTube Onebox
|
||||||
|
class Onebox::Engine::YoutubeOnebox
|
||||||
|
include Onebox::Engine
|
||||||
|
|
||||||
|
def to_html
|
||||||
|
if video_id
|
||||||
|
# Avoid making HTTP requests if we are able to get the video ID from the
|
||||||
|
# URL.
|
||||||
|
html = "<div class=\"lazyYT\" data-youtube-id=\"#{video_id}\" data-width=\"480\" data-height=\"270\"></div>"
|
||||||
|
else
|
||||||
|
# Fall back to making HTTP requests.
|
||||||
|
html = raw[:html] || ""
|
||||||
|
end
|
||||||
|
|
||||||
|
rewrite_agnostic(append_params(html))
|
||||||
|
end
|
||||||
|
end
|
||||||
Loading…
Reference in a new issue