User:Docmoates/common.js: Difference between revisions

Revision as of 14:28, 4 February 2026

/* SocialFeed v7 - Polished Modern Design */
if (mw.config.get("wgPageName").indexOf("User:Docmoates/Social") !== -1) {
mw.loader.using(["mediawiki.api", "mediawiki.util"]).then(function() {
var $=jQuery,api=new mw.Api(),apiUrl=mw.util.wikiScript("api"),user=mw.config.get("wgUserName")||"Guest";
var ud={photo:localStorage.getItem("sf_photo_"+user)||"",bio:localStorage.getItem("sf_bio_"+user)||""};
var pp={image:"",location:""},uf={};

function gi(n){return(n||"?").charAt(0).toUpperCase();}
function esc(t){var d=document.createElement("div");d.textContent=t;return d.innerHTML;}
function ago(ds){var s=Math.floor((Date.now()-new Date(ds))/1000);if(s<60)return"just now";var m=Math.floor(s/60);if(m<60)return m+" min ago";var h=Math.floor(m/60);if(h<24)return h+"h ago";return Math.floor(h/24)+"d ago";}
function av(p,n,s){return p?'<img src="'+esc(p)+'">':'<div class="sf-av-placeholder" style="font-size:'+s+'px">'+gi(n)+'</div>';}
function om(id){$("#"+id).addClass("open");}
function cm(id){$("#"+id).removeClass("open");}
function upload(file,pre,prog){return api.getToken("csrf").then(function(tk){var fd=new FormData();fd.append("action","upload");fd.append("filename",pre+"_"+user+"_"+Date.now()+"."+file.name.split(".").pop());fd.append("file",file);fd.append("token",tk);fd.append("format","json");fd.append("ignorewarnings","1");return $.ajax({url:apiUrl,type:"POST",data:fd,processData:false,contentType:false,xhr:function(){var x=$.ajaxSettings.xhr();if(x.upload&&prog)x.upload.addEventListener("progress",function(e){if(e.lengthComputable)prog(Math.round(e.loaded/e.total*100));});return x;}});}).then(function(r){if(r.upload&&r.upload.imageinfo)return r.upload.imageinfo.url;throw new Error("Upload failed");});}

setTimeout(function(){$('button,a').filter(function(){return $(this).text().indexOf('Design')!==-1;}).hide();},200);

var css=`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
[class*="wikibox"]{display:none!important}
#social-app{font-family:'Inter',system-ui,-apple-system,sans-serif;background:linear-gradient(180deg,#f0f2f5 0%,#e4e6e9 100%);min-height:100vh;padding:32px 20px}
#social-app *{box-sizing:border-box;margin:0;padding:0}
.sf-container{max-width:600px;margin:0 auto}

/* Card styles */
.sf-card{background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);margin-bottom:20px}

/* Composer */
.sf-composer{padding:24px}
.sf-composer-header{display:flex;gap:16px;margin-bottom:20px}
.sf-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #e8e8e8}
.sf-avatar img{width:100%;height:100%;object-fit:cover}
.sf-av-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.sf-composer-input{flex:1;background:#f5f7fa;border-radius:24px;padding:14px 20px;border:none;font-size:16px;color:#1a1a2e;outline:none;resize:none;min-height:52px;font-family:inherit;line-height:1.4}
.sf-composer-input::placeholder{color:#8e8e8e}
.sf-composer-input:focus{background:#eef1f5}

.sf-preview-area{margin:16px 0;display:none}
.sf-preview-area.show{display:block}
.sf-preview-area img{width:100%;border-radius:12px;max-height:300px;object-fit:cover}
.sf-preview-remove{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;cursor:pointer;font-size:18px}
.sf-preview-wrap{position:relative}

.sf-location-tag{background:#e8f5e9;color:#2e7d32;padding:8px 14px;border-radius:20px;font-size:14px;display:inline-flex;align-items:center;gap:8px;margin:12px 0;display:none}
.sf-location-tag.show{display:inline-flex}
.sf-location-tag button{background:none;border:none;color:#666;cursor:pointer;font-size:16px;margin-left:4px}

.sf-composer-divider{height:1px;background:#eee;margin:20px 0}

.sf-composer-actions{display:flex;align-items:center;justify-content:space-between}
.sf-action-buttons{display:flex;gap:8px}
.sf-action-btn{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform 0.2s,box-shadow 0.2s}
.sf-action-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.sf-action-btn.photo{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}
.sf-action-btn.video{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}
.sf-action-btn.location{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);color:#fff}
.sf-action-btn.emoji{background:linear-gradient(135deg,#fa709a 0%,#fee140 100%);color:#fff}
.sf-action-btn.gif{background:linear-gradient(135deg,#a18cd1 0%,#fbc2eb 100%);color:#fff}

.sf-post-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px 32px;border-radius:25px;font-weight:600;font-size:15px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.sf-post-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.4)}
.sf-post-button:disabled{opacity:0.5;cursor:not-allowed}

/* Posts */
.sf-post-card{overflow:hidden}
.sf-post-header{display:flex;align-items:center;gap:14px;padding:20px 24px}
.sf-post-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #eee}
.sf-post-avatar img{width:100%;height:100%;object-fit:cover}
.sf-post-info{flex:1}
.sf-post-author{font-weight:600;font-size:15px;color:#1a1a2e}
.sf-post-meta{font-size:13px;color:#8e8e8e;margin-top:2px}
.sf-post-menu{width:36px;height:36px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer;font-size:16px;color:#666}
.sf-post-menu:hover{background:#eee}

.sf-post-content{padding:0 24px 20px;font-size:16px;line-height:1.6;color:#333}
.sf-post-media{background:#f5f5f5}
.sf-post-media img{width:100%;display:block}
.sf-post-media video{width:100%}
.sf-post-media iframe{width:100%;aspect-ratio:16/9;border:none}

.sf-post-reactions{display:flex;gap:8px;padding:16px 24px;border-top:1px solid #f0f0f0}
.sf-reaction-btn{width:44px;height:44px;border-radius:50%;background:#f5f7fa;border:none;cursor:pointer;font-size:20px;transition:all 0.2s}
.sf-reaction-btn:hover{background:#eef1f5;transform:scale(1.15)}
.sf-reaction-btn.liked{background:#ffe5e5}

.sf-post-stats{padding:8px 24px;font-size:14px;font-weight:600;color:#333}
.sf-post-comments-link{padding:8px 24px 16px;font-size:14px;color:#8e8e8e;cursor:pointer}
.sf-post-comments-link:hover{color:#667eea}

.sf-comments-list{padding:0 24px 16px;display:none;max-height:250px;overflow-y:auto}
.sf-comments-list.show{display:block}
.sf-comment{display:flex;gap:12px;margin-bottom:14px}
.sf-comment-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0}
.sf-comment-avatar img{width:100%;height:100%;object-fit:cover}
.sf-comment-bubble{background:#f5f7fa;padding:12px 16px;border-radius:18px;flex:1}
.sf-comment-author{font-weight:600;font-size:13px;color:#1a1a2e}
.sf-comment-text{font-size:14px;color:#333;margin-top:4px;line-height:1.4}
.sf-comment-time{font-size:12px;color:#8e8e8e;margin-top:6px;margin-left:52px}

.sf-comment-form{display:flex;gap:12px;padding:16px 24px;border-top:1px solid #f0f0f0;align-items:center}
.sf-comment-input{flex:1;background:#f5f7fa;border:none;border-radius:24px;padding:12px 18px;font-size:14px;outline:none}
.sf-comment-input::placeholder{color:#8e8e8e}
.sf-comment-input:focus{background:#eef1f5}
.sf-comment-submit{background:none;border:none;color:#667eea;font-weight:600;font-size:14px;cursor:pointer}
.sf-comment-submit:hover{color:#764ba2}

/* Empty state */
.sf-empty{padding:80px 40px;text-align:center}
.sf-empty-visual{width:120px;height:120px;margin:0 auto 24px;background:linear-gradient(135deg,#f5f7fa 0%,#e4e8ec 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px}
.sf-empty-title{font-size:22px;font-weight:600;color:#1a1a2e;margin-bottom:8px}
.sf-empty-text{font-size:15px;color:#8e8e8e;max-width:280px;margin:0 auto}

/* Modal */
.sf-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
.sf-modal.open{display:flex}
.sf-modal-content{background:#fff;border-radius:20px;width:100%;max-width:480px;overflow:hidden;animation:modalIn 0.25s ease}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.sf-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #eee}
.sf-modal-title{font-weight:600;font-size:18px;color:#1a1a2e}
.sf-modal-close{width:36px;height:36px;border-radius:50%;background:#f5f5f5;border:none;font-size:20px;cursor:pointer;color:#666}
.sf-modal-close:hover{background:#eee}
.sf-modal-body{padding:24px}
.sf-upload-zone{border:2px dashed #ddd;border-radius:16px;padding:48px 24px;text-align:center;cursor:pointer;transition:all 0.2s}
.sf-upload-zone:hover{border-color:#667eea;background:#f8f9ff}
.sf-upload-zone input{display:none}
.sf-upload-icon{font-size:48px;margin-bottom:12px}
.sf-upload-text{font-size:15px;color:#666}
.sf-upload-text b{color:#667eea}
.sf-url-input{width:100%;padding:14px 18px;border:2px solid #eee;border-radius:12px;font-size:15px;margin-top:20px;outline:none}
.sf-url-input:focus{border-color:#667eea}
.sf-url-input::placeholder{color:#aaa}
.sf-preview-thumb{width:100%;max-height:200px;object-fit:contain;border-radius:12px;margin-top:16px;display:none}
.sf-preview-thumb.show{display:block}
.sf-modal-buttons{display:flex;gap:12px;margin-top:24px}
.sf-modal-btn{flex:1;padding:14px;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer;transition:all 0.2s}
.sf-modal-btn-cancel{background:#f5f5f5;color:#666;border:none}
.sf-modal-btn-cancel:hover{background:#eee}
.sf-modal-btn-confirm{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none}
.sf-modal-btn-confirm:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.3)}
`;
$("<style>").text(css).appendTo("head");

var h='<div class="sf-container">';

// Composer
h+='<div class="sf-card sf-composer">';
h+='<div class="sf-composer-header"><div class="sf-avatar" id="my-avatar">'+av(ud.photo,user,20)+'</div>';
h+='<textarea class="sf-composer-input" id="post-text" placeholder="What\'s on your mind, '+esc(user.split(/[\s_]/)[0])+'?"></textarea></div>';
h+='<div class="sf-preview-area" id="post-preview"><div class="sf-preview-wrap"></div></div>';
h+='<div class="sf-location-tag" id="post-loc">📍 <span></span><button id="rm-loc">×</button></div>';
h+='<div class="sf-composer-divider"></div>';
h+='<div class="sf-composer-actions"><div class="sf-action-buttons">';
h+='<button class="sf-action-btn photo" id="btn-photo" title="Photo">🖼️</button>';
h+='<button class="sf-action-btn video" title="Video">🎬</button>';
h+='<button class="sf-action-btn location" id="btn-loc" title="Location">📍</button>';
h+='<button class="sf-action-btn emoji" id="btn-emoji" title="Emoji">😊</button>';
h+='<button class="sf-action-btn gif" title="GIF">GIF</button>';
h+='</div><button class="sf-post-button" id="btn-post" disabled>Post</button></div>';
h+='</div>';

// Feed
h+='<div id="feed"></div>';
h+='</div>';

// Photo Modal
h+='<div class="sf-modal" id="photo-modal"><div class="sf-modal-content">';
h+='<div class="sf-modal-header"><span class="sf-modal-title">Add Photo</span><button class="sf-modal-close" data-close="photo-modal">×</button></div>';
h+='<div class="sf-modal-body"><div class="sf-upload-zone" id="photo-upload"><input type="file" accept="image/*"><div class="sf-upload-icon">📸</div><div class="sf-upload-text">Drag & drop or <b>browse</b></div></div>';
h+='<input class="sf-url-input" id="photo-url" placeholder="Or paste image URL...">';
h+='<img class="sf-preview-thumb" id="photo-preview">';
h+='<div class="sf-modal-buttons"><button class="sf-modal-btn sf-modal-btn-cancel" data-close="photo-modal">Cancel</button><button class="sf-modal-btn sf-modal-btn-confirm" id="confirm-photo">Add Photo</button></div></div></div></div>';

$("#social-app").html(h);
var $app=$("#social-app");

// Modal handlers
$app.on("click","[data-close]",function(){cm($(this).data("close"));});
$app.on("click",".sf-modal",function(e){if($(e.target).hasClass("sf-modal"))cm(this.id);});

// Upload handler
var photoFile=null;
$("#photo-upload").on("click",function(){$(this).find("input").click();});
$("#photo-upload input").on("change",function(){if(this.files[0]){photoFile=this.files[0];var r=new FileReader();r.onload=function(e){$("#photo-preview").attr("src",e.target.result).addClass("show");};r.readAsDataURL(this.files[0]);}});
$("#photo-url").on("input",function(){var v=$(this).val();if(v)$("#photo-preview").attr("src",v).addClass("show");else if(!photoFile)$("#photo-preview").removeClass("show");});

$("#btn-photo").on("click",function(){photoFile=null;$("#photo-preview").removeClass("show");$("#photo-url").val("");$("#photo-upload input").val("");om("photo-modal");});
$("#confirm-photo").on("click",function(){
  var url=$("#photo-url").val().trim();
  if(url){pp.image=url;showImg(url);cm("photo-modal");}
  else if(photoFile){
    upload(photoFile,"Post",function(){}).then(function(u){pp.image=u;showImg(u);cm("photo-modal");photoFile=null;});
  }else{alert("Select or paste an image");}
});
function showImg(u){$("#post-preview").addClass("show").find(".sf-preview-wrap").html('<img src="'+u+'"><button class="sf-preview-remove" id="rm-img">×</button>');upd();}
$app.on("click","#rm-img",function(){pp.image="";$("#post-preview").removeClass("show");upd();});

$("#btn-loc").on("click",function(){var l=prompt("Location:");if(l){pp.location=l;$("#post-loc").addClass("show").find("span").text(l);}});
$app.on("click","#rm-loc",function(){pp.location="";$("#post-loc").removeClass("show");});
$("#btn-emoji").on("click",function(){var e=prompt("Emoji:");if(e){var t=$("#post-text")[0];t.value+=e;t.focus();upd();}});

$("#post-text").on("input",upd);
function upd(){$("#btn-post").prop("disabled",!$("#post-text").val().trim()&&!pp.image);}

$("#btn-post").on("click",function(){
  var t=$("#post-text").val().trim();if(!t&&!pp.image)return;
  var $b=$(this).prop("disabled",true).text("Posting...");
  var p={action:"socialfeed",sfaction:"createpost",content:t||"(media)"};
  if(pp.image)p.image_url=pp.image;
  if(pp.location)p.location=pp.location;
  api.postWithToken("csrf",p).then(function(){
    $("#post-text").val("");pp={image:"",location:""};
    $("#post-preview,#post-loc").removeClass("show");
    $b.prop("disabled",true).text("Post");loadFeed();
  }).fail(function(){$b.prop("disabled",false).text("Post");alert("Error posting");});
});

// Post interactions
$app.on("click",".sf-reaction-btn[data-id]",function(){api.postWithToken("csrf",{action:"socialfeed",sfaction:"react",post_id:$(this).data("id"),reaction_type:"like"}).then(loadFeed);});
$app.on("click",".sf-post-menu[data-del]",function(){if(confirm("Delete this post?")){api.postWithToken("csrf",{action:"socialfeed",sfaction:"deletepost",post_id:$(this).data("del")}).then(loadFeed);}});
$app.on("click",".sf-post-comments-link",function(){var id=$(this).data("id"),$c=$("#comments-"+id);$c.toggleClass("show");if($c.hasClass("show"))loadComments(id);});
$app.on("keypress",".sf-comment-input",function(e){if(e.which===13){var $i=$(this),t=$i.val().trim(),id=$i.data("id");if(t){$i.val("").prop("disabled",true);api.postWithToken("csrf",{action:"socialfeed",sfaction:"comment",post_id:id,content:t}).then(function(){$i.prop("disabled",false);loadComments(id);loadFeed();});}}});

function loadFeed(){
  api.get({action:"socialfeed",sfaction:"getposts",limit:20}).then(function(r){
    var posts=(r.socialfeed&&r.socialfeed.posts)||[];
    if(!posts.length){
      $("#feed").html('<div class="sf-card"><div class="sf-empty"><div class="sf-empty-visual">📷</div><div class="sf-empty-title">No posts yet</div><div class="sf-empty-text">Share your first post to get the conversation started!</div></div></div>');
      return;
    }
    var h=posts.map(function(p){
      var pic=localStorage.getItem("sf_photo_"+p.username)||"";
      var likes=0;for(var k in p.reaction_counts)likes+=p.reaction_counts[k];
      var media="";
      if(p.image_url)media='<div class="sf-post-media"><img src="'+esc(p.image_url)+'"></div>';
      else if(p.video_url&&p.video_url.match(/youtube|youtu\.be/)){var vid=(p.video_url.match(/(?:v=|youtu\.be\/)([^&]+)/)||[])[1];if(vid)media='<div class="sf-post-media"><iframe src="https://www.youtube.com/embed/'+vid+'" allowfullscreen></iframe></div>';}
      var del=p.username===user?'<button class="sf-post-menu" data-del="'+p.id+'">×</button>':"";
      var liked=p.user_reaction==="like"?" liked":"";
      return '<div class="sf-card sf-post-card"><div class="sf-post-header"><div class="sf-post-avatar">'+av(pic,p.username,16)+'</div><div class="sf-post-info"><div class="sf-post-author">'+esc(p.username)+'</div><div class="sf-post-meta">'+ago(p.created)+'</div></div>'+del+'</div>'+(p.content&&p.content!=="(media)"?'<div class="sf-post-content">'+esc(p.content)+'</div>':'')+media+'<div class="sf-post-reactions"><button class="sf-reaction-btn'+liked+'" data-id="'+p.id+'">'+(liked?"❤️":"🤍")+'</button><button class="sf-reaction-btn">💬</button><button class="sf-reaction-btn">↗️</button><button class="sf-reaction-btn">🔖</button></div>'+(likes?'<div class="sf-post-stats">'+likes+' like'+(likes>1?'s':'')+'</div>':'')+(p.comments?'<div class="sf-post-comments-link" data-id="'+p.id+'">View '+p.comments+' comment'+(p.comments>1?'s':'')+'</div>':'')+'<div class="sf-comments-list" id="comments-'+p.id+'"></div><div class="sf-comment-form"><input class="sf-comment-input" data-id="'+p.id+'" placeholder="Write a comment..."><button class="sf-comment-submit">Post</button></div></div>';
    }).join("");
    $("#feed").html(h);
  });
}

function loadComments(id){
  api.get({action:"socialfeed",sfaction:"getcomments",post_id:id}).then(function(r){
    var cmts=(r.socialfeed&&r.socialfeed.comments)||[];
    var h=cmts.map(function(c){
      var pic=localStorage.getItem("sf_photo_"+c.username)||"";
      return '<div class="sf-comment"><div class="sf-comment-avatar">'+av(pic,c.username,12)+'</div><div class="sf-comment-bubble"><div class="sf-comment-author">'+esc(c.username)+'</div><div class="sf-comment-text">'+esc(c.content)+'</div></div></div><div class="sf-comment-time">'+ago(c.created)+'</div>';
    }).join("");
    $("#comments-"+id).html(h||'<div style="padding:12px 0;color:#8e8e8e;font-size:14px">No comments yet</div>');
  });
}

loadFeed();
});
}