Created
May 9, 2014 21:44
-
-
Save nathanfitzgerald/92dbd49bc8ed6704d2f3 to your computer and use it in GitHub Desktop.
mts.cpw1.sample.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ckeditor configuration */ | |
| CKEDITOR.disableAutoInline = true; | |
| CKEDITOR.on('instanceCreated', function(event) { | |
| var editor = event.editor; | |
| var element = editor.element; | |
| if (element.is('div', 'h1', 'h2', 'h3', 'h4', 'h5', 'p', 'li')) { | |
| editor.on('configLoaded', function() { | |
| editor.config.allowedContent = true; | |
| editor.config.removePlugins = 'colorbutton,find,flash,font,' + | |
| 'forms,iframe,image,newpage,removeformat,' + | |
| 'smiley,specialchar,stylescombo,templates'; | |
| editor.config.toolbar = [ | |
| { name: 'basicstyles', items : [ 'Bold', 'Italic', 'Underline', 'Strike' ] }, | |
| { name: 'clipboard', items : [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, | |
| { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, | |
| ]; | |
| }); | |
| } | |
| }); | |
| $(document).ready(function() { | |
| /* functional variables */ | |
| var bullet_delete_code = '<a class="close x-bullet-delete pull-right" href="#">×</a>'; | |
| var video_delete_code = '<a class="close x-video-delete pull-right" href="#">×</a>'; | |
| var video_chooser = '<div class="x-wizard-video-options"><p><a href="#" class="x-wizard-edit-option" data-target="capture-video-url">YouTube / Vimeo (Quickest)</a><br><a href="#" class="x-wizard-edit-option x-wizard-option-upload-video" data-target="upload-video">Upload A Video</a><br/><a href="#" class="x-wizard-edit-option" data-target="video-library">Select From Library</a></p></div>'; | |
| var capture_video_s3_upload_id = 0; | |
| var load_video_library = 1; | |
| var active_upload; | |
| /* page state variables */ | |
| var page_layout, | |
| page_theme, | |
| page_zen_video_id, | |
| page_video_embed, | |
| page_video_embed_code, | |
| page_video_embed_preview_code, | |
| page_video_padding_ratio, | |
| page_optin_action_url, | |
| page_optin_inputs, | |
| page_optin_hidden_inputs, | |
| page_optin_tracking_code, | |
| page_background_image; | |
| /* function to load a single ZenVideo in the layout */ | |
| function loadZenVideo(video) { | |
| page_zen_video_id = video.id; | |
| $('.x-layout .x-video').html(video.html); | |
| $('.x-layout .x-video').css('padding-bottom', video.padding_ratio); | |
| $('.x-layout .x-video .flowplayer').flowplayer({ | |
| splash: true | |
| }); | |
| $('.x-layout .x-video .flowplayer .fp-ratio').css('padding-top', video.padding_ratio); | |
| page_video_padding_ratio = video.padding_ratio; | |
| } | |
| /* function to load ZenVideos in the media browser */ | |
| function loadZenVideos() { | |
| $('.x-wizard-video-browser .x-zen-video').each(function() { | |
| var video = $(this); | |
| var video_id = $(this).data('id'); | |
| $.get('/service/zen-video/load/', { id: video_id}, function(data) { | |
| video.html(data.html); | |
| video.css('padding-bottom', data.padding_ratio); | |
| $('.flowplayer', video).flowplayer({ | |
| splash: true | |
| }); | |
| $('.fp-ratio', video).css('padding-top', data.padding_ratio); | |
| }, 'json'); | |
| }); | |
| } | |
| /* function to get unique copy class name */ | |
| function getUniqueCopyClass(copy_class) { | |
| copy_class = copy_class.replace('x-copy ', ''); | |
| copy_class = copy_class.replace('x-copyblock ', ''); | |
| copy_class = copy_class.replace(' ', ''); | |
| return copy_class; | |
| } | |
| /* function to save layout data in a systemx json input */ | |
| function saveLayoutData(field, value, type) { | |
| var object_id = [[+object.id]]; | |
| var input_id = 'page_json_capturelayout_' + field; | |
| var input_name = 'page' + object_id + 'json_capturelayout_' + field; | |
| if ($('#' + input_id).length == 0) { | |
| if (type == 'input') { | |
| $('#edit_page fieldset').append('<input type="text" id="' + input_id + '" name="' + input_name + '" value="' + value + '">'); | |
| } | |
| if (type == 'textarea') { | |
| $('#edit_page fieldset').append('<textarea id="' + input_id + '" name="' + input_name + '">' + value + '</textarea>'); | |
| } | |
| } | |
| else { | |
| $('#' + input_id).val(value); | |
| } | |
| } | |
| /* ckeditor */ | |
| $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { | |
| var target = $(e.target).attr('href'); | |
| if (target == '#capture-page') { | |
| $('.tab-pane #x-layout-' + page_layout + ' .x-copy').each(function() { | |
| $(this).attr('contenteditable', 'true'); | |
| }); | |
| $('.tab-pane #x-layout-' + page_layout + ' .x-bullets-wrapper').attr('contenteditable', 'true'); | |
| for (name in CKEDITOR.instances) { | |
| CKEDITOR.instances[name].destroy(); | |
| } | |
| CKEDITOR.inlineAll(); | |
| } | |
| if (target == '#themes') { | |
| for (name in CKEDITOR.instances) { | |
| var data = CKEDITOR.instances[name].getData(); | |
| var copy_class = CKEDITOR.instances[name].element.$.className; | |
| copy_class = getUniqueCopyClass(copy_class); | |
| $('.' + copy_class).html(data); | |
| } | |
| $('[contenteditable]').removeAttr('contenteditable'); | |
| } | |
| }); | |
| /* prepare page data for saving */ | |
| $('.x-wizard-save').on('click', function(e) { | |
| var object_id = [[+object.id]]; | |
| /* save layout */ | |
| $('#page_layout').val(page_layout); | |
| saveLayoutData('layout', page_layout, 'input'); | |
| /* save theme */ | |
| saveLayoutData('background_image', page_background_image, 'input'); | |
| saveLayoutData('theme', page_theme, 'input'); | |
| /* save display options */ | |
| $('[data-display]').each(function() { | |
| var display_setting = $(this).data('display'); | |
| var display_value = $('.active', $(this)).html(); | |
| var display_key = display_setting.replace('x-', ''); | |
| var display_key = 'display_' + display_key.replace('-', '_'); | |
| saveLayoutData(display_key, display_value, 'input'); | |
| }); | |
| /* save video upload id */ | |
| saveLayoutData('video_s3_upload_id', capture_video_s3_upload_id, 'input'); | |
| /* save video data */ | |
| saveLayoutData('zen_video_id', page_zen_video_id, 'input'); | |
| saveLayoutData('video_padding_ratio', page_video_padding_ratio, 'input'); | |
| if (page_video_embed) { | |
| saveLayoutData('video_embed', page_video_embed_code, 'textarea'); | |
| saveLayoutData('video_embed_preview', page_video_embed_preview_code, 'textarea'); | |
| } | |
| else { | |
| saveLayoutData('video_embed', '', 'textarea'); | |
| saveLayoutData('video_embed_preview', '', 'textarea'); | |
| } | |
| /* save images */ | |
| saveLayoutData('logo_img_url', $('.x-logo img').attr('src'), 'input'); | |
| saveLayoutData('button_img_url', $('.x-optin-submit button img').attr('src'), 'input'); | |
| /* load the page content */ | |
| var layout_id = 'x-layout-' + page_layout; | |
| var layout_div = $('#' + layout_id); | |
| var page_content = $('#x-wizard-page-content'); | |
| page_content.html('<div class="x-layout" id="' + layout_id + '">' + layout_div.html() + '</div>'); | |
| /* remove editing controls and classes */ | |
| $('.x-video-delete', page_content).remove(); | |
| $('.cke_editable', page_content).removeAttr('tabindex'); | |
| $('.cke_editable', page_content).removeAttr('spellcheck'); | |
| $('.cke_editable', page_content).removeAttr('id'); | |
| $('.cke_editable', page_content).removeAttr('contenteditable'); | |
| $('.cke_editable', page_content).removeClass('cke_editable_inline'); | |
| $('.cke_editable', page_content).removeClass('cke_contents_ltr'); | |
| $('.cke_editable', page_content).removeClass('cke_focus'); | |
| $('.cke_editable', page_content).removeClass('cke_show_borders'); | |
| $('.cke_editable', page_content).removeClass('cke_editable'); | |
| /* add autoresponder settings */ | |
| $('.x-optin-form', page_content).attr('action', page_optin_action_url); | |
| $('.x-optin-form-inputs', page_content).html(page_optin_inputs); | |
| $('.x-optin-form-hidden-inputs', page_content).html(page_optin_hidden_inputs); | |
| $('.x-optin-form-tracking', page_content).html(page_optin_tracking_code); | |
| saveLayoutData('optin_action_url', page_optin_action_url, 'textarea'); | |
| saveLayoutData('optin_inputs', page_optin_inputs, 'textarea'); | |
| saveLayoutData('optin_hidden_inputs', page_optin_hidden_inputs, 'textarea'); | |
| saveLayoutData('optin_tracking_code', page_optin_tracking_code, 'textarea'); | |
| saveLayoutData('autoresponder_code', $('#autoresponder_code').val(), 'textarea'); | |
| /* insert ZenVideo code */ | |
| if (page_zen_video_id > 0) { | |
| $('.x-video', page_content).addClass('x-zen-video'); | |
| $('.x-video', page_content).attr('data-id', page_zen_video_id); | |
| $('.x-video', page_content).attr('data-autoplay', '1'); | |
| $('.x-video', page_content).html(''); | |
| } | |
| if (page_zen_video_id > 0) { | |
| //$('.x-video iframe', page_content).attr('src', $('.x-video iframe', page_content).attr('src') + '&autoplay=1'); | |
| } | |
| else if (page_video_embed) { | |
| $('.x-video', page_content).html(page_video_embed_code); | |
| } | |
| else { | |
| $('.x-video', page_content).html(''); | |
| } | |
| /* save copy | |
| $('.x-copy', page_content).each(function() { | |
| var copy_class = getUniqueCopyClass($(this).attr('class')); | |
| var data_key = copy_class.replace('x-', ''); | |
| var data_key = data_key.replace('-', '_'); | |
| saveLayoutData(data_key, $(this).html(), 'textarea'); | |
| });*/ | |
| /* save bullets | |
| $('.x-bullet-delete', page_content).remove(); | |
| var bullets = $('.x-bullets', page_content).html(); | |
| saveLayoutData('bullets', bullets, 'textarea');*/ | |
| /* save ckeditor data */ | |
| for (name in CKEDITOR.instances) { | |
| var data = CKEDITOR.instances[name].getData(); | |
| var copy_class = CKEDITOR.instances[name].element.$.className; | |
| copy_class = getUniqueCopyClass(copy_class); | |
| var data_key = copy_class.replace('x-', '').replace('-', '_'); | |
| $('.' + copy_class, page_content).html(data); | |
| if (data_key == 'bullets_wrapper') { | |
| data_key = 'bullets'; | |
| data = data.replace('<ul class="x-bullets">', ''); | |
| data = data.replace('</ul>', ''); | |
| } | |
| saveLayoutData(data_key, data, 'textarea'); | |
| } | |
| /* remove hidden elements */ | |
| $('[style*="display: none"]', page_content).remove(); | |
| /* save footer disclaimer */ | |
| $('#page_footer_disclaimer').val($('#footer_disclaimer_text').val()); | |
| /* save page content */ | |
| $('#page_content').val(page_content.html()); | |
| if (page_video_embed) { | |
| $('.x-video', page_content).html(page_video_embed_preview_code); | |
| } | |
| /* flag for layout-based output */ | |
| $('#page_layout').val(1); | |
| $('#page_current_wizard').val('capture'); | |
| }); | |
| /* layout selection function */ | |
| function selectLayout(layout) { | |
| page_layout = layout; | |
| $('.x-layout').hide(); | |
| $('#x-layout-' + layout).show(); | |
| $('#layouts .thumbnail').css('background-color', '#fff'); | |
| $('[data-layout="' + layout + '"]').css('background-color', '#2f9cc7'); | |
| $('#capture-page .row-fluid').show(); | |
| $('.x-alert-choose-layout').hide(); | |
| } | |
| /* load layout */ | |
| if ($('#page_json_capturelayout_layout').val()) { | |
| selectLayout($('#page_json_capturelayout_layout').val()); | |
| } | |
| /* modify layout */ | |
| $('#layouts .thumbnail').on('click', function(e) { | |
| e.preventDefault(); | |
| selectLayout($(this).data('layout')); | |
| return false; | |
| }); | |
| /* theme selection function */ | |
| function selectTheme(theme) { | |
| page_theme = theme; | |
| var page_editor = $('.x-page-preview'); | |
| page_editor.attr('class', ''); | |
| page_editor.addClass('x-page-preview'); | |
| page_editor.addClass(theme); | |
| $('#themes .thumbnail').css('background-color', '#fff'); | |
| $('[data-theme="' + theme + '"]').css('background-color', '#2f9cc7'); | |
| } | |
| /* load theme */ | |
| if ($('#page_json_capturelayout_theme').val()) { | |
| selectTheme($('#page_json_capturelayout_theme').val()); | |
| } | |
| /* modify theme */ | |
| $('#themes .thumbnail').on('click', function(e) { | |
| e.preventDefault(); | |
| selectTheme($(this).data('theme')); | |
| return false; | |
| }); | |
| /* toggle display */ | |
| function toggleComponentDisplay(component_class, display) { | |
| var component = $('.' + component_class); | |
| if (display == 'Yes') { | |
| var component_content = component.html().replace(/\s/g, ''); | |
| if (component_content == '' && component.hasClass('x-copy')) { | |
| component.html('Click to edit'); | |
| } | |
| component.show(); | |
| if (component_class.indexOf('video') != -1) { | |
| if (page_zen_video_id || page_video_embed) { | |
| $('.x-video-delete').show(); | |
| } | |
| } | |
| if (component_class.indexOf('bullets') != -1) { | |
| $('.x-wizard-add-bullet').show(); | |
| } | |
| } | |
| if (display == 'No') { | |
| component.hide(); | |
| if (component_class.indexOf('video') != -1) { | |
| $('.x-video-delete').hide(); | |
| } | |
| if (component_class.indexOf('bullets') != -1) { | |
| $('.x-wizard-add-bullet').hide(); | |
| } | |
| } | |
| } | |
| /* modify display setting toggles */ | |
| $('.x-wizard-setting-group .btn-group button').on('click', function() { | |
| var display = $(this).html(); | |
| var component_class = $(this).parent().data('display'); | |
| toggleComponentDisplay(component_class, display); | |
| }); | |
| /* open the option editor */ | |
| $('.x-wizard-content').on('click', '.x-wizard-edit-option', function(e) { | |
| e.preventDefault(); | |
| $('.x-wizard-option').hide(); | |
| $('#x-wizard-option-' + $(this).data('target')).show(); | |
| return false; | |
| }); | |
| /* close the option editor */ | |
| $('.x-wizard-option .cancel').on('click', function() { | |
| $(this).parent().hide(); | |
| $('#x-wizard-option-capture-settings').show(); | |
| }); | |
| /* load saved copy */ | |
| $('.x-copy').each(function() { | |
| var copy_class = getUniqueCopyClass($(this).attr('class')); | |
| copy_class = copy_class.replace('x-', ''); | |
| var copy_input_id = 'page_json_capturelayout_' + copy_class.replace('-', '_'); | |
| $(this).html($('#' + copy_input_id).val()); | |
| console.log($('#' + copy_input_id).val()); | |
| }); | |
| /* launch modal copy editor | |
| $('.x-page-preview').on('click', '.x-copy', function(e) { | |
| e.preventDefault(); | |
| ckedit_class = getUniqueCopyClass($(this).attr('class')); | |
| $('#x-copy-editor-content').val($(this).html()); | |
| ckeditor = CKEDITOR.replace('x-copy-editor-content', { | |
| toolbarGroups: [ | |
| { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, | |
| { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, | |
| { name: 'links' }, | |
| '/', | |
| { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, | |
| { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] }, | |
| { name: 'styles' }, | |
| { name: 'colors' }, | |
| ] | |
| }); | |
| $('#x-copy-editor').modal(); | |
| return false; | |
| });*/ | |
| /* save content */ | |
| $('#x-copy-editor .btn-primary').on('click', function(e) { | |
| e.preventDefault(); | |
| var html = ckeditor.getData(); | |
| if (ckedit_class.indexOf('bullet') != -1) { | |
| html = bullet_delete_code + html; | |
| } | |
| $('.' + ckedit_class).html(html); | |
| $('#x-copy-editor').modal('hide'); | |
| ckeditor.destroy(); | |
| return false; | |
| }); | |
| /* close copy editor */ | |
| $('#x-copy-editor .x-close').on('click', function(e) { | |
| e.preventDefault(); | |
| $('#x-copy-editor').modal('hide'); | |
| return false; | |
| }); | |
| $('#x-copy-editor').on('hidden', function() { | |
| ckeditor.destroy(); | |
| }); | |
| /* transloadit background upload */ | |
| $('#x-background-upload-form').transloadit({ | |
| autoSubmit: false, | |
| wait: true, | |
| modal: false, | |
| onStart: function(assembly) { | |
| $('.x-background-upload-progress').show(); | |
| $('#x-background-upload-form').hide(); | |
| }, | |
| onProgress: function(bytesReceived, bytesExpected) { | |
| $('.x-background-upload-progress .bar').css('width', (bytesReceived / bytesExpected * 100) + '%'); | |
| }, | |
| onError: function(assembly) { | |
| alert(assembly.error + ': ' + assembly.message); | |
| }, | |
| onResult: function(step, result) { | |
| $.post('/service/transloadit/image', { project: [[!+x_page.website_id]], page_id: [[!+x_page.id]], method: 'cp_background', transloadit: result }, function(data) { | |
| var img_url = data.url; | |
| img_url = img_url.replace('upload/', 'upload/w_240/'); | |
| $('#x-background-image-thumb').attr('src', img_url); | |
| $('.x-page-preview').css('background-image', 'url(' + data.url + ')'); | |
| page_background_image = data.url; | |
| }, 'json'); | |
| }, | |
| onSuccess: function(assembly) { | |
| $('.x-background-upload-progress').hide(); | |
| $('#x-background-upload-form').show(); | |
| } | |
| }); | |
| /* load saved background image */ | |
| page_background_image = $('#page_json_capturelayout_background_image').val(); | |
| if (page_background_image != undefined) { | |
| $('.x-page-preview').css('background-image', 'url(' + page_background_image + ')'); | |
| $('#x-background-image-thumb').attr('src', page_background_image.replace('upload/', 'upload/w_240/')); | |
| } | |
| /* delete background image */ | |
| $('#x-delete-background-image').on('click', function(e) { | |
| e.preventDefault(); | |
| $('.x-page-preview').css('background-image', ''); | |
| $('#x-background-image-thumb').attr('src', ''); | |
| page_background_image = ''; | |
| return false; | |
| }); | |
| /* s3uploader */ | |
| var _s3config = { | |
| height: 180, | |
| width: 250, | |
| user: '8103d17697b81f3f50ee0171c2590a57', | |
| onComplete: function(filename) { | |
| if (active_upload == 'logo') { | |
| $.get('/service/s3uploader/image/', { | |
| name: filename, | |
| website_id: [[!+x_website.id]] | |
| }, function(data) { | |
| $('.x-logo img').attr('src', data.url); | |
| }, 'json'); | |
| } | |
| if (active_upload == 'video') { | |
| $.get('/service/s3uploader/zen-video/', { | |
| name: filename, | |
| website_id: [[!+x_website.id]] | |
| }, function(data) { | |
| capture_video_s3_upload_id = data.s3_upload_id; | |
| }, 'json'); | |
| $('.x-layout .x-wizard-video-options p').html('Upload Succeeded!' + | |
| '<br><span>Your video will start converting in just a minute.' + | |
| '<br><br>You can continue to edit and save your page while waiting, or even save it and close your browser. ' + | |
| 'Once conversion begins, a progress bar will indicate the status of the video encoding process. Video encoding ' + | |
| 'is usually pretty fast, but can sometimes take awhile if our encoding servers are backed up.</span>'); | |
| $('.x-layout .x-video').before(video_delete_code); | |
| $('.x-wizard-option').hide(); | |
| $('#x-wizard-option-capture-settings').show(); | |
| page_video_embed = 0; | |
| } | |
| active_upload = ''; | |
| } | |
| }; | |
| /* load s3uploader */ | |
| function loadS3Uploader() { | |
| var _s3url = "http://s3uploader.com/s3uploader.min.js"; | |
| (function(d,s,a){var b,fjs=d.getElementsByTagName(s)[0]; | |
| if(d.getElementById(a))return;b=d.createElement(s); | |
| b.id=a;b.src=_s3url;fjs.parentNode.insertBefore(b,fjs)} | |
| (document,'script','s3uploader-sdk')); | |
| } | |
| /* cancel an s3upload */ | |
| $('.x-cancel-upload').on('click', function() { | |
| $(this).parent().hide(); | |
| $('#x-wizard-option-capture-settings').show(); | |
| active_upload = ''; | |
| }); | |
| /* load saved logo */ | |
| var logo_img_url = $('#page_json_capturelayout_logo_img_url').val(); | |
| if (logo_img_url) { | |
| $('.x-logo img').attr('src', logo_img_url); | |
| } | |
| else { | |
| $('.x-logo img').attr('src', '//frequency9-cdn.s3.amazonaws.com/library/logos/marketing-timesaver-3.png'); | |
| } | |
| /* upload logo */ | |
| $('.x-logo').on('click', function(e) { | |
| if (active_upload && active_upload != 'logo') { | |
| alert('Whoops, looks like you already have a ' + active_upload + ' upload in progress.'); | |
| return false; | |
| } | |
| $('.x-wizard-option').hide(); | |
| $('#x-wizard-option-s3uploader').show(); | |
| $('.x-wizard-upload').hide(); | |
| $('.x-wizard-upload-logo').show(); | |
| loadS3Uploader(); | |
| active_upload = 'logo'; | |
| }); | |
| /* upload video */ | |
| $('.x-layout').on('click', '.x-wizard-option-upload-video', function(e) { | |
| e.preventDefault(); | |
| $('.x-wizard-option').hide(); | |
| $('#x-wizard-option-' + $(this).data('target')).show(); | |
| var video_container = $(this).parent().parent(); | |
| video_container.html($('#x-wizard-upload-video').html()); | |
| $('#x-video-upload-form').transloadit({ | |
| autoSubmit: false, | |
| wait: true, | |
| modal: false, | |
| onStart: function(assembly) { | |
| $('.x-video-upload-progress').show(); | |
| $('#x-video-upload-form').hide(); | |
| }, | |
| onProgress: function(bytesReceived, bytesExpected) { | |
| $('.x-video-upload-progress .bar').css('width', (bytesReceived / bytesExpected * 100) + '%'); | |
| }, | |
| onError: function(assembly) { | |
| alert(assembly.error+': '+assembly.message); | |
| }, | |
| onResult: function(step, result) { | |
| $.post('/service/transloadit/video', { project: [[!+x_page.website_id]], transloadit: result }, function(data) { | |
| video_container.parent().html(video_delete_code + data.html); | |
| page_zen_video_id = data.id; | |
| page_video_embed = 0; | |
| }, 'json'); | |
| }, | |
| onSuccess: function(assembly) { | |
| $('.x-video-upload-progress').hide(); | |
| $('#x-video-upload-form').show(); | |
| } | |
| }); | |
| return false; | |
| }); | |
| /* load the video library */ | |
| $('.x-layout').on('click', 'a[data-target=video-library]', function() { | |
| if (load_video_library) { | |
| $('.x-wizard-video-browser').html('<img class="x-loading" src="http://cdn.frequency9.net/library/loading/loading.gif">'); | |
| $.get('/service/page/wizard/list-videos/', { website_id: [[!+x_website.id]] }, function(data) { | |
| $('.x-wizard-video-browser').html(data); | |
| loadZenVideos(); | |
| load_video_library = 0; | |
| }); | |
| } | |
| }); | |
| /* load video chooser */ | |
| $('.x-layout .x-video').html(video_chooser); | |
| /* load saved video upload | |
| saved_video_s3_upload_id = $('#page_json_capturelayout_video_s3_upload_id').val(); | |
| if (saved_video_s3_upload_id && saved_video_s3_upload_id != 0) { | |
| capture_video_s3_upload_id = saved_video_s3_upload_id; | |
| }*/ | |
| /* load saved video */ | |
| var saved_zen_video_id = $('#page_json_capturelayout_zen_video_id').val(); | |
| if (saved_zen_video_id && saved_zen_video_id != 0) { | |
| $.get('/service/video/load/', { id: saved_zen_video_id }, function(video) { | |
| $('.x-layout .x-video').css('padding-bottom', video.padding_ratio + '%'); | |
| $('.x-layout .x-video').html('<iframe src="http://app.marketingtimesaver.com/watch/?v=' + video.id + '&type=capture" scrolling="no"></iframe>'); | |
| $('.x-layout .x-video').before(video_delete_code); | |
| page_zen_video_id = video.id; | |
| }, 'json'); | |
| } | |
| /* | |
| if (saved_zen_video_id && saved_zen_video_id != 0) { | |
| page_zen_video_id = saved_zen_video_id; | |
| $('.x-layout .x-video').addClass('x-zen-video'); | |
| $('.x-layout .x-video').data('id', page_zen_video_id); | |
| $('.x-layout .x-video').html(''); | |
| $('.x-layout .x-video').before(video_delete_code); | |
| }*/ | |
| var saved_video_embed = $('#page_json_capturelayout_video_embed').val(); | |
| var saved_video_embed_preview = $('#page_json_capturelayout_video_embed_preview').val(); | |
| if (saved_video_embed) { | |
| page_video_embed_code = saved_video_embed; | |
| page_video_embed_preview_code = saved_video_embed_preview; | |
| page_video_embed = 1; | |
| page_video_padding_ratio = $('#page_json_capturelayout_video_padding_ratio').val(); | |
| $('.x-layout .x-video').html(saved_video_embed_preview); | |
| $('.x-layout .x-video').css('padding-bottom', page_video_padding_ratio); | |
| $('.x-layout .x-video').before(video_delete_code); | |
| } | |
| /* add video from library */ | |
| $('.x-wizard-video-browser').on('click', 'a', function(e) { | |
| e.preventDefault(); | |
| $.get('/service/video/load/', { id: $(this).data('zen-video-id') }, function(video) { | |
| $('.x-layout .x-video').css('padding-bottom', video.padding_ratio + '%'); | |
| $('.x-layout .x-video').html('<iframe src="http://app.marketingtimesaver.com/watch/?v=' + video.id + '&type=capture" scrolling="no"></iframe>'); | |
| page_zen_video_id = video.id; | |
| }, 'json'); | |
| if ($('.x-video-delete').length == 0) { | |
| $('.x-layout .x-video').before(video_delete_code); | |
| } | |
| page_video_embed = 0; | |
| return false; | |
| }); | |
| /* add video from a URL*/ | |
| $('#x-wizard-option-capture-video-url .btn-success').on('click', function(e) { | |
| $(this).parent().hide(); | |
| $('#x-wizard-option-capture-settings').show(); | |
| $('.x-wizard-video-options p').html('<img class="x-loading" src="http://cdn.frequency9.net/library/loading/loading.gif">'); | |
| var video_url = $('[name="x_wizard_option_capture_video_url"]').val(); | |
| $.get('/service/video/get-oembed/', { url: video_url, autoplay: 1 }, function(data) { | |
| $('.x-layout .x-video').html(data.preview_html); | |
| $('.x-layout .x-video').css('padding-bottom', data.padding_ratio + '%'); | |
| $('.x-layout .x-video').before(video_delete_code); | |
| page_zen_video_id = 0; | |
| page_video_embed = 1; | |
| page_video_embed_preview_code = data.preview_html; | |
| page_video_embed_code = data.html; | |
| page_video_padding_ratio = data.padding_ratio + '%'; | |
| }, 'json'); | |
| }); | |
| /* delete video */ | |
| $('.x-layout').on('click', '.x-video-delete', function(e) { | |
| e.preventDefault(); | |
| $('.x-layout .x-video').css('padding-bottom', '56.25%'); | |
| $('.x-layout .x-video').html(video_chooser); | |
| $('.x-layout .x-video-delete').remove(); | |
| page_zen_video_id = 0; | |
| page_video_embed = 0; | |
| return false; | |
| }); | |
| /* load saved bullets | |
| $('.x-bullets').html($('#page_json_capturelayout_bullets').val()); | |
| $('.x-bullets li').each(function() { | |
| $(this).html(bullet_delete_code + $(this).html()); | |
| });*/ | |
| /* load saved bullets */ | |
| var bullets = $('#page_json_capturelayout_bullets').val(); | |
| if (!bullets) { | |
| bullets = '<li><div>Enter your bullets here</div></li>'; | |
| } | |
| $('.x-bullets').html(bullets); | |
| /* add a bullet button | |
| $('.x-bullets').after('<a class="btn x-wizard-add-bullet" href="#">Add bullet</a>'); | |
| $('.x-wizard-add-bullet').on('click', function(e) { | |
| e.preventDefault(); | |
| var count = $('li', $(this).prev()).length + 1; | |
| var bullet = '<li class="x-bullet-' + count + '">' + bullet_delete_code + '<div>' + | |
| 'Click here to edit. Click and drag to change order.</div></li>' | |
| $('.x-bullets').append(bullet); | |
| return false; | |
| });*/ | |
| /* delete bullets | |
| $('.x-bullets').on('click', '.x-bullet-delete', function(e) { | |
| e.preventDefault(); | |
| var bullet_class = $(this).parent().attr('class'); | |
| $('.' + bullet_class).remove(); | |
| return false; | |
| });*/ | |
| /* sortable bullets * | |
| $('.x-bullets').sortable({ | |
| delay: 100, | |
| axis: 'y', | |
| cursor: 'move', | |
| cursorAt: { left: 0 }, | |
| update: function() { | |
| $('.x-bullets').html($(this).html()); | |
| } | |
| });*. | |
| /* load bullet for editing | |
| $('.x-bullets').on('click', 'li', function() { | |
| ckedit_class = getUniqueCopyClass($(this).attr('class')); | |
| $('#x-copy-editor-content').val($(this).html().replace(bullet_delete_code + '', '')); | |
| ckeditor = CKEDITOR.replace('x-copy-editor-content', { | |
| toolbarGroups: [ | |
| { name: 'editing', groups: [ 'basicstyles', 'links' ] }, | |
| { name: 'colors' }, | |
| { name: 'undo' }, | |
| { name: 'clipboard', groups: [ 'selection', 'clipboard' ] } | |
| ] | |
| }); | |
| $('#x-copy-editor').modal(); | |
| });*/ | |
| /* display autoresponder config instead of the inputs */ | |
| $('.x-optin-form-inputs').html('<div class="x-wizard-configure-autoresponder">' + | |
| '<a href="#" class="x-wizard-edit-option" data-target="autoresponder">Configure Autoresponder</a></div>'); | |
| /* load saved autoresponder code */ | |
| $('#autoresponder_code').val($('#page_json_capturelayout_autoresponder_code').val()); | |
| if ($('#page_json_capturelayout_optin_action_url').val()) { | |
| page_optin_action_url = $('#page_json_capturelayout_optin_action_url').val(); | |
| } | |
| if ($('#page_json_capturelayout_optin_inputs').val()) { | |
| page_optin_inputs = $('#page_json_capturelayout_optin_inputs').val(); | |
| } | |
| if ($('#page_json_capturelayout_optin_hidden_inputs').val()) { | |
| page_optin_hidden_inputs = $('#page_json_capturelayout_optin_hidden_inputs').val(); | |
| } | |
| if ($('#page_json_capturelayout_optin_tracking_code').val()) { | |
| page_optin_tracking_code = $('#page_json_capturelayout_optin_tracking_code').val(); | |
| } | |
| /* configure autoresponder */ | |
| $('#x-wizard-option-autoresponder .btn-success').on('click', function(e) { | |
| $(this).parent().hide(); | |
| $('#x-wizard-option-capture-settings').show(); | |
| var autoresponder_code = $('[name="x_wizard_option_autoresponder_code"]').val(); | |
| $.post('/service/page/config-autoresponder-code/', { code: autoresponder_code }, function(data) { | |
| console.log(data.action_url); | |
| console.log(data.inputs); | |
| console.log(data.hidden_inputs); | |
| console.log(data.tracking_code); | |
| page_optin_action_url = data.action_url; | |
| page_optin_inputs = data.inputs; | |
| page_optin_hidden_inputs = data.hidden_inputs; | |
| page_optin_tracking_code = data.tracking_code; | |
| }, 'json'); | |
| }); | |
| /* load saved button image */ | |
| $('.x-optin-submit button img').attr('src', $('#page_json_capturelayout_button_img_url').val()); | |
| /* display the button library */ | |
| $('.x-optin-submit button').on('click', function(e) { | |
| e.preventDefault(); | |
| $('.x-wizard-option').hide(); | |
| $('#x-wizard-option-capture-button').show(); | |
| return false; | |
| }); | |
| /* update button image */ | |
| $('#x-wizard-option-capture-button').on('click', 'li a', function(e) { | |
| e.preventDefault(); | |
| $('.x-optin-submit button img').attr('src', $('img', $(this)).attr('src')); | |
| return false; | |
| }); | |
| /* load data */ | |
| $('#footer_disclaimer_text').val($('#page_footer_disclaimer').val()); | |
| /* load display setting toggles */ | |
| $('[data-display]').each(function() { | |
| var display_setting = $(this).data('display'); | |
| var display_key = display_setting.replace('x-', ''); | |
| var display_key = 'display_' + display_key.replace('-', '_'); | |
| var display_input_id = 'page_json_capturelayout_' + display_key; | |
| var display = $('#' + display_input_id).val(); | |
| if ($('#edit_page fieldset #' + display_input_id).length != 0) { | |
| if (display == 'Yes') { | |
| $('.yes', $(this)).addClass('active'); | |
| } | |
| if (display == 'No') { | |
| $('.no', $(this)).addClass('active'); | |
| } | |
| toggleComponentDisplay(display_setting, display); | |
| } | |
| else if (display_key != 'display_logo') { | |
| $('.yes', $(this)).addClass('active'); | |
| } | |
| else { | |
| $('.no', $(this)).addClass('active'); | |
| toggleComponentDisplay(display_setting, 'No'); | |
| } | |
| }); | |
| /* watch video upload job */ | |
| (function watchVideoUpload() { | |
| if (capture_video_s3_upload_id > 0) { | |
| $.get('/service/zen-video/check-status/', { s3_upload_id: capture_video_s3_upload_id }, function(data) { | |
| if (data.status == 'waiting') { | |
| $('.x-layout .x-wizard-video-options p').html('Upload Succeeded!' + | |
| '<br><span>Your video will start converting in just a minute.' + | |
| '<br><br>You can continue to edit and save your page while waiting, or even save it and close your browser. ' + | |
| 'Once conversion begins, a progress bar will indicate the status of the video encoding process. Video encoding ' + | |
| 'is usually pretty fast, but can sometimes take awhile if our encoding servers are backed up.</span>'); | |
| } | |
| else if (data.status == 'converting') { | |
| $('.x-layout .x-wizard-video-options p').html('Converting' + | |
| '<div class="progress progress-striped active"><div class="bar" style="width: ' + data.progress + '%;"></div></div>'); | |
| } | |
| else if (data.status == 'transcoded') { | |
| $('.x-layout .x-wizard-video-options p').html('Conversion Done!' + | |
| '<br><span>Your video will be ready for viewing in just a minute...</span>'); | |
| } | |
| else if (data.status == 'finished') { | |
| $.get('/service/zen-video/load/', { id: data.zen_video_id}, function(video) { | |
| $('.x-layout .x-video').html(video.html); | |
| $('.x-layout .x-video').css('padding-bottom', data.padding_ratio); | |
| $('.x-layout .x-video .flowplayer').flowplayer({ | |
| splash: true | |
| }); | |
| $('.x-layout .x-video .flowplayer .fp-ratio', video).css('padding-top', data.padding_ratio); | |
| }, 'json'); | |
| page_zen_video_id = data.zen_video_id; | |
| page_video_padding_ratio = data.padding_ratio; | |
| page_video_embed = 0; | |
| capture_video_s3_upload_id = 0; | |
| load_video_library = 1; | |
| } | |
| else if (data.status == 'failed') { | |
| capture_video_s3_upload_id = 0; | |
| } | |
| }, 'json'); | |
| } | |
| setTimeout(watchVideoUpload, 5000); | |
| })(); | |
| /* ZenVideo display */ | |
| $('.x-zen-video').each(function() { | |
| var video = $(this); | |
| var video_id = $(this).data('id'); | |
| $.get('/service/zen-video/load/', { id: video_id}, function(data) { | |
| video.html(data.html); | |
| video.css('padding-bottom', data.padding_ratio); | |
| $('.flowplayer', video).flowplayer({ | |
| splash: true | |
| }); | |
| $('.fp-ratio', video).css('padding-top', data.padding_ratio); | |
| }, 'json'); | |
| }); | |
| }); | |
| String.prototype.isEmpty = function() { | |
| return this.length === 0 || this == " " || /^\s*$/.test(this); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment