From 928ed24e107f90588e33109ac7c1c6d139d632bd Mon Sep 17 00:00:00 2001 From: Marvin Frederickson Date: Wed, 1 Mar 2017 09:41:07 -0900 Subject: [PATCH 1/2] closes #38 upgrade to turbolinks v5 --- app/assets/javascripts/concerto_remote_video/remote_video.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/javascripts/concerto_remote_video/remote_video.js b/app/assets/javascripts/concerto_remote_video/remote_video.js index 149b64e..9d97c05 100644 --- a/app/assets/javascripts/concerto_remote_video/remote_video.js +++ b/app/assets/javascripts/concerto_remote_video/remote_video.js @@ -113,5 +113,4 @@ function initializeRemoteVideoHandlers() { } } -$(document).ready(initializeRemoteVideoHandlers); -$(document).on('page:change', initializeRemoteVideoHandlers); \ No newline at end of file +$(document).on('turbolinks:load', initializeRemoteVideoHandlers); From 54c348ef8d59b84930fe553541edd2871763da29 Mon Sep 17 00:00:00 2001 From: Marvin Frederickson Date: Thu, 2 Mar 2017 07:49:52 -0900 Subject: [PATCH 2/2] refactor isolating namespace, load on ready --- .../concerto_remote_video/remote_video.js | 200 +++++++++--------- 1 file changed, 101 insertions(+), 99 deletions(-) diff --git a/app/assets/javascripts/concerto_remote_video/remote_video.js b/app/assets/javascripts/concerto_remote_video/remote_video.js index 9d97c05..162c519 100644 --- a/app/assets/javascripts/concerto_remote_video/remote_video.js +++ b/app/assets/javascripts/concerto_remote_video/remote_video.js @@ -1,116 +1,118 @@ -var initializedRemoteVideoHandlers = false; -function initializeRemoteVideoHandlers() { - if (!initializedRemoteVideoHandlers) { +var ConcertoRemoteVideo = { + _initialized: false, - function getVideoPreview() { - var preview_url = '/concerto-remote-video/preview'; + getVideoPreview: function () { + var preview_url = '/concerto-remote-video/preview'; - // Form video details - var video_id = $('input#remote_video_config_video_id').val(); - var video_vendor = $('select#remote_video_config_video_vendor').val(); + // Form video details + var video_id = $('input#remote_video_config_video_id').val(); + var video_vendor = $('select#remote_video_config_video_vendor').val(); - // Loading icon - if (video_id.length != 0) { - $(preview_div).empty().html(' searching...'); - $('.remote-video-info').empty(); - // Video preview request - $.ajax({ - type: 'POST', - url: preview_url, - data: { - video_id: video_id, - video_vendor: video_vendor - }, - success: function(data) { - loadVideoInfo(data); - loadVideoPreview(data); - }, - error: function(e) { - //loadVideoPreview({video_available: false}); - $(preview_div).empty().text(e.responseText); - } - }); - } + // Loading icon + if (video_id.length != 0) { + $(preview_div).empty().html(' searching...'); + $('.remote-video-info').empty(); + // Video preview request + $.ajax({ + type: 'POST', + url: preview_url, + data: { + video_id: video_id, + video_vendor: video_vendor + }, + success: function(data) { + ConcertoRemoteVideo.loadVideoInfo(data); + ConcertoRemoteVideo.loadVideoPreview(data); + }, + error: function(e) { + //loadVideoPreview({video_available: false}); + $(preview_div).empty().text(e.responseText); + } + }); } + }, - function loadVideoInfo(data) { - if (data['video_available']) { - // Target elements for setting video info - var info_el = $('.remote-video-info'); - var name_el = $('input#remote_video_name'); - var duration_el = $('input#remote_video_duration'); - // Initialize info content - var title = ''; - var description = '

'; - var duration = ''; - var vendor = data['video_vendor']; + loadVideoInfo: function (data) { + if (data['video_available']) { + // Target elements for setting video info + var info_el = $('.remote-video-info'); + var name_el = $('input#remote_video_name'); + var duration_el = $('input#remote_video_duration'); + // Initialize info content + var title = ''; + var description = '

'; + var duration = ''; + var vendor = data['video_vendor']; - if (vendor == 'HTTPVideo') { - $(info_el).empty(); - return; - } else { - // YouTube no longer returns these details without an API key - if (vendor != 'YouTube') { - if (data['description']) { - // Preview video description - var description = '

