Update
This commit is contained in:
130
public/admin/plugins/tmce/cpYouTube/includes/youTube.css
Normal file
130
public/admin/plugins/tmce/cpYouTube/includes/youTube.css
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @author Josh Lobe
|
||||
* http://ultimatetinymcepro.com
|
||||
*/
|
||||
|
||||
#body {
|
||||
width: 95%;
|
||||
height: 540px;
|
||||
padding: 20px;
|
||||
|
||||
background: #fbfbfb;
|
||||
background: -moz-linear-gradient(top, #fbfbfb 0%, #dedede 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#dedede));
|
||||
background: -webkit-linear-gradient(top, #fbfbfb 0%,#dedede 100%);
|
||||
background: -o-linear-gradient(top, #fbfbfb 0%,#dedede 100%);
|
||||
background: -ms-linear-gradient(top, #fbfbfb 0%,#dedede 100%);
|
||||
background: linear-gradient(to bottom, #fbfbfb 0%,#dedede 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#dedede',GradientType=0 );
|
||||
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#search-results-block {
|
||||
float: left;
|
||||
width: 50%;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
max-height: 300px;
|
||||
min-height: 300px;
|
||||
overflow-y: auto;
|
||||
background-color: #FFF;
|
||||
border:1px solid #CCC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#sidebar_right {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 40%;
|
||||
}
|
||||
#video_preview {
|
||||
width:330px;
|
||||
min-height:230px;
|
||||
max-height:230px;
|
||||
height:230px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
height: 34px;
|
||||
line-height: 1.42857;
|
||||
padding: 6px 12px;
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: #66AFE9;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
outline: 0 none;
|
||||
}
|
||||
td.form_label {
|
||||
text-align: right;
|
||||
}
|
||||
.youtube_info, .youtube_image {
|
||||
background-color: #EEEEEE;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
.btn-primary, .btn-default {
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn-primary {
|
||||
background-image: linear-gradient(to bottom, #428BCA 0px, #3071A9 100%);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #2D6CA2;
|
||||
color: #FFF;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
.btn-default {
|
||||
background-image: linear-gradient(to bottom, #FFFFFF 0px, #E6E6E6 100%);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #CCCCCC;
|
||||
text-shadow: 0 1px 0 #FFFFFF;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
|
||||
#youtube_insert {
|
||||
float:right;
|
||||
margin-right:20px;
|
||||
cursor:pointer;
|
||||
}
|
||||
#youtube_cancel {
|
||||
float:right;
|
||||
margin-right:20px;
|
||||
cursor:pointer;
|
||||
}
|
||||
#search_youtube {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.extra_opts {
|
||||
padding-left:40px;
|
||||
}
|
||||
.load_more_results {
|
||||
text-align:center;
|
||||
display:block;
|
||||
margin:20px 0px;
|
||||
}
|
||||
.get_more_results {
|
||||
cursor:pointer;
|
||||
text-decoration:underline;
|
||||
border:1px solid #CCC;
|
||||
}
|
||||
|
||||
|
||||
.ui-button-text-only {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
281
public/admin/plugins/tmce/cpYouTube/includes/youTube.js
Normal file
281
public/admin/plugins/tmce/cpYouTube/includes/youTube.js
Normal file
@@ -0,0 +1,281 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @author Josh Lobe
|
||||
* http://ultimatetinymcepro.com
|
||||
*/
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
// Declare window variable
|
||||
var this_youtube_window = top.tinymce.activeEditor;
|
||||
|
||||
// Set focus to 'search' field
|
||||
$('#queryinput').focus();
|
||||
|
||||
// This function will search the YouTube api.. and return a json object of matched results
|
||||
function SearchYouTube(query, loadmore, number) {
|
||||
|
||||
// Get starting number
|
||||
if(number) {
|
||||
number = number;
|
||||
}else {
|
||||
number = 1;
|
||||
}
|
||||
|
||||
// Send ajax call to YouTube
|
||||
$.ajax({
|
||||
|
||||
url: 'https://gdata.youtube.com/feeds/api/videos?alt=json-in-script&q=' + query + '&start-index=' + number + '&v=2',
|
||||
dataType: 'jsonp',
|
||||
success: function (data) {
|
||||
|
||||
var row = "";
|
||||
// If we have data feed results to display
|
||||
if(data.feed.entry) {
|
||||
|
||||
// Loop all returned items and extract their data
|
||||
for (i = 0; i < data.feed.entry.length; i++) {
|
||||
|
||||
if(data.feed.entry[i].yt$statistics != undefined) {
|
||||
|
||||
row += "<div class='search_item'>";
|
||||
row += "<table class='youtube_results' width='100%'>";
|
||||
row += "<tr>";
|
||||
row += "<td class='youtube_image' vAlign='top' align='left'>";
|
||||
row += "<a href='#' ><img width='120px' height='80px' src=" + data.feed.entry[i].media$group.media$thumbnail[0].url + " /></a>";
|
||||
row += "</td>";
|
||||
row += "<td class='youtube_info' vAlign='top' width='100%' align='left'>";
|
||||
row += "<a href='#' class='youtube_title'><b>" + data.feed.entry[i].media$group.media$title.$t + "</b></a><br />";
|
||||
row += "<span style='font-size:12px; color:#555555'>by " + data.feed.entry[i].author[0].name.$t + "</span><br />";
|
||||
row += "<span style='font-size:12px' color:#666666>" + data.feed.entry[i].yt$statistics.viewCount + " views" + "<span><br />";
|
||||
row += "<span style='font-size:12px' color:#666666>" + convertSeconds(data.feed.entry[i].media$group.yt$duration.seconds) + "<span><br />";
|
||||
row += "</td>";
|
||||
row += "<td class='youtube_url' vAlign='top' align='left'>";
|
||||
row += "<input class='youtube_video_url' type='hidden' value='"+data.feed.entry[i].link[0].href+"' /><br />";
|
||||
row += "</td>";
|
||||
row += "</tr>";
|
||||
row += "</table>";
|
||||
row += "</div>";
|
||||
}
|
||||
else {
|
||||
|
||||
row += "No matching results. Please try another search.";
|
||||
}
|
||||
}
|
||||
row += '<div class="load_more_results"><span class="get_more_results btn-default">Load More</span></div>';
|
||||
|
||||
// If we are NOT loading more
|
||||
if(loadmore != 'true') {
|
||||
|
||||
$("#search-results-block").html(row);
|
||||
$("div#search-results-block").scrollTop(0);
|
||||
}
|
||||
// Else we are loading more to current div
|
||||
else {
|
||||
|
||||
// Replace 'load more' div with new set of results
|
||||
$('.load_more_results').last().html(row);
|
||||
}
|
||||
}
|
||||
// Else there are no data feed results to display
|
||||
else {
|
||||
|
||||
row += "Result not found. Please try another search.";
|
||||
$("#search-results-block").html(row);
|
||||
}
|
||||
},
|
||||
// Throw error alert if ajax fails
|
||||
error: function () {
|
||||
alert("Error loading youtube video results");
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// Click function for 'Search' button
|
||||
$('#search_youtube').click(function() {
|
||||
|
||||
search_term = $('#queryinput').val();
|
||||
SearchYouTube(search_term);
|
||||
});
|
||||
|
||||
// Add binding click function to each table row of the returned ajax object
|
||||
$('body').on('click', '.youtube_results tr', function() {
|
||||
|
||||
// Get and populate video title
|
||||
this_title = $(this).children('.youtube_info').children('.youtube_title').text();
|
||||
$('#youtube_title').val(this_title);
|
||||
|
||||
// Get and populate video link
|
||||
this_link = $(this).children('.youtube_url').children('.youtube_video_url').val();
|
||||
this_link = this_link.replace('&feature=youtube_gdata','');
|
||||
$('#youtube_url').val(this_link);
|
||||
|
||||
// Replace image placeholder with video preview
|
||||
preview_link = this_link.replace('https:','');
|
||||
preview_link = this_link.replace('http:','');
|
||||
preview_link = preview_link.replace('watch?v=','embed/');
|
||||
$('#video_preview').html('<iframe width="330" height="230" src="'+preview_link+'" frameborder="0" allowfullscreen></iframe>');
|
||||
});
|
||||
|
||||
// Action buttons
|
||||
$('#youtube_cancel').click(function() {
|
||||
|
||||
this_youtube_window.windowManager.close();
|
||||
});
|
||||
$('#youtube_insert').click(function() {
|
||||
|
||||
// Get link from input box
|
||||
this_link = $('#youtube_url').val();
|
||||
this_link = this_link.replace('https:','');
|
||||
this_link = this_link.replace('http:','');
|
||||
this_link = this_link.replace('watch?v=','embed/');
|
||||
|
||||
// If no link.. alert user
|
||||
if(this_link == '') {
|
||||
|
||||
alert('Please select a video; or enter a "YouTube Url" video link.');
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// Get user defined width and height
|
||||
this_width = $('#youtube_width').val();
|
||||
this_height = $('#youtube_height').val();
|
||||
|
||||
// Get checkbox values
|
||||
autoplay = $('#youtube_autoplay').is(':checked');
|
||||
rel = $('#youtube_rel').is(':checked');
|
||||
|
||||
// Add appropriate options if user selected
|
||||
if(autoplay != false || rel != false) {
|
||||
this_link += '?showinfo=1';
|
||||
}
|
||||
if(autoplay == true) {
|
||||
this_link += '&autoplay=1';
|
||||
}
|
||||
if(rel == true) {
|
||||
this_link += '&rel=1';
|
||||
}
|
||||
|
||||
// Assemble final link
|
||||
final_link = '<iframe width="'+this_width+'" height="'+this_height+'" src="'+this_link+'" frameborder="0" allowfullscreen></iframe>';
|
||||
|
||||
this_youtube_window.execCommand('mceInsertContent', !1, final_link); // Insert content into editor
|
||||
this_youtube_window.windowManager.close(); // Close window
|
||||
});
|
||||
|
||||
// Determine if enter key was pressed on search field
|
||||
$("#queryinput").keyup(function(event){
|
||||
if(event.keyCode == 13){
|
||||
$("#search_youtube").click(); // Run 'Search' button function
|
||||
}
|
||||
});
|
||||
|
||||
// Convert seconds to h:m:s
|
||||
function convertSeconds(s) {
|
||||
var h = Math.floor(s/3600);
|
||||
s -= h*3600;
|
||||
var m = Math.floor(s/60);
|
||||
s -= m*60;
|
||||
return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); // Zero padding on minutes and seconds
|
||||
}
|
||||
|
||||
// YouTube search autocomplete
|
||||
$("#queryinput").autocomplete({
|
||||
|
||||
source: function(request, response){
|
||||
|
||||
var apiKey = 'AI39si7ZLU83bKtKd4MrdzqcjTVI3DK9FvwJR6a4kB_SW_Dbuskit-mEYqskkSsFLxN5DiG1OBzdHzYfW0zXWjxirQKyxJfdkg';
|
||||
var query = request.term;
|
||||
|
||||
// Send ajax request to google for youtube client autocomplete library
|
||||
$.ajax({
|
||||
|
||||
url: "https://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+query+"&key="+apiKey+"&format=5&alt=json&callback=?",
|
||||
dataType: 'jsonp',
|
||||
success: function(data, textStatus, request) {
|
||||
|
||||
response( $.map( data[1], function(item) {
|
||||
|
||||
return {
|
||||
label: item[0],
|
||||
value: item[0]
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
// Run search function when user clicks an autocomplete selection
|
||||
select: function( event, ui ) {
|
||||
|
||||
$("#search_youtube").click();
|
||||
}
|
||||
});
|
||||
|
||||
// Style checkboxes with jquery UI button
|
||||
$( "#youtube_autoplay" ).button();
|
||||
$( "#youtube_rel" ).button();
|
||||
// Adjust button text based on click state
|
||||
$( "#youtube_autoplay" ).click(function() {
|
||||
|
||||
isset_autoplay = $(this).is(':checked');
|
||||
if(isset_autoplay == true) {
|
||||
$('#youtube_autoplay_label > span').html('On');
|
||||
}
|
||||
else {
|
||||
$('#youtube_autoplay_label > span').html('Off');
|
||||
}
|
||||
});
|
||||
// Adjust button text based on click state
|
||||
$( "#youtube_rel" ).click(function() {
|
||||
|
||||
isset_rel = $(this).is(':checked');
|
||||
if(isset_rel == true) {
|
||||
$('#youtube_rel_label > span').html('On');
|
||||
}
|
||||
else {
|
||||
$('#youtube_rel_label > span').html('Off');
|
||||
}
|
||||
});
|
||||
|
||||
// Run blur event on YouTube URL field.. for manually inputting url
|
||||
$('#youtube_url').on('blur', function() {
|
||||
|
||||
preview_link = $(this).val();
|
||||
// If link contains valid https format
|
||||
preview_link = preview_link.replace('http:','https:');
|
||||
console.log(preview_link);
|
||||
if (preview_link.indexOf("https://www.youtube.com/watch?v=") >= 0) {
|
||||
|
||||
preview_link = preview_link.replace('https:','');
|
||||
preview_link = preview_link.replace('http:','');
|
||||
preview_link = preview_link.replace('watch?v=','embed/');
|
||||
|
||||
$('#video_preview').html('<iframe width="330" height="230" src="'+preview_link+'" frameborder="0" allowfullscreen></iframe>');
|
||||
}
|
||||
// Else alert user to use valid http format
|
||||
else {
|
||||
|
||||
$('#video_preview').html(preview_link + '<hr>Not a valid youtube url format. Please ensure the "YouTube URL" field contains a valid link.<br /><br />Acceptable link format:<br /><b>https://www.youtube.com/watch?v=4vTyEy7Dn70</b>');
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
// Get more results
|
||||
$('body').on('click', '.get_more_results', function() {
|
||||
|
||||
// Get search term
|
||||
search_term = $('#queryinput').val();
|
||||
|
||||
// Count current number of '.search_item' divs
|
||||
count_divs = $('.search_item').length;
|
||||
// Add 1 to get the starting index for the next set
|
||||
count_divs = count_divs + 1;
|
||||
// Execute youtube api with updated count
|
||||
SearchYouTube(search_term, 'true', count_divs);
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user