MediaWiki:Gadget-SocialFeed.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* SocialFeed v10 - Polished Facebook-style Profile */
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)||"",cover:localStorage.getItem("sf_cover_"+user)||"",bio:localStorage.getItem("sf_bio_"+user)||"",location:localStorage.getItem("sf_location_"+user)||""};
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+"m";var h=Math.floor(m/60);if(h<24)return h+"h";return Math.floor(h/24)+"d";}
function av(p,n,s){return p?'<img src="'+esc(p)+'">':'<div class="sf-avatar-ph" 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='';
css+='[class*="wikibox"]{display:none!important}';
css+='#social-app{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f0f2f5;min-height:100vh;margin:-20px;padding:0}';
css+='#social-app *{box-sizing:border-box}';
css+='.sf-cover-section{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.1)}';
css+='.sf-cover-wrap{max-width:940px;margin:0 auto}';
css+='.sf-cover{height:350px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:0 0 8px 8px;position:relative;overflow:hidden}';
css+='.sf-cover img{width:100%;height:100%;object-fit:cover}';
css+='.sf-cover-btn{position:absolute;bottom:16px;right:16px;background:rgba(0,0,0,0.6);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px}';
css+='.sf-cover-btn:hover{background:rgba(0,0,0,0.8)}';
css+='.sf-header{display:flex;align-items:flex-end;padding:0 32px 16px;margin-top:-32px;position:relative}';
css+='.sf-pic-wrap{position:relative;margin-right:24px}';
css+='.sf-pic{width:168px;height:168px;border-radius:50%;border:4px solid #fff;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.15)}';
css+='.sf-pic img{width:100%;height:100%;object-fit:cover}';
css+='.sf-avatar-ph{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}';
css+='.sf-cam-btn{position:absolute;bottom:12px;right:12px;width:36px;height:36px;border-radius:50%;background:#e4e6eb;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 4px rgba(0,0,0,0.1)}';
css+='.sf-cam-btn:hover{background:#d8dadf}';
css+='.sf-info{flex:1;padding-bottom:8px}';
css+='.sf-name{font-size:32px;font-weight:700;color:#050505;margin:0 0 4px 0}';
css+='.sf-stats{font-size:15px;color:#65676b}';
css+='.sf-actions{display:flex;gap:8px;padding-bottom:8px;margin-left:auto}';
css+='.sf-btn{padding:8px 16px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:none;text-decoration:none}';
css+='.sf-btn-primary{background:#1877f2;color:#fff}';
css+='.sf-btn-primary:hover{background:#166fe5}';
css+='.sf-btn-secondary{background:#e4e6eb;color:#050505}';
css+='.sf-btn-secondary:hover{background:#d8dadf}';
css+='.sf-nav{border-top:1px solid #ddd}';
css+='.sf-tabs{display:flex;max-width:940px;margin:0 auto;padding:4px 32px 0}';
css+='.sf-tab{padding:16px 16px;font-size:15px;font-weight:600;color:#65676b;cursor:pointer;border-bottom:3px solid transparent;margin-right:4px;text-decoration:none;transition:all 0.2s}';
css+='.sf-tab:hover{background:#f0f2f5;border-radius:8px 8px 0 0}';
css+='.sf-tab.active{color:#1877f2;border-bottom-color:#1877f2}';
css+='.sf-main{max-width:908px;margin:16px auto;display:flex;gap:16px;padding:0 16px}';
css+='.sf-sidebar{width:360px;flex-shrink:0}';
css+='.sf-feed{flex:1;min-width:0}';
css+='.sf-card{background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,0.1);margin-bottom:16px;overflow:hidden}';
css+='.sf-card-title{padding:16px;font-size:20px;font-weight:700;color:#050505;border-bottom:1px solid #f0f2f5}';
css+='.sf-intro-item{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:15px;color:#050505}';
css+='.sf-intro-item svg{width:20px;height:20px;color:#65676b}';
css+='.sf-intro-btn{display:block;width:calc(100% - 32px);margin:8px 16px 16px;padding:8px 12px;background:#e4e6eb;border:none;border-radius:6px;font-weight:600;font-size:15px;color:#050505;cursor:pointer;text-align:center}';
css+='.sf-intro-btn:hover{background:#d8dadf}';
css+='.sf-composer{padding:12px 16px}';
css+='.sf-composer-row{display:flex;gap:8px;align-items:center}';
css+='.sf-composer-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}';
css+='.sf-composer-av img{width:100%;height:100%;object-fit:cover}';
css+='.sf-composer-input{flex:1;background:#f0f2f5;border:none;border-radius:20px;padding:8px 16px;font-size:17px;color:#65676b;cursor:pointer;text-align:left}';
css+='.sf-composer-input:hover{background:#e4e6eb}';
css+='.sf-composer-btns{display:flex;border-top:1px solid #e4e6eb;margin-top:12px;padding-top:8px}';
css+='.sf-composer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border:none;background:none;border-radius:8px;font-size:14px;font-weight:600;color:#65676b;cursor:pointer}';
css+='.sf-composer-btn:hover{background:#f0f2f5}';
css+='.sf-composer-btn svg{width:24px;height:24px}';
css+='.sf-post{border-top:8px solid #f0f2f5}';
css+='.sf-post:first-child{border-top:none}';
css+='.sf-post-head{display:flex;gap:8px;padding:12px 16px}';
css+='.sf-post-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}';
css+='.sf-post-av img{width:100%;height:100%;object-fit:cover}';
css+='.sf-post-meta{flex:1}';
css+='.sf-post-name{font-weight:600;font-size:15px;color:#050505}';
css+='.sf-post-time{font-size:13px;color:#65676b}';
css+='.sf-post-del{width:32px;height:32px;border-radius:50%;background:none;border:none;cursor:pointer;font-size:18px;color:#65676b}';
css+='.sf-post-del:hover{background:#f0f2f5}';
css+='.sf-post-text{padding:0 16px 12px;font-size:15px;line-height:1.4;color:#050505}';
css+='.sf-post-img{width:100%}';
css+='.sf-post-img img{width:100%;display:block}';
css+='.sf-post-stats{display:flex;justify-content:space-between;padding:10px 16px;font-size:15px;color:#65676b}';
css+='.sf-post-stats span{cursor:pointer}';
css+='.sf-post-stats span:hover{text-decoration:underline}';
css+='.sf-post-bar{display:flex;border-top:1px solid #e4e6eb;margin:0 16px;padding:4px 0}';
css+='.sf-post-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:none;background:none;border-radius:4px;font-size:15px;font-weight:600;color:#65676b;cursor:pointer}';
css+='.sf-post-act:hover{background:#f0f2f5}';
css+='.sf-post-act.liked{color:#1877f2}';
css+='.sf-post-act svg{width:20px;height:20px}';
css+='.sf-comments{padding:8px 16px;display:none}';
css+='.sf-comments.show{display:block}';
css+='.sf-cmt{display:flex;gap:8px;margin-bottom:8px}';
css+='.sf-cmt-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}';
css+='.sf-cmt-av img{width:100%;height:100%;object-fit:cover}';
css+='.sf-cmt-bubble{background:#f0f2f5;padding:8px 12px;border-radius:18px;max-width:calc(100% - 48px)}';
css+='.sf-cmt-name{font-weight:600;font-size:13px;color:#050505}';
css+='.sf-cmt-text{font-size:15px;color:#050505}';
css+='.sf-cmt-form{display:flex;gap:8px;padding:8px 16px;border-top:1px solid #e4e6eb}';
css+='.sf-cmt-input{flex:1;background:#f0f2f5;border:none;border-radius:20px;padding:8px 12px;font-size:15px;outline:none}';
css+='.sf-empty{padding:48px 24px;text-align:center}';
css+='.sf-empty svg{width:64px;height:64px;color:#bcc0c4;margin-bottom:16px}';
css+='.sf-empty-title{font-size:20px;font-weight:700;color:#050505;margin-bottom:8px}';
css+='.sf-empty-text{font-size:15px;color:#65676b}';
css+='.sf-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.9);z-index:9999;align-items:center;justify-content:center}';
css+='.sf-modal.open{display:flex}';
css+='.sf-modal-box{background:#fff;border-radius:8px;box-shadow:0 2px 20px rgba(0,0,0,0.2);width:500px;max-width:95vw;max-height:90vh;overflow:auto}';
css+='.sf-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e4e6eb}';
css+='.sf-modal-title{font-size:20px;font-weight:700;margin:0}';
css+='.sf-modal-x{width:36px;height:36px;border-radius:50%;background:#e4e6eb;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}';
css+='.sf-modal-x:hover{background:#d8dadf}';
css+='.sf-modal-body{padding:16px}';
css+='.sf-textarea{width:100%;min-height:100px;border:none;font-size:18px;resize:none;outline:none;font-family:inherit}';
css+='.sf-modal-foot{padding:16px;border-top:1px solid #e4e6eb}';
css+='.sf-modal-submit{width:100%;padding:10px;background:#1877f2;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer}';
css+='.sf-modal-submit:disabled{background:#e4e6eb;color:#bcc0c4;cursor:not-allowed}';
css+='.sf-modal-submit:not(:disabled):hover{background:#166fe5}';
css+='.sf-upload{border:1px solid #e4e6eb;border-radius:8px;padding:24px;text-align:center;cursor:pointer;margin-top:12px;background:#f7f8fa}';
css+='.sf-upload:hover{background:#ebedf0}';
css+='.sf-upload input{display:none}';
css+='.sf-upload-icon{font-size:32px;margin-bottom:8px}';
css+='.sf-upload-text{font-weight:600;color:#050505}';
css+='.sf-preview{width:100%;border-radius:8px;margin-top:12px;display:none}';
css+='.sf-preview.show{display:block}';
css+='.sf-field{margin-bottom:16px}';
css+='.sf-field label{display:block;font-weight:600;margin-bottom:8px;color:#050505}';
css+='.sf-field input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:15px}';
css+='.sf-field input:focus{outline:none;border-color:#1877f2}';
css+='@media(max-width:900px){.sf-sidebar{display:none}.sf-main{padding:0 8px}.sf-header{flex-direction:column;align-items:center;text-align:center;padding:0 16px 16px}.sf-pic{width:128px;height:128px}.sf-actions{margin:16px 0 0}}';
$("<style>").text(css).appendTo("head");
var svgIcons={
camera:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 15.2a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4z"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>',
home:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>',
pin:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>',
video:'<svg viewBox="0 0 24 24" fill="#f3425f"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>',
photo:'<svg viewBox="0 0 24 24" fill="#45bd62"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
smile:'<svg viewBox="0 0 24 24" fill="#f7b928"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>',
like:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>',
comment:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/></svg>',
share:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>',
images:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/></svg>'
};
var h='<div class="sf-cover-section"><div class="sf-cover-wrap">';
h+='<div class="sf-cover" id="cover-area">'+(ud.cover?'<img src="'+esc(ud.cover)+'">':'')+'<button class="sf-cover-btn" id="edit-cover">'+svgIcons.camera+' Edit cover photo</button></div>';
h+='<div class="sf-header">';
h+='<div class="sf-pic-wrap"><div class="sf-pic" id="profile-pic">'+av(ud.photo,user,64)+'</div><button class="sf-cam-btn" id="edit-pic">'+svgIcons.camera+'</button></div>';
h+='<div class="sf-info"><h1 class="sf-name">'+esc(user.replace(/_/g," "))+'</h1><div class="sf-stats"><span id="follower-count">0</span> followers · <span id="following-count">0</span> following</div></div>';
h+='<div class="sf-actions"><button class="sf-btn sf-btn-primary" id="edit-profile-btn">Edit profile</button></div>';
h+='</div>';
h+='<div class="sf-nav"><div class="sf-tabs">';
h+='<a class="sf-tab active" href="#">Posts</a>';
h+='<a class="sf-tab" href="#">About</a>';
h+='<a class="sf-tab" href="#">Friends</a>';
h+='<a class="sf-tab" href="#">Photos</a>';
h+='<a class="sf-tab" href="#">Videos</a>';
h+='<a class="sf-tab" href="#">More</a>';
h+='</div></div>';
h+='</div></div>';
h+='<div class="sf-main">';
h+='<div class="sf-sidebar">';
h+='<div class="sf-card"><div class="sf-card-title">Intro</div>';
h+='<div id="intro-bio"></div>';
h+='<button class="sf-intro-btn" id="add-bio">'+(ud.bio?'Edit bio':'Add bio')+'</button>';
h+='<div class="sf-intro-item">'+svgIcons.home+'<span>Lives in <strong>'+(ud.location||'Add hometown')+'</strong></span></div>';
h+='<div class="sf-intro-item">'+svgIcons.pin+'<span>From <strong>Earth</strong></span></div>';
h+='<button class="sf-intro-btn" id="edit-details">Edit details</button>';
h+='</div></div>';
h+='<div class="sf-feed">';
h+='<div class="sf-card">';
h+='<div class="sf-composer">';
h+='<div class="sf-composer-row"><div class="sf-composer-av">'+av(ud.photo,user,16)+'</div>';
h+='<button class="sf-composer-input" id="open-composer">What\'s on your mind, '+esc(user.split(/[\s_]/)[0])+'?</button></div>';
h+='<div class="sf-composer-btns">';
h+='<button class="sf-composer-btn">'+svgIcons.video+' Live video</button>';
h+='<button class="sf-composer-btn" id="quick-photo">'+svgIcons.photo+' Photo/video</button>';
h+='<button class="sf-composer-btn">'+svgIcons.smile+' Feeling/activity</button>';
h+='</div></div></div>';
h+='<div id="feed"></div>';
h+='</div></div>';
h+='<div class="sf-modal" id="composer-modal"><div class="sf-modal-box">';
h+='<div class="sf-modal-head"><h2 class="sf-modal-title">Create post</h2><button class="sf-modal-x" data-close="composer-modal">×</button></div>';
h+='<div class="sf-modal-body">';
h+='<div style="display:flex;gap:12px;margin-bottom:16px"><div class="sf-composer-av">'+av(ud.photo,user,16)+'</div><div><strong>'+esc(user)+'</strong><div style="font-size:12px;color:#65676b">Public</div></div></div>';
h+='<textarea class="sf-textarea" id="post-text" placeholder="What\'s on your mind?"></textarea>';
h+='<img class="sf-preview" id="modal-preview">';
h+='<div class="sf-upload" id="modal-upload"><input type="file" accept="image/*"><div class="sf-upload-icon">'+svgIcons.images+'</div><div class="sf-upload-text">Add photos/videos</div></div>';
h+='</div>';
h+='<div class="sf-modal-foot"><button class="sf-modal-submit" id="submit-post" disabled>Post</button></div>';
h+='</div></div>';
h+='<div class="sf-modal" id="profile-modal"><div class="sf-modal-box">';
h+='<div class="sf-modal-head"><h2 class="sf-modal-title">Edit profile</h2><button class="sf-modal-x" data-close="profile-modal">×</button></div>';
h+='<div class="sf-modal-body">';
h+='<div class="sf-field"><label>Bio</label><textarea class="sf-textarea" id="bio-input" style="font-size:15px;min-height:60px" placeholder="Write something about yourself...">'+esc(ud.bio)+'</textarea></div>';
h+='<div class="sf-field"><label>Current city</label><input type="text" id="location-input" value="'+esc(ud.location)+'" placeholder="Where do you live?"></div>';
h+='<div class="sf-field"><label>Profile photo</label><div class="sf-upload" id="pic-upload" style="padding:16px"><input type="file" accept="image/*"><span>Click to upload</span></div><img class="sf-preview" id="pic-preview"></div>';
h+='<div class="sf-field"><label>Cover photo</label><div class="sf-upload" id="cover-upload" style="padding:16px"><input type="file" accept="image/*"><span>Click to upload</span></div><img class="sf-preview" id="cover-preview"></div>';
h+='</div>';
h+='<div class="sf-modal-foot"><button class="sf-modal-submit" id="save-profile">Save changes</button></div>';
h+='</div></div>';
$("#social-app").html(h);
if(ud.bio)$("#intro-bio").html('<div style="text-align:center;padding:12px 16px;color:#050505">'+esc(ud.bio)+'</div>');
var $app=$("#social-app");
$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);});
$app.on("click",".sf-tab",function(e){e.preventDefault();$(".sf-tab").removeClass("active");$(this).addClass("active");});
var postFile=null;
$("#open-composer,#quick-photo").on("click",function(){om("composer-modal");});
$("#modal-upload").on("click",function(){$(this).find("input").click();});
$("#modal-upload input").on("change",function(){if(this.files[0]){postFile=this.files[0];var r=new FileReader();r.onload=function(e){$("#modal-preview").attr("src",e.target.result).addClass("show");updPost();};r.readAsDataURL(this.files[0]);}});
$("#post-text").on("input",updPost);
function updPost(){$("#submit-post").prop("disabled",!$("#post-text").val().trim()&&!postFile&&!$("#modal-preview").hasClass("show"));}
$("#submit-post").on("click",function(){
var t=$("#post-text").val().trim();
if(!t&&!postFile)return;
var $b=$(this).prop("disabled",true).text("Posting...");
function doPost(imgUrl){
var p={action:"socialfeed",sfaction:"createpost",content:t||"(photo)"};
if(imgUrl)p.image_url=imgUrl;
api.postWithToken("csrf",p).then(function(){
cm("composer-modal");$("#post-text").val("");postFile=null;$("#modal-preview").removeClass("show").attr("src","");$b.prop("disabled",true).text("Post");loadFeed();
});
}
if(postFile){upload(postFile,"Post",function(){}).then(doPost);}else{doPost();}
});
var picFile=null,coverFile=null;
$("#edit-profile-btn,#edit-pic,#edit-cover,#add-bio,#edit-details").on("click",function(){om("profile-modal");});
$("#pic-upload").on("click",function(){$(this).find("input").click();});
$("#pic-upload input").on("change",function(){if(this.files[0]){picFile=this.files[0];var r=new FileReader();r.onload=function(e){$("#pic-preview").attr("src",e.target.result).addClass("show");};r.readAsDataURL(this.files[0]);}});
$("#cover-upload").on("click",function(){$(this).find("input").click();});
$("#cover-upload input").on("change",function(){if(this.files[0]){coverFile=this.files[0];var r=new FileReader();r.onload=function(e){$("#cover-preview").attr("src",e.target.result).addClass("show");};r.readAsDataURL(this.files[0]);}});
$("#save-profile").on("click",function(){
var $b=$(this).prop("disabled",true).text("Saving...");
ud.bio=$("#bio-input").val().trim();
ud.location=$("#location-input").val().trim();
localStorage.setItem("sf_bio_"+user,ud.bio);
localStorage.setItem("sf_location_"+user,ud.location);
var saves=[];
if(picFile)saves.push(upload(picFile,"Pic",function(){}).then(function(u){ud.photo=u;localStorage.setItem("sf_photo_"+user,u);}));
if(coverFile)saves.push(upload(coverFile,"Cover",function(){}).then(function(u){ud.cover=u;localStorage.setItem("sf_cover_"+user,u);}));
$.when.apply($,saves).then(function(){
if(ud.photo){$("#profile-pic").html(av(ud.photo,user,64));$(".sf-composer-av").html(av(ud.photo,user,16));}
if(ud.cover)$("#cover-area").html('<img src="'+ud.cover+'"><button class="sf-cover-btn" id="edit-cover">'+svgIcons.camera+' Edit cover photo</button>');
$("#intro-bio").html(ud.bio?'<div style="text-align:center;padding:12px 16px;color:#050505">'+esc(ud.bio)+'</div>':'');
$("#add-bio").text(ud.bio?'Edit bio':'Add bio');
$(".sf-intro-item").eq(0).find("strong").text(ud.location||'Add hometown');
cm("profile-modal");$b.prop("disabled",false).text("Save changes");picFile=null;coverFile=null;
$("#pic-preview,#cover-preview").removeClass("show").attr("src","");
});
});
$app.on("click",".sf-post-act[data-like]",function(){api.postWithToken("csrf",{action:"socialfeed",sfaction:"react",post_id:$(this).data("like"),reaction_type:"like"}).then(loadFeed);});
$app.on("click",".sf-post-del[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-view-comments",function(){var id=$(this).data("id");$("#comments-"+id).toggleClass("show");if($("#comments-"+id).hasClass("show"))loadComments(id);});
$app.on("keypress",".sf-cmt-input",function(e){if(e.which===13){var $i=$(this),t=$i.val().trim(),id=$i.data("id");if(t){$i.val("");api.postWithToken("csrf",{action:"socialfeed",sfaction:"comment",post_id:id,content:t}).then(function(){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 sf-empty">'+svgIcons.images+'<div class="sf-empty-title">No posts yet</div><div class="sf-empty-text">When you share photos, they will appear here.</div></div>');
return;
}
$("#follower-count").text(posts.length);
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=p.image_url?'<div class="sf-post-img"><img src="'+esc(p.image_url)+'"></div>':"";
var del=p.username===user?'<button class="sf-post-del" data-del="'+p.id+'" title="Delete">×</button>':"";
var liked=p.user_reaction==="like"?" liked":"";
var out='<div class="sf-card sf-post">';
out+='<div class="sf-post-head"><div class="sf-post-av">'+av(pic,p.username,16)+'</div><div class="sf-post-meta"><div class="sf-post-name">'+esc(p.username)+'</div><div class="sf-post-time">'+ago(p.created)+'</div></div>'+del+'</div>';
if(p.content&&p.content!=="(photo)")out+='<div class="sf-post-text">'+esc(p.content)+'</div>';
out+=media;
out+='<div class="sf-post-stats"><span>'+likes+' likes</span><span class="sf-view-comments" data-id="'+p.id+'">'+p.comments+' comments</span></div>';
out+='<div class="sf-post-bar"><button class="sf-post-act'+liked+'" data-like="'+p.id+'">'+svgIcons.like+' Like</button><button class="sf-post-act sf-view-comments" data-id="'+p.id+'">'+svgIcons.comment+' Comment</button><button class="sf-post-act">'+svgIcons.share+' Share</button></div>';
out+='<div class="sf-comments" id="comments-'+p.id+'"></div>';
out+='<div class="sf-cmt-form"><div class="sf-cmt-av">'+av(ud.photo,user,12)+'</div><input class="sf-cmt-input" data-id="'+p.id+'" placeholder="Write a comment..."></div>';
out+='</div>';
return out;
}).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-cmt"><div class="sf-cmt-av">'+av(pic,c.username,12)+'</div><div class="sf-cmt-bubble"><div class="sf-cmt-name">'+esc(c.username)+'</div><div class="sf-cmt-text">'+esc(c.content)+'</div></div></div>';
}).join("");
$("#comments-"+id).html(h||'<div style="padding:8px;color:#65676b">No comments yet</div>');
});
}
loadFeed();
});
}