diff --git a/src/contents/less/embed-containers.less b/src/contents/less/embed-containers.less index b7db3a5..136d57d 100644 --- a/src/contents/less/embed-containers.less +++ b/src/contents/less/embed-containers.less @@ -32,4 +32,6 @@ @import "priEmbeds/twitterEmbed.less"; -@import "priEmbeds/slideshow.less"; \ No newline at end of file +@import "priEmbeds/slideshow.less"; + +@import "priEmbeds/opinaryEmbed.less"; \ No newline at end of file diff --git a/src/contents/less/priEmbeds/opinaryEmbed.less b/src/contents/less/priEmbeds/opinaryEmbed.less new file mode 100644 index 0000000..3ae1217 --- /dev/null +++ b/src/contents/less/priEmbeds/opinaryEmbed.less @@ -0,0 +1,4 @@ +.opinary-widget +{ + background-color: @body-bg; +} \ No newline at end of file diff --git a/src/contents/less/priEmbeds/priEntityEmbeds.less b/src/contents/less/priEmbeds/priEntityEmbeds.less index f66dfd0..a35ffa7 100644 --- a/src/contents/less/priEmbeds/priEntityEmbeds.less +++ b/src/contents/less/priEmbeds/priEntityEmbeds.less @@ -22,4 +22,6 @@ @import "twitterEmbed.less"; -@import "slideshow.less"; \ No newline at end of file +@import "slideshow.less"; + +@import "opinaryEmbed.less"; \ No newline at end of file diff --git a/src/contents/less/social_editor.less b/src/contents/less/social_editor.less index d539aef..b860e75 100644 --- a/src/contents/less/social_editor.less +++ b/src/contents/less/social_editor.less @@ -81,6 +81,8 @@ .social_editor-preview_inner { + position: relative; + > * { & + * { margin-left: 20px; @@ -152,4 +154,14 @@ color: @btn-primary-color; text-decoration: none; } +} + +.social_editor-blocker +{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; } \ No newline at end of file diff --git a/src/html/modal/modal_opinary.html b/src/html/modal/modal_opinary.html new file mode 100644 index 0000000..ab9b360 --- /dev/null +++ b/src/html/modal/modal_opinary.html @@ -0,0 +1,54 @@ +
\ No newline at end of file diff --git a/src/html/modal/modal_twitter.html b/src/html/modal/modal_twitter.html index c09604a..74ac762 100644 --- a/src/html/modal/modal_twitter.html +++ b/src/html/modal/modal_twitter.html @@ -1,52 +1,52 @@ \ No newline at end of file diff --git a/src/js/demo.js b/src/js/demo.js index 64ac107..62e61d3 100644 --- a/src/js/demo.js +++ b/src/js/demo.js @@ -184,7 +184,7 @@ $(document).ready(function(){ domainName: 'https://test-services.pri.org', // it is configured in the entity embed addon, but this is modalOptions: { addOnly: true, - embedTypeStr: ['image', 'audio', 'slideshow'] + embedTypeStr: ['image', 'audio', 'slideshow', 'opinary'] } }) // a good example that configuration can be done like so .done(function(scope){ diff --git a/src/js/embedModal.js b/src/js/embedModal.js index 47efe4b..902256d 100644 --- a/src/js/embedModal.js +++ b/src/js/embedModal.js @@ -35,7 +35,8 @@ var EntityEmbed = EntityEmbed || {}; externalLink:{}, newsletterSubscribe:{}, iframe:{}, - customText:{} + customText:{}, + opinary:{} } }; var embedTypes = []; diff --git a/src/js/embeds/facebookEmbed.js b/src/js/embeds/facebookEmbed.js index ffd8f87..dc23b33 100644 --- a/src/js/embeds/facebookEmbed.js +++ b/src/js/embeds/facebookEmbed.js @@ -355,7 +355,7 @@ var EntityEmbed = EntityEmbed || {}; } else { - // Get Video embeds that have matching URL + // Get Facebook embeds that have matching URL EntityEmbed.apiService.get({ path: self.options.httpPaths.getAll, data: { diff --git a/src/js/embeds/instagramEmbed.js b/src/js/embeds/instagramEmbed.js index 73b2351..e2945bd 100644 --- a/src/js/embeds/instagramEmbed.js +++ b/src/js/embeds/instagramEmbed.js @@ -210,7 +210,7 @@ var EntityEmbed = EntityEmbed || {}; $.validator.addMethod('validInstagramUrl', function(value, element, params) { var isValid = isValidUrl(value); return this.optional(element) || isValid; - }, 'The URL must be to a valid Facebook post or video.'); + }, 'The URL must be to a valid Instagram post.'); $ui.previewBtn.on('click', function(evt) { @@ -320,7 +320,7 @@ var EntityEmbed = EntityEmbed || {}; } else { - // Get Video embeds that have matching URL + // Get Instagram embeds that have matching URL EntityEmbed.apiService.get({ path: self.options.httpPaths.getAll, data: { diff --git a/src/js/embeds/opinaryEmbed.js b/src/js/embeds/opinaryEmbed.js new file mode 100644 index 0000000..36c3f5a --- /dev/null +++ b/src/js/embeds/opinaryEmbed.js @@ -0,0 +1,269 @@ +var EntityEmbed = EntityEmbed || {}; + +(function(){ + + 'use strict'; + + // PRIVATE + var embedName = 'opinary', + defaults = { + viewPath: 'modal_opinary.html', + displayName: 'Opinary', + object_type: 'opinary', + validationOptions: { + rules: { + title: 'required', + url: { + required: true, + validOpinaryPollUrl: true + } + } + } + }, + uiElements = { + intro: '.social_editor-intro', + previewBtn: '.js-btn-preview', + preview: '.social_editor-preview', + previewPost: '.social_editor-preview_post', + titleInput: '.js-input-title', + urlInput: '.js-input-url', + editBtn: '.js-btn-edit', + cancelBtn: '.js-btn-cancel', + dropTarget: '.social_editor-intro_inner' + }; + + function registerUiElements(scope, $el) { + scope.$ui = scope.$ui || {}; + + for(var key in uiElements) + { + if(uiElements.hasOwnProperty(key)) + { + scope.$ui[key] = $(uiElements[key], $el); + } + } + + return scope.$ui; + } + + function showIntro(scope) { + var $ui = scope.$ui; + + // Show cancel button as needed + $ui.cancelBtn.toggle(!!scope.modalCtrl.isAdd); + + // Show intro + $ui.intro.show(); + + // Hide preview related elements + $ui.preview.hide(); + $ui.editBtn.hide(); + } + + function showPreview(scope) { + var $ui = scope.$ui; + + // Append embed html code + $ui.previewPost.html(scope.parseForEditor()); + + // Set title text + $ui.titleInput.val(scope.model.title); + + // Show edit btn as needed + $ui.editBtn.toggle(!!scope.modalCtrl.isAdd); + + // Show preview container + $ui.preview.show(); + + // Hide intro related elements + $ui.intro.hide(); + $ui.cancelBtn.hide(); + } + + function isValidUrl(url) { + var rgxOpinaryPollUrl = /^(?:https:)?\/\/compass.pressekompass.net\/compasses/i; + return rgxOpinaryPollUrl.test(url); + } + + // CONSTRUCTOR + function opinaryEmbed(options){ + var self = this; + self.parent.constructor(options, defaults, embedName, self); + }; + + opinaryEmbed.inherits(EntityEmbed.embedTypes.genericEmbed); + EntityEmbed.embedTypes[embedName] = opinaryEmbed; + + // PUBLIC + opinaryEmbed.prototype.orderIndex = 14; + + // function to initialize the modal view + // called after the modal view has loaded + // $el: a jQuery element for the modal view + opinaryEmbed.prototype.initModal = function($el, modalCtrl) { + var self = this; + var $ui; + + self.parent.initModal($el, modalCtrl, self); + + $ui = registerUiElements(self, $el); + + $.validator.addMethod('validOpinaryPollUrl', function(value, element, params) { + var isValid = isValidUrl(value); + return this.optional(element) || isValid; + }, 'The URL must be to a valid Opinary poll.'); + + $ui.previewBtn.on('click', function(evt) { + + evt.preventDefault(); + + self.getModelFromForm($el); + + if(isValidUrl(self.model.url)) + { + showPreview(self); + } + }); + + $ui.editBtn.on('click', function(evt) { + evt.preventDefault(); + showIntro(self); + }); + + $ui.cancelBtn.on('click', function(evt) { + evt.preventDefault(); + showPreview(self); + }); + + $ui.dropTarget + .on('dragenter dragover', function() { + $(this).addClass('js-dragover'); + }) + .on('dragleave drop', function() { + $(this).removeClass('js-dragover'); + }) + .on('drop', function(evt) { + + evt.stopPropagation(); + evt.preventDefault(); + + var droppedString = evt.originalEvent.dataTransfer.getData('text/plain'); + var droppedHtml = evt.originalEvent.dataTransfer.getData('text/html'); + var $droppedElm = $( droppedHtml ); + var $context = $('