' + data['description'] + '

'; - } - if (data['title']) { - // Set content title to video returned title - name_el.val(data['title']); - } - if (data['duration']) { - // Set content duration to video duration - duration = '' + data['duration'] + ' secs'; - duration_el.val(data['duration']); - } + if (vendor == 'HTTPVideo') { + $(info_el).empty(); + return; + } else { + // YouTube no longer returns these details without an API key + if (vendor != 'YouTube') { + if (data['description']) { + // Preview video description + var description = '

' + data['description'] + '

'; } - } - - // Load video info - var info = ''+duration+'
'+description; - $(info_el).empty().html(info); + if (data['title']) { + // Set content title to video returned title + name_el.val(data['title']); + } + if (data['duration']) { + // Set content duration to video duration + duration = '' + data['duration'] + ' secs'; + duration_el.val(data['duration']); + } + } } + + // Load video info + var info = ''+duration+'
'+description; + $(info_el).empty().html(info); } + }, - function loadVideoPreview(data) { - var preview_el = $('#preview_div'); - if (data['video_available']) { - $(preview_div).empty().html(data['preview_code']); - } else { - $(preview_div).empty(); - } + loadVideoPreview: function (data) { + var preview_el = $('#preview_div'); + if (data['video_available']) { + $(preview_div).empty().html(data['preview_code']); + } else { + $(preview_div).empty(); } + }, - function updateTooltip() { - var vendor = $('select#remote_video_config_video_vendor').val(); - var hint_el = $('div#video_id_hint'); - var id_el = $('input#remote_video_config_video_id'); + updateTooltip: function () { + var vendor = $('select#remote_video_config_video_vendor').val(); + var hint_el = $('div#video_id_hint'); + var id_el = $('input#remote_video_config_video_id'); - if (vendor == 'YouTube') { - id_el.attr('placeholder', 'DGbqvYbPZBY'); - hint_el.html('Specify the exact YouTube video id'); - } else if (vendor == 'Vimeo') { - id_el.attr('placeholder', '4224811'); - hint_el.html('Specify the exact vimeo video id'); - } else if (vendor == 'HTTPVideo') { - id_el.attr('placeholder', 'http://media.w3.org/2010/05/sintel/trailer.mp4'); - hint_el.html('Specify the url of the video'); - } else if (vendor == 'Wistia') { - id_el.attr('placeholder', 'g5pnf59ala'); - hint_el.html('Specify the exact Wistia video id'); - } else if (vendor == 'DailyMotion') { - id_el.attr('placeholder', 'x23shps'); - hint_el.html('Specify the exact DailyMotion video id'); - } + if (vendor == 'YouTube') { + id_el.attr('placeholder', 'DGbqvYbPZBY'); + hint_el.html('Specify the exact YouTube video id'); + } else if (vendor == 'Vimeo') { + id_el.attr('placeholder', '4224811'); + hint_el.html('Specify the exact vimeo video id'); + } else if (vendor == 'HTTPVideo') { + id_el.attr('placeholder', 'http://media.w3.org/2010/05/sintel/trailer.mp4'); + hint_el.html('Specify the url of the video'); + } else if (vendor == 'Wistia') { + id_el.attr('placeholder', 'g5pnf59ala'); + hint_el.html('Specify the exact Wistia video id'); + } else if (vendor == 'DailyMotion') { + id_el.attr('placeholder', 'x23shps'); + hint_el.html('Specify the exact DailyMotion video id'); } + }, - $('input#remote_video_config_video_id').on('blur', getVideoPreview); - $('select#remote_video_config_video_vendor').on('change', getVideoPreview); - $('select#remote_video_config_video_vendor').on('change', updateTooltip); - - initializedRemoteVideoHandlers = true; + initHandlers: function () { + if (!ConcertoRemoteVideo._initialized) { + $('input#remote_video_config_video_id').on('blur', ConcertoRemoteVideo.getVideoPreview); + $('select#remote_video_config_video_vendor').on('change', ConcertoRemoteVideo.getVideoPreview); + $('select#remote_video_config_video_vendor').on('change', ConcertoRemoteVideo.updateTooltip); + ConcertoRemoteVideo._initialized = true; + } } -} +}; -$(document).on('turbolinks:load', initializeRemoteVideoHandlers); +$(document).ready(ConcertoRemoteVideo.initHandlers); +$(document).on('turbolinks:load', ConcertoRemoteVideo.initHandlers);