From 198bd477a506afe5c0a4f85f5380c3206d5a0ffe Mon Sep 17 00:00:00 2001 From: fabrixxm Date: Tue, 28 Oct 2014 15:06:34 +0100 Subject: [PATCH] New functions: new message and reply --- www/css/index.css | 33 ++++++++++ www/index.html | 43 ++++++++++++- www/js/index.js | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 241 insertions(+), 11 deletions(-) diff --git a/www/css/index.css b/www/css/index.css index b1e64a8..9666694 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -95,5 +95,38 @@ section[role="region"][data-position="right"] { overflow: auto; } +/* lista con footer */ +.scrollable.header.footer { + height: calc(100% - 8rem); +} +/* barra rispondi */ +.bb-tablist li { background-color: #969696; } +.bb-tablist .inputbox { flex-grow: 4; } +.bb-tablist .inputbox input { margin-top: 2px; } +/*.bb-tablist > li > a { padding-top: 6px; } +.bb-tablist .action-icon:before { left: 40%; }*/ +/* input con immagine */ +form p > .pack { + float: left; + margin: 0px 0.5rem 0px 0px; + height: 100%; + position: relative; + z-index: 2; + display: block; + overflow: hidden; + width: 4rem; + height: 4rem; + border-radius: 2.5rem; + box-sizing: border-box; + box-shadow: 0px 0px 0px 0.1rem #DEDEDE; + background: none repeat scroll center center / cover transparent; + position: relative; + z-index: 1; + image-rendering: -moz-crisp-edges; +} + +form p > .pack ~ input { + width : calc(100% - 4.5rem); +} diff --git a/www/index.html b/www/index.html index 31f04aa..1235f03 100644 --- a/www/index.html +++ b/www/index.html @@ -26,11 +26,15 @@ + + + + @@ -61,6 +65,9 @@
hide sidebar show sidebar + + add +

~F Messenger inbox

@@ -77,18 +84,48 @@
back -

Messages .

+

Messages .

-
+
+
    +
  • + +
    • +
  • + +
    • + +
+
+
+ back + + + +

New message

+ +
+
+

Send new message

+
+

+

+

+ +
+ +
+
+
back @@ -105,7 +142,7 @@
- + diff --git a/www/js/index.js b/www/js/index.js index c2fb732..8b79b15 100644 --- a/www/js/index.js +++ b/www/js/index.js @@ -11,6 +11,7 @@ function MessageList(sel_elm){ this.elm = $(sel_elm); } + MessageList.prototype.update = function(clb){ $.getJSON(url("direct_messages"), {getText:"plain"}, function(data, status){ //console.log(status); @@ -37,16 +38,32 @@ MessageList.prototype.update = function(clb){ }.bind(this)); } + +/** + * Conversation with a user + */ function Messages(sel_elm){ this.elm = $(sel_elm); + this.username = null; } Messages.prototype.update = function(username, clb) { + if (username) { + this.username = username; + } else { + username = this.username; + } + + if (!username) return; + + $("#contact_screen_name").html(username); + $.getJSON(url("direct_messages/all"), {getText:"html", screen_name: username}, function(data, status){ //console.log(data, status); data.reverse(); var out=""; var pack=""; + var reply_id; // id of the message to reply to. should be the last. for (k in data) { var msg = data[k]; out += "
  • "; @@ -57,14 +74,126 @@ Messages.prototype.update = function(username, clb) { out += "

    " + msg.sender_screen_name + " - " + msg.created_at + "

    "; //out += ""; out += "
    • "; + reply_id = msg.id; } + /* reply form */ + $(".message_text").val(""); + $(".message_to").val(username); + $(".message_reply").val(reply_id); + this.elm.html(out); if(clb) clb(data); }.bind(this)); } +/** + * Send Message + */ +function Compose(sel_elm){ + this.elm = $(sel_elm); + this.contact_photo = $(sel_elm).find(".contact_photo"); + this.contact_photo_empty = this.contact_photo.attr("src"); + this.friends = {}; + this.last_update = 0; + + + this.elm.find(".message_to").on('input', function(e){ + var f=$(e.target).val(); + if (this.friends[f] !== undefined) { + this.contact_photo.attr("src",this.friends[f].profile_image_url); + } + }.bind(this)); +} + +Compose.prototype.update = function(clb){ + if (this.last_update > (new Date())-60000) { + if (clb) clb(this.friends) + return; + } + var dl = this.elm.find("#contacts"); + $.getJSON(url("statuses/friends"), {}, function(data, status) { + var out=""; + this.friends = {}; + for (k in data){ + var friend = data[k]; + if (friend.network == "dfrn") + this.friends[friend.screen_name] = friend; + out += ""; + } + this.last_update = (new Date()) - 0; + dl.html(out); + if (clb) clb(data); + }.bind(this)); + +} + +Compose.prototype.send = function(clb){ + + var screen_name = $(".message_to").val(); + var replyto = $(".message_reply").val(); + var text = $(".message_body").val(); + if (text=="") + text = $(".message_text").val(); + + if (text=="") { + alert("Please enter the message body"); + return; + } + if (screen_name=="" || this.friends[screen_name]==undefined){ + alert("Please enter a valid recipient"); + return; + } + + /** + WARNING: HACK AHEAD! + + Friendica doesn't set CORS headers (it should.. open a feature request!) + We can't send post requests via ajax on different domains without it + (we can get with jsonp, wich is another hack, but standard...) + We create an iframe, append it to body and create a form wich post data to + remote server. + We listen for 'load' event to know when the request returned data, so we + can update the message list. + We sould remove it when finished. + We could read the content of the iframe before removeit as it would be json + reply from API... + **/ + + + var f = $("