From 85bfce0237b99b084837946b117466314fd3f541 Mon Sep 17 00:00:00 2001 From: Shai Mor Date: Mon, 11 Aug 2014 18:55:53 -0400 Subject: [PATCH] part way through add links to topic cards --- .../jquery.embedly.min.js | 6 ++ app/assets/javascripts/metamaps/Metamaps.js | 91 ++++++++++--------- app/assets/stylesheets/base.css | 82 +++++++++++------ app/assets/stylesheets/clean.css | 3 + app/views/layouts/_templates.html.erb | 4 +- 5 files changed, 114 insertions(+), 72 deletions(-) create mode 100644 app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js diff --git a/app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js b/app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js new file mode 100644 index 00000000..85d9aa08 --- /dev/null +++ b/app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js @@ -0,0 +1,6 @@ +/*! Embedly jQuery - v3.1.1 - 2013-06-05 + * https://github.com/embedly/embedly-jquery + * Copyright (c) 2013 Sean Creeley + * Licensed BSD + */ +(function(t){var e={key:null,endpoint:"oembed",secure:null,query:{},method:"replace",addImageStyles:!0,wrapElement:"div",className:"embed",batch:20,urlRe:null},i=/(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,r=function(t){return null===t||void 0===t},n=function(e,i){var r=[],n=[];return t.each(e,function(t,e){n.push(e),n.length===i&&(r.push(n),n=[])}),0!==n.length&&r.push(n),r},s=function(e){return r(e)?[]:t.isArray(e)?e:[e]},o=function(e){return t.map(e[0],function(i,r){return[t.map(e,function(t){return t[r]})]})},a=function(t,e,i){this.init(t,e,i)};a.prototype={init:function(e){this.urls=e,this.count=0,this.results={},this._deferred=t.Deferred()},notify:function(e){if(this.results[e.original_url]=e,this.count++,this._deferred.notify.apply(this._deferred,[e]),this.count===this.urls.length){var i=this,r=t.map(this.urls,function(t){return i.results[t]});this._deferred.resolve(r)}return this},state:function(){return this._deferred.state.apply(this._deferred,arguments)}},window.Keeper=a;var l=function(){};l.prototype={defaults:{},log:function(t,e){r(window.console)||r(window.console[t])||window.console[t].apply(window.console,[e])},build:function(e,i,n){n=r(n)?{}:n;var s=n.secure;r(s)&&(s="https:"===window.location.protocol?!0:!1);var o=(s?"https":"http")+"://api.embed.ly/"+("objectify"===e?"2/":"1/")+e,a=r(n.query)?{}:n.query;return a.key=n.key,o+="?"+t.param(a),o+="&urls="+t.map(i,encodeURIComponent).join(",")},ajax:function(l,h,u){if(u=t.extend({},e,t.embedly.defaults,"object"==typeof u&&u),r(u.key))return this.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly"),null;h=s(h);var d,p=new a(h),c=[],f=[];t.each(h,function(t,e){d=!1,i.test(e)&&(d=!0,null!==u.urlRe&&u.urlRe.test&&!u.urlRe.test(e)&&(d=!1)),d===!0?c.push(e):f.push({url:e,original_url:e,error:!0,invalid:!0,type:"error",error_message:'Invalid URL "'+e+'"'})});var y=n(c,u.batch),m=this;return t.each(y,function(e,i){t.ajax({url:m.build(l,i,u),dataType:"jsonp",success:function(e){t.each(o([i,e]),function(t,e){var i=e[1];i.original_url=e[0],i.invalid=!1,p.notify(i)})}})}),f.length&&setTimeout(function(){t.each(f,function(t,e){p.notify(e)})},1),p._deferred},oembed:function(t,e){return this.ajax("oembed",t,e)},preview:function(t,e){return this.ajax("preview",t,e)},objectify:function(t,e){return this.ajax("objectify",t,e)},extract:function(t,e){return this.ajax("extract",t,e)}};var h=function(){};h.prototype={build:function(e,i,n){n=t.extend({},t.embedly.defaults,"object"==typeof n&&n);var s=n.secure;r(s)&&(s="https:"===window.location.protocol?!0:!1);var o=(s?"https":"http")+"://i.embed.ly/"+("display"===e?"1/":"1/display/")+e,a=r(n.query)?{}:n.query;return a.key=n.key,o+="?"+t.param(a),o+="&url="+encodeURIComponent(i)},display:function(t,e){return this.build("display",t,e)},resize:function(t,e){return this.build("resize",t,e)},fill:function(t,e){return this.build("fill",t,e)},crop:function(t,e){return this.build("crop",t,e)}};var u=function(t,e,i){this.init(t,e,i)};u.prototype={init:function(e,i,r){this.elem=e,this.$elem=t(e),this.original_url=i,this.options=r,this.loaded=t.Deferred();var n=this;this.loaded.done(function(){n.$elem.trigger("loaded",[n])}),this.$elem.trigger("initialized",[this])},progress:function(e){t.extend(this,e),this.options.display?this.options.display.apply(this.elem,[this,this.elem]):"oembed"===this.options.endpoint&&this.display(),this.loaded.resolve(this)},imageStyle:function(){var t,e=[];return this.options.addImageStyles&&(this.options.query.maxwidth&&(t=isNaN(parseInt(this.options.query.maxwidth,10))?"":"px",e.push("max-width: "+this.options.query.maxwidth+t)),this.options.query.maxheight&&(t=isNaN(parseInt(this.options.query.maxheight,10))?"":"px",e.push("max-height: "+this.options.query.maxheight+t))),e.join(";")},display:function(){if("error"===this.type)return!1;this.style=this.imageStyle();var t;"photo"===this.type?(t="",t+=""+this.title+""):"video"===this.type||"rich"===this.type?t=this.html:(this.title=this.title||this.url,t=this.thumbnail_url?"":"",t+=""+this.title+"",t+=this.provider_name?""+this.provider_name+"":"",t+=this.description?'
'+this.description+"
":""),this.options.wrapElement&&(t="<"+this.options.wrapElement+' class="'+this.options.className+'">'+t+""),this.code=t,"replace"===this.options.method?this.$elem.replaceWith(this.code):"after"===this.options.method?this.$elem.after(this.code):"afterParent"===this.options.method?this.$elem.parent().after(this.code):"replaceParent"===this.options.method&&this.$elem.parent().replaceWith(this.code),this.$elem.trigger("displayed",[this])}},t.embedly=new l,t.embedly.display=new h,t.fn.embedly=function(i){if(void 0===i||"object"==typeof i){if(i=t.extend({},e,t.embedly.defaults,"object"==typeof i&&i),r(i.key))return t.embedly.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly"),this.each(t.noop);var n={},s=function(e){if(!t.data(t(e),"embedly")){var r=t(e).attr("href"),s=new u(e,r,i);t.data(e,"embedly",s),n.hasOwnProperty(r)?n[r].push(s):n[r]=[s]}},o=this.each(function(){r(t(this).attr("href"))?t(this).find("a").each(function(){r(t(this).attr("href"))||s(this)}):s(this)}),a=t.embedly.ajax(i.endpoint,t.map(n,function(t,e){return e}),i).progress(function(e){t.each(n[e.original_url],function(t,i){i.progress(e)})});return i.progress&&a.progress(i.progress),i.done&&a.done(i.done),o}},t.expr[":"].embedly=function(e){return!r(t(e).data("embedly"))},t.fn.display=function(i,n){if(r(i)&&(i="display"),void 0===n||"object"==typeof n){if(n=t.extend({},e,t.embedly.defaults,"object"==typeof n&&n),r(n.key))return t.embedly.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly/display"),this.each(t.noop);var s=function(e){var r=t(e);if(!r.data("display")){var s=r.data("src")||r.attr("href"),o={original_url:s,url:t.embedly.display.build(i,s,n)};r.data("display",o),r.trigger("initialized",[e]);var a="";r.is("a")?r.append(a):r.replaceWith(a)}},o=function(e){return r(t(e).data("src"))&&r(t(e).attr("href"))?!1:!0},a=this.each(function(){o(this)?s(this):t(this).find("img,a").each(function(){o(this)&&s(this)})});return a}},t.expr[":"].display=function(e){return!r(t(e).data("display"))}})(jQuery,window); \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index b3d3b2b6..6b608034 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/app/assets/javascripts/metamaps/Metamaps.js @@ -639,20 +639,6 @@ Metamaps.TopicCard = { $('.showcard').draggable({ handle: ".metacodeImage" }); - $('#showcard').resizable({ - maxHeight: 500, - maxWidth: 500, - minHeight: 320, - minWidth: 226, - resize: function (event, ui) { - var p = $('#showcard').find('.scroll'); - p.height(p.height()).mCustomScrollbar('update'); - } - }).css({ - display: 'none', - top: '300px', - left: '100px' - }); }, fadeInShowCard: function (topic) { $('.showcard').fadeIn('fast'); @@ -678,6 +664,38 @@ Metamaps.TopicCard = { var self = Metamaps.TopicCard; var showCard = document.getElementById('showcard'); + + // starting embed.ly + if (false && topic.get('link')) { + $('.showcard .attachments a').embedly({ + query: {maxwidth: 300}, + key: '7983300f4c1f48569ca242e3d6bff1e9' + }); + } + + var addLinkFunc = function () { + var addLinkDiv =''; + var addLinkDesc ='Enter or paste a link'; + addLinkDiv+='
'; + addLinkDiv+='
'; + addLinkDiv+='
'; + $('.addAttachment').hide(); + $('.attachments').append(addLinkDiv); + $('.showcard #addLinkBack').click(backFunc); + $('.showcard #addLinkReset').click(resetFunc); + }; + var backFunc = function () { + $('.addLink').remove(); + $('.addAttachment').show(); + }; + var resetFunc = function () { + $('#addLinkInput input').val(''); + $('#addLinkInput input').focus(); + }; + + $('.showcard #addlink').click(addLinkFunc); + + var selectingMetacode = false; // attach the listener that shows the metacode title when you hover over the image $('.showcard .metacodeImage').mouseenter(function () { @@ -792,12 +810,6 @@ Metamaps.TopicCard = { var desc = $(this).html(); topic.set("desc", desc); }); - - $(showCard).find('.best_in_place_link').bind("ajax:success", function () { - var link = $(this).html(); - $(showCard).find('.go-link').attr('href', link); - topic.set("link", link); - }); }, populateShowCard: function (topic) { var self = Metamaps.TopicCard; @@ -806,7 +818,8 @@ Metamaps.TopicCard = { $(showCard).find('.permission').remove(); - var html = self.generateShowcardHTML.render(self.buildObject(topic)); + var topicForTemplate = self.buildObject(topic); + var html = self.generateShowcardHTML.render(topicForTemplate); if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { var perm = document.createElement('div'); @@ -828,29 +841,29 @@ Metamaps.TopicCard = { generateShowcardHTML: null, // will be initialized into a Hogan template within init function //generateShowcardHTML buildObject: function (topic) { + var nodeValues = {}; + var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper); - //link is rendered differently if user is logged out or in - var go_link, a_tag, close_a_tag; if (!authorized) { - go_link = ''; - if (topic.get("link") != "") { - a_tag = ''; - close_a_tag = ''; - } else { - a_tag = ''; - close_a_tag = ''; - } + } else { - go_link = ''; - a_tag = ''; - close_a_tag = ''; + } var desc_nil = "Click to add description..."; - var link_nil = "Click to add link..."; + + if (false && topic.get('link')) { + nodeValues.attachments = ''+topic.get('link')+''; + } + else { + nodeValues.attachments = '
'; + nodeValues.attachments+= '
photo
'; + nodeValues.attachments+= ''; + nodeValues.attachments+= '
audio
'; + nodeValues.attachments+= '
upload
'; + } nodeValues.permission = topic.get("permission"); nodeValues.mk_permission = topic.get("permission").substring(0, 2); @@ -864,14 +877,8 @@ Metamaps.TopicCard = { nodeValues.userid = topic.get("user_id"); nodeValues.username = topic.getUser().get("name"); nodeValues.date = topic.getDate(); - // the code for this is stored in /views/main/_metacodeOptions.html.erb nodeValues.metacode_select = $('#metacodeOptions').html(); - nodeValues.go_link = go_link; - nodeValues.a_tag = a_tag; - nodeValues.close_a_tag = close_a_tag; - nodeValues.link_nil = link_nil; - nodeValues.link = (topic.get("link") == "" && authorized) ? link_nil : topic.get("link"); nodeValues.desc_nil = desc_nil; nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc"); return nodeValues; diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 2f3e626c..cce83474 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -6,24 +6,24 @@ color:#444; } -.showcard, #showcard { +.showcard { position:absolute; - display:block; - top:-1000px; - left:-1000px; + display:none; + top:300px; + left:100px; margin-top: -181px; - width:226px; - height:320px; + width:300px; + height:360px; color:#FFF; text-align: left; overflow: visible; z-index:14000; background: #FFF; - border-radius:5px; + border-radius:2px; box-shadow: 6px 6px 8px rgba(0,0,0,0.4); } -#showcard .contributor { +.showcard .contributor { font-size:14px; } @@ -358,7 +358,7 @@ float:left; } -.CardOnGraph .link { +.CardOnGraph .attachments { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ @@ -378,12 +378,10 @@ float:left; flex-direction: row; border-top: 1px solid #AAAAAA; width:100%; - max-height:34px; - background: url(MMCCicon_link.png) no-repeat 6px 5px; - background-size:24px 24px; + max-height:48px; } -.CardOnGraph .best_in_place_link { +.attachments a { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ @@ -399,30 +397,58 @@ float:left; line-height: 16px; } -.best_in_place_link input{ +.addAttachment div { + display: inline-block; + width: 72px; + height: 23px; + text-align: center; + padding-top: 25px; + font-size: 12px; + color: #9e9e9e; + cursor: pointer; +} + +.addAttachment div:hover { + color: #616161; +} + +.addLink div { + display: inline-block; +} + +#addLinkBack { + height: 48px; + width: 48px; + cursor: pointer; +} +#addLinkInput { + height: 32px; + width: 236px; + padding: 8px 16px 8px 0; + position: relative; +} + +#addLinkInput input{ +padding: 7px 31px 7px 31px; height: 16px; -margin: -1px 0 0 0; -border: 0; +width: 172px; +margin: 0 0 0 0; +border: 1px solid #EFEFEF; outline: none; font-size: 16px; line-height: 16px; -line-height: 16px; background: white; color: black; font-family: 'LatoLight'; } -.CardOnGraph .go-link { - max-width: 34px; - height: 34px; - background: url(MMCCicon_go.png) no-repeat center center; - background-size: 20px 20px; - -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ - -moz-box-flex: 1; /* OLD - Firefox 19- */ - -webkit-flex: 1; /* Chrome */ - -ms-flex: 1; /* IE 10 */ - flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - margin-right:12px; +#addLinkReset { + position: absolute; + top: 8px; + right: 16px; + width: 32px; + height: 32px; + cursor: pointer; } .cardSettings { diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index d46a1d4e..bb137d21 100644 --- a/app/assets/stylesheets/clean.css +++ b/app/assets/stylesheets/clean.css @@ -46,6 +46,9 @@ .mapPage .mapElement { display: block; } +.mapPage .mapElementHidden { + display:none; +} /* loading */ diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index 98769ad4..6171700b 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -179,8 +179,8 @@
-
- {{a_tag}}{{link}}{{close_a_tag}} {{{go_link}}} +
+ {{{attachments}}}