User:Docmoates/common.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 - Clean Instagram-style social page */
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)||"",name:localStorage.getItem("sf_name_"+user)||user};
var pp={image:"",video:"",location:""},uf={};
function gi(n){return(n||"?").split(/[\s_]+/).map(function(w){return(w[0]||"").toUpperCase();}).join("").substring(0,2)||"?";}
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(pic,name,sz){if(pic)return'<img src="'+esc(pic)+'">';var c=sz==="s"?"sa-comment-avatar-placeholder":sz==="p"?"sa-post-avatar-placeholder":sz==="c"?"sa-composer-avatar-placeholder":"sa-profile-pic-placeholder";return'<div class="'+c+'">'+gi(name)+'</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 ext=file.name.split(".").pop()||"jpg",fn=pre+"_"+user+"_"+Date.now()+"."+ext,fd=new FormData();fd.append("action","upload");fd.append("filename",fn);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(r.error?r.error.info:"Upload failed");});}
var css='\
.wikiboxes-corner-button,.wikibox-design-button,#wikiboxes-corner-button{display:none!important}\
#social-app{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#fafafa;min-height:100vh;padding:0 0 60px}\
#social-app *{box-sizing:border-box;margin:0;padding:0}\
.sa-header{background:#fff;border-bottom:1px solid #dbdbdb;padding:30px 0}\
.sa-profile-row{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:80px;padding:0 40px}\
.sa-profile-pic{width:150px;height:150px;border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;border:3px solid #fff;box-shadow:0 0 0 1px #dbdbdb}\
.sa-profile-pic img{width:100%;height:100%;object-fit:cover}\
.sa-profile-pic-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px;font-weight:600}\
.sa-profile-right{flex:1}\
.sa-name-row{display:flex;align-items:center;gap:20px;margin-bottom:20px}\
.sa-username{font-size:28px;font-weight:300;color:#262626}\
.sa-edit-btn{background:#efefef;color:#262626;border:none;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}\
.sa-edit-btn:hover{background:#dbdbdb}\
.sa-stats{display:flex;gap:40px;margin-bottom:20px}\
.sa-stat span:first-child{font-weight:600}\
.sa-stat{font-size:16px;color:#262626}\
.sa-bio{line-height:1.5;color:#262626;font-size:14px}\
.sa-bio strong{font-weight:600}\
.sa-main{max-width:600px;margin:24px auto 0;padding:0 16px}\
.sa-stories{display:flex;gap:16px;margin-bottom:24px;padding:16px 0;overflow-x:auto}\
.sa-story{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}\
.sa-story-ring{width:66px;height:66px;border-radius:50%;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px}\
.sa-story-ring.add{background:#dbdbdb}\
.sa-story-inner{width:100%;height:100%;border-radius:50%;background:#fafafa;border:2px solid #fff;display:flex;align-items:center;justify-content:center;overflow:hidden}\
.sa-story-inner img{width:100%;height:100%;object-fit:cover}\
.sa-story-add{font-size:24px;color:#0095f6}\
.sa-story-name{font-size:12px;color:#8e8e8e}\
.sa-story-inner-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}\
.sa-composer{background:#fff;border:1px solid #dbdbdb;border-radius:8px;margin-bottom:24px}\
.sa-composer-top{display:flex;gap:12px;padding:16px}\
.sa-composer-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0}\
.sa-composer-avatar img{width:100%;height:100%;object-fit:cover}\
.sa-composer-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}\
.sa-composer-input{flex:1;border:none;resize:none;font-size:14px;outline:none;font-family:inherit;min-height:60px}\
.sa-composer-input::placeholder{color:#8e8e8e}\
.sa-composer-preview{padding:0 16px 16px;display:none}\
.sa-composer-preview.show{display:block}\
.sa-composer-preview-inner{position:relative;display:inline-block}\
.sa-composer-preview img{max-width:100%;max-height:200px;border-radius:8px}\
.sa-composer-preview-remove{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;cursor:pointer;font-size:14px}\
.sa-composer-location{padding:0 16px 12px;font-size:13px;color:#0095f6;display:none;align-items:center;gap:6px}\
.sa-composer-location.show{display:flex}\
.sa-composer-location button{background:none;border:none;cursor:pointer;font-size:12px;color:#8e8e8e}\
.sa-composer-actions{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid #efefef}\
.sa-composer-buttons{display:flex;gap:4px}\
.sa-icon-btn{width:36px;height:36px;border:none;background:none;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}\
.sa-icon-btn:hover{background:#f0f0f0}\
.sa-icon-btn svg{width:20px;height:20px;fill:#262626}\
.sa-post-btn{background:#0095f6;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}\
.sa-post-btn:disabled{opacity:0.3;cursor:default}\
.sa-post-btn:not(:disabled):hover{background:#1877f2}\
.sa-feed{display:flex;flex-direction:column;gap:16px}\
.sa-post{background:#fff;border:1px solid #dbdbdb;border-radius:8px}\
.sa-post-header{display:flex;align-items:center;gap:10px;padding:14px}\
.sa-post-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden}\
.sa-post-avatar img{width:100%;height:100%;object-fit:cover}\
.sa-post-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600}\
.sa-post-user{flex:1}\
.sa-post-username{font-weight:600;font-size:14px;color:#262626}\
.sa-post-meta{font-size:12px;color:#8e8e8e}\
.sa-post-menu{background:none;border:none;cursor:pointer;font-size:16px;color:#8e8e8e;padding:4px}\
.sa-post-content{padding:0 14px 12px;font-size:14px;line-height:1.4;color:#262626;white-space:pre-wrap}\
.sa-post-location{padding:0 14px 8px;font-size:12px;color:#00376b}\
.sa-post-media img{width:100%;max-height:500px;object-fit:contain;background:#fafafa}\
.sa-post-media video{width:100%;max-height:500px}\
.sa-post-media iframe{width:100%;height:350px;border:none}\
.sa-post-actions{display:flex;gap:16px;padding:10px 14px}\
.sa-post-action{background:none;border:none;cursor:pointer;font-size:22px;padding:0}\
.sa-post-action:hover{opacity:0.6}\
.sa-post-action.liked{color:#ed4956}\
.sa-post-likes{padding:0 14px 6px;font-weight:600;font-size:14px}\
.sa-post-comments-count{padding:0 14px 6px;font-size:14px;color:#8e8e8e;cursor:pointer}\
.sa-post-time{padding:0 14px 10px;font-size:10px;color:#8e8e8e;text-transform:uppercase}\
.sa-post-comment-form{display:flex;gap:12px;padding:10px 14px;border-top:1px solid #efefef;align-items:center}\
.sa-post-comment-input{flex:1;border:none;font-size:14px;outline:none}\
.sa-post-comment-input::placeholder{color:#8e8e8e}\
.sa-post-comment-submit{background:none;border:none;color:#0095f6;font-weight:600;cursor:pointer;font-size:14px}\
.sa-post-comment-submit:disabled{opacity:0.3}\
.sa-comments-section{display:none;padding:0 14px 12px;max-height:200px;overflow-y:auto}\
.sa-comments-section.show{display:block}\
.sa-comment{display:flex;gap:10px;margin-bottom:10px}\
.sa-comment-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0}\
.sa-comment-avatar img{width:100%;height:100%;object-fit:cover}\
.sa-comment-avatar-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600}\
.sa-comment-text{font-size:14px;line-height:1.3}\
.sa-comment-text strong{font-weight:600}\
.sa-comment-time{font-size:11px;color:#8e8e8e;margin-top:2px}\
.sa-empty{text-align:center;padding:60px 20px;background:#fff;border:1px solid #dbdbdb;border-radius:8px}\
.sa-empty-icon{font-size:48px;margin-bottom:12px}\
.sa-empty-title{font-size:22px;font-weight:300;margin-bottom:8px}\
.sa-empty-text{color:#8e8e8e;font-size:14px}\
.sa-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65);z-index:1000;align-items:center;justify-content:center;padding:20px}\
.sa-modal.open{display:flex}\
.sa-modal-content{background:#fff;border-radius:12px;width:100%;max-width:400px;max-height:90vh;overflow:auto}\
.sa-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #dbdbdb}\
.sa-modal-title{font-weight:600;font-size:16px}\
.sa-modal-close{background:none;border:none;font-size:24px;cursor:pointer;line-height:1}\
.sa-modal-body{padding:16px}\
.sa-tabs{display:flex;border-bottom:1px solid #dbdbdb}\
.sa-tab{flex:1;padding:14px;text-align:center;cursor:pointer;font-weight:600;color:#8e8e8e;border-bottom:1px solid transparent;margin-bottom:-1px}\
.sa-tab.active{color:#262626;border-bottom-color:#262626}\
.sa-tab-panel{display:none;padding:16px}\
.sa-tab-panel.active{display:block}\
.sa-upload-zone{border:2px dashed #dbdbdb;border-radius:8px;padding:32px;text-align:center;cursor:pointer}\
.sa-upload-zone:hover{border-color:#0095f6;background:#fafafa}\
.sa-upload-zone input{display:none}\
.sa-upload-icon{font-size:40px;margin-bottom:12px}\
.sa-upload-text{color:#8e8e8e;font-size:14px}\
.sa-upload-text span{color:#0095f6;font-weight:600}\
.sa-input{width:100%;padding:12px;border:1px solid #dbdbdb;border-radius:6px;font-size:14px;margin-bottom:12px;outline:none}\
.sa-input:focus{border-color:#262626}\
.sa-textarea{width:100%;padding:12px;border:1px solid #dbdbdb;border-radius:6px;font-size:14px;margin-bottom:12px;outline:none;resize:vertical;min-height:80px;font-family:inherit}\
.sa-textarea:focus{border-color:#262626}\
.sa-preview-img{width:100%;max-height:150px;object-fit:contain;border-radius:6px;margin-top:12px;display:none}\
.sa-preview-img.show{display:block}\
.sa-progress{height:3px;background:#dbdbdb;border-radius:2px;margin-top:12px;overflow:hidden;display:none}\
.sa-progress.show{display:block}\
.sa-progress-bar{height:100%;background:#0095f6;width:0;transition:width 0.3s}\
.sa-btn-row{display:flex;gap:8px;margin-top:16px}\
.sa-btn{flex:1;padding:12px;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer}\
.sa-btn-primary{background:#0095f6;color:#fff}\
.sa-btn-primary:hover{background:#1877f2}\
.sa-btn-secondary{background:#efefef;color:#262626}\
.sa-btn-secondary:hover{background:#dbdbdb}\
.sa-story-viewer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#1a1a1a;z-index:2000;align-items:center;justify-content:center}\
.sa-story-viewer.open{display:flex}\
.sa-story-viewer-content{position:relative;max-width:400px;width:100%}\
.sa-story-viewer-progress{position:absolute;top:16px;left:16px;right:16px;height:2px;background:rgba(255,255,255,0.3);border-radius:1px}\
.sa-story-viewer-progress-bar{height:100%;background:#fff;width:0}\
.sa-story-viewer-header{position:absolute;top:24px;left:16px;display:flex;align-items:center;gap:10px;color:#fff}\
.sa-story-viewer-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid #fff}\
.sa-story-viewer-avatar img{width:100%;height:100%;object-fit:cover}\
.sa-story-viewer-name{font-weight:600;font-size:14px}\
.sa-story-viewer-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer}\
.sa-story-viewer img{max-width:100%;max-height:80vh;border-radius:8px}\
@media(max-width:600px){\
.sa-profile-row{flex-direction:column;gap:20px;padding:0 20px;text-align:center}\
.sa-profile-pic{width:80px;height:80px}\
.sa-name-row{justify-content:center}\
.sa-stats{justify-content:center}\
.sa-profile-pic-placeholder{font-size:28px}\
}';
$("<style>").text(css).appendTo("head");
// SVG icons
var icons={
photo:'<svg viewBox="0 0 24 24"><path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z"/></svg>',
video:'<svg viewBox="0 0 24 24"><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>',
location:'<svg viewBox="0 0 24 24"><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>',
emoji:'<svg viewBox="0 0 24 24"><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>'
};
var h='<div class="sa-header"><div class="sa-profile-row">';
h+='<div class="sa-profile-pic" id="profile-pic">'+av(ud.photo,user,"")+'</div>';
h+='<div class="sa-profile-right">';
h+='<div class="sa-name-row"><span class="sa-username" id="display-name">'+esc(ud.name)+'</span><button class="sa-edit-btn" id="edit-profile-btn">Edit profile</button></div>';
h+='<div class="sa-stats"><div class="sa-stat"><span id="post-count">0</span> posts</div><div class="sa-stat"><span>0</span> followers</div><div class="sa-stat"><span>0</span> following</div></div>';
h+='<div class="sa-bio" id="bio-display">'+(ud.bio?'<strong>'+esc(ud.name)+'</strong><br>'+esc(ud.bio).replace(/\n/g,"<br>"):"Click Edit profile to add a bio")+'</div>';
h+='</div></div></div>';
h+='<div class="sa-main">';
h+='<div class="sa-stories" id="stories-container"></div>';
h+='<div class="sa-composer">';
h+='<div class="sa-composer-top"><div class="sa-composer-avatar" id="composer-avatar">'+av(ud.photo,user,"c")+'</div><textarea class="sa-composer-input" id="post-input" placeholder="What\'s on your mind?"></textarea></div>';
h+='<div class="sa-composer-preview" id="post-preview"><div class="sa-composer-preview-inner"><button class="sa-composer-preview-remove" id="remove-media">×</button></div></div>';
h+='<div class="sa-composer-location" id="post-location"><span></span><button id="remove-location">×</button></div>';
h+='<div class="sa-composer-actions"><div class="sa-composer-buttons"><button class="sa-icon-btn" id="btn-add-photo" title="Add photo">'+icons.photo+'</button><button class="sa-icon-btn" id="btn-add-video" title="Add video">'+icons.video+'</button><button class="sa-icon-btn" id="btn-add-location" title="Add location">'+icons.location+'</button><button class="sa-icon-btn" id="btn-add-emoji" title="Add emoji">'+icons.emoji+'</button></div><button class="sa-post-btn" id="btn-submit-post" disabled>Post</button></div>';
h+='</div>';
h+='<div class="sa-feed" id="feed-container"></div>';
h+='</div>';
// Modals
h+='<div class="sa-modal" id="modal-edit-profile"><div class="sa-modal-content"><div class="sa-modal-header"><span class="sa-modal-title">Edit profile</span><button class="sa-modal-close" data-close="modal-edit-profile">×</button></div><div class="sa-modal-body"><label style="font-weight:600;display:block;margin-bottom:8px;font-size:14px">Name</label><input class="sa-input" id="input-display-name" value="'+esc(ud.name)+'"><label style="font-weight:600;display:block;margin-bottom:8px;font-size:14px">Bio</label><textarea class="sa-textarea" id="input-bio" placeholder="Tell people about yourself...">'+esc(ud.bio)+'</textarea><div class="sa-btn-row"><button class="sa-btn sa-btn-secondary" data-close="modal-edit-profile">Cancel</button><button class="sa-btn sa-btn-primary" id="save-profile">Save</button></div></div></div></div>';
h+='<div class="sa-modal" id="modal-profile-pic"><div class="sa-modal-content"><div class="sa-modal-header"><span class="sa-modal-title">Change photo</span><button class="sa-modal-close" data-close="modal-profile-pic">×</button></div><div class="sa-tabs"><div class="sa-tab active" data-panel="panel-pic-upload">Upload</div><div class="sa-tab" data-panel="panel-pic-url">URL</div></div><div class="sa-tab-panel active" id="panel-pic-upload"><div class="sa-upload-zone" id="zone-profile-pic"><input type="file" accept="image/*"><div class="sa-upload-icon">📷</div><div class="sa-upload-text">Click or drag to upload</div></div><div class="sa-progress" id="progress-profile-pic"><div class="sa-progress-bar"></div></div><img class="sa-preview-img" id="preview-profile-pic"></div><div class="sa-tab-panel" id="panel-pic-url"><input class="sa-input" id="input-pic-url" placeholder="Paste image URL..."><img class="sa-preview-img" id="preview-pic-url"></div><div class="sa-btn-row" style="padding:0 16px 16px"><button class="sa-btn sa-btn-secondary" data-close="modal-profile-pic">Cancel</button><button class="sa-btn sa-btn-primary" id="save-profile-pic">Save</button></div></div></div>';
h+='<div class="sa-modal" id="modal-photo"><div class="sa-modal-content"><div class="sa-modal-header"><span class="sa-modal-title">Add photo</span><button class="sa-modal-close" data-close="modal-photo">×</button></div><div class="sa-tabs"><div class="sa-tab active" data-panel="panel-photo-upload">Upload</div><div class="sa-tab" data-panel="panel-photo-url">URL</div></div><div class="sa-tab-panel active" id="panel-photo-upload"><div class="sa-upload-zone" id="zone-photo"><input type="file" accept="image/*"><div class="sa-upload-icon">📷</div><div class="sa-upload-text">Click or drag to upload</div></div><div class="sa-progress" id="progress-photo"><div class="sa-progress-bar"></div></div><img class="sa-preview-img" id="preview-photo"></div><div class="sa-tab-panel" id="panel-photo-url"><input class="sa-input" id="input-photo-url" placeholder="Paste image URL..."><img class="sa-preview-img" id="preview-photo-url"></div><div class="sa-btn-row" style="padding:0 16px 16px"><button class="sa-btn sa-btn-secondary" data-close="modal-photo">Cancel</button><button class="sa-btn sa-btn-primary" id="add-photo">Add</button></div></div></div>';
h+='<div class="sa-modal" id="modal-story"><div class="sa-modal-content"><div class="sa-modal-header"><span class="sa-modal-title">Add to story</span><button class="sa-modal-close" data-close="modal-story">×</button></div><div class="sa-tabs"><div class="sa-tab active" data-panel="panel-story-upload">Upload</div><div class="sa-tab" data-panel="panel-story-url">URL</div></div><div class="sa-tab-panel active" id="panel-story-upload"><div class="sa-upload-zone" id="zone-story"><input type="file" accept="image/*"><div class="sa-upload-icon">📷</div><div class="sa-upload-text">Click or drag to upload</div></div><div class="sa-progress" id="progress-story"><div class="sa-progress-bar"></div></div><img class="sa-preview-img" id="preview-story"></div><div class="sa-tab-panel" id="panel-story-url"><input class="sa-input" id="input-story-url" placeholder="Paste image URL..."><img class="sa-preview-img" id="preview-story-url"></div><div class="sa-btn-row" style="padding:0 16px 16px"><button class="sa-btn sa-btn-secondary" data-close="modal-story">Cancel</button><button class="sa-btn sa-btn-primary" id="add-story">Share</button></div></div></div>';
h+='<div class="sa-story-viewer" id="story-viewer"><div class="sa-story-viewer-content"><div class="sa-story-viewer-progress"><div class="sa-story-viewer-progress-bar" id="sv-prog"></div></div><button class="sa-story-viewer-close" id="close-story-viewer">×</button><div class="sa-story-viewer-header"><div class="sa-story-viewer-avatar" id="story-viewer-avatar"></div><div class="sa-story-viewer-name" id="story-viewer-name"></div></div><img id="story-viewer-image" src=""></div></div>';
$("#social-app").html(h);
var $a=$("#social-app");
// Events
$a.on("click","[data-close]",function(){cm($(this).data("close"));});
$a.on("click",".sa-modal",function(e){if($(e.target).hasClass("sa-modal"))cm(this.id);});
$a.on("click",".sa-tab",function(){var $t=$(this),$p=$("#"+$t.data("panel"));$t.addClass("active").siblings().removeClass("active");$p.addClass("active").siblings(".sa-tab-panel").removeClass("active");});
function suz(zid,pid,prid,fk){var $z=$("#"+zid),$i=$z.find("input"),$pv=$("#"+pid),$pr=$("#"+prid);$z.on("click",function(){$i.click();});$z.on("dragover",function(e){e.preventDefault();$(this).addClass("dragover");});$z.on("dragleave drop",function(){$(this).removeClass("dragover");});$z.on("drop",function(e){e.preventDefault();var f=e.originalEvent.dataTransfer.files;if(f.length)hf(f[0]);});$i.on("change",function(){if(this.files.length)hf(this.files[0]);});function hf(f){uf[fk]=f;if(f.type.startsWith("image/")){var r=new FileReader();r.onload=function(e){$pv.attr("src",e.target.result).addClass("show");};r.readAsDataURL(f);}}return{reset:function(){uf[fk]=null;$pv.removeClass("show").attr("src","");$pr.removeClass("show").find(".sa-progress-bar").css("width",0);$i.val("");},setP:function(p){$pr.addClass("show").find(".sa-progress-bar").css("width",p+"%");}};}
var upPic=suz("zone-profile-pic","preview-profile-pic","progress-profile-pic","profilePic");
var upPho=suz("zone-photo","preview-photo","progress-photo","photo");
var upSto=suz("zone-story","preview-story","progress-story","story");
$("#input-pic-url").on("input",function(){var v=$(this).val();$("#preview-pic-url").attr("src",v).toggleClass("show",!!v);});
$("#input-photo-url").on("input",function(){var v=$(this).val();$("#preview-photo-url").attr("src",v).toggleClass("show",!!v);});
$("#input-story-url").on("input",function(){var v=$(this).val();$("#preview-story-url").attr("src",v).toggleClass("show",!!v);});
$("#edit-profile-btn").on("click",function(){om("modal-edit-profile");});
$("#save-profile").on("click",function(){ud.name=$("#input-display-name").val().trim()||user;ud.bio=$("#input-bio").val().trim();localStorage.setItem("sf_name_"+user,ud.name);localStorage.setItem("sf_bio_"+user,ud.bio);$("#display-name").text(ud.name);$("#bio-display").html(ud.bio?'<strong>'+esc(ud.name)+'</strong><br>'+esc(ud.bio).replace(/\n/g,"<br>"):"Click Edit profile to add a bio");cm("modal-edit-profile");});
$("#profile-pic").on("click",function(){upPic.reset();$("#input-pic-url").val("");$("#preview-pic-url").removeClass("show");om("modal-profile-pic");});
$("#save-profile-pic").on("click",function(){var ap=$("#modal-profile-pic .sa-tab.active").data("panel");if(ap==="panel-pic-url"){var u=$("#input-pic-url").val().trim();if(u)savePic(u);else alert("Please enter a URL");}else if(uf.profilePic){upload(uf.profilePic,"ProfilePic",upPic.setP).then(savePic).fail(function(){alert("Upload error");});}else alert("Please select an image");});
function savePic(u){ud.photo=u;localStorage.setItem("sf_photo_"+user,u);$("#profile-pic").html(av(u,user,""));$("#composer-avatar").html(av(u,user,"c"));cm("modal-profile-pic");upPic.reset();}
$("#btn-add-photo").on("click",function(){upPho.reset();$("#input-photo-url").val("");$("#preview-photo-url").removeClass("show");om("modal-photo");});
$("#add-photo").on("click",function(){var ap=$("#modal-photo .sa-tab.active").data("panel");if(ap==="panel-photo-url"){var u=$("#input-photo-url").val().trim();if(u){pp.image=u;$("#post-preview").addClass("show").find(".sa-composer-preview-inner").html('<button class="sa-composer-preview-remove" id="remove-media">×</button><img src="'+u+'">');upd();cm("modal-photo");}else alert("Please enter a URL");}else if(uf.photo){upload(uf.photo,"Post",upPho.setP).then(function(u){pp.image=u;$("#post-preview").addClass("show").find(".sa-composer-preview-inner").html('<button class="sa-composer-preview-remove" id="remove-media">×</button><img src="'+u+'">');upd();cm("modal-photo");upPho.reset();}).fail(function(){alert("Upload error");});}else alert("Please select an image");});
$a.on("click","#remove-media",function(){pp.image="";pp.video="";$("#post-preview").removeClass("show");upd();});
$("#btn-add-location").on("click",function(){var l=prompt("Enter location:");if(l){pp.location=l;$("#post-location").addClass("show").find("span").text("📍 "+l);}});
$a.on("click","#remove-location",function(){pp.location="";$("#post-location").removeClass("show");});
$("#btn-add-emoji").on("click",function(){var e=prompt("Enter emoji:");if(e){var $i=$("#post-input")[0];var s=$i.selectionStart,v=$i.value;$i.value=v.slice(0,s)+e+v.slice($i.selectionEnd);$i.selectionStart=$i.selectionEnd=s+e.length;$i.focus();upd();}});
$("#post-input").on("input",upd);
function upd(){var h=$("#post-input").val().trim()||pp.image||pp.video;$("#btn-submit-post").prop("disabled",!h);}
$("#btn-submit-post").on("click",function(){var t=$("#post-input").val().trim();if(!t&&!pp.image&&!pp.video){alert("Please add some content");return;}var $b=$(this);$b.prop("disabled",true).text("Posting...");var p={action:"socialfeed",sfaction:"createpost",content:t||"(media)"};if(pp.image)p.image_url=pp.image;if(pp.video)p.video_url=pp.video;if(pp.location)p.location=pp.location;api.postWithToken("csrf",p).then(function(){$("#post-input").val("");pp={image:"",video:"",location:""};$("#post-preview").removeClass("show");$("#post-location").removeClass("show");$b.prop("disabled",true).text("Post");loadP();}).fail(function(c,d){alert("Error: "+(d&&d.error?d.error.info:c));$b.prop("disabled",false).text("Post");});});
$a.on("click","#add-story-btn",function(){upSto.reset();$("#input-story-url").val("");$("#preview-story-url").removeClass("show");om("modal-story");});
$("#add-story").on("click",function(){var ap=$("#modal-story .sa-tab.active").data("panel");function ps(u){api.postWithToken("csrf",{action:"socialfeed",sfaction:"createstory",image_url:u}).then(function(){cm("modal-story");upSto.reset();loadS();}).fail(function(c,d){alert("Error: "+(d&&d.error?d.error.info:c));});}if(ap==="panel-story-url"){var u=$("#input-story-url").val().trim();if(u)ps(u);else alert("Please enter a URL");}else if(uf.story){upload(uf.story,"Story",upSto.setP).then(ps).fail(function(){alert("Upload error");});}else alert("Please select an image");});
var sto;
$a.on("click",".sa-story[data-story-url]",function(){var u=$(this).data("story-url"),n=$(this).data("story-user"),p=localStorage.getItem("sf_photo_"+n)||"";$("#story-viewer-image").attr("src",u);$("#story-viewer-name").text(n);$("#story-viewer-avatar").html(av(p,n,"s"));$("#story-viewer").addClass("open");var $pb=$("#sv-prog");$pb.css("width","0");setTimeout(function(){$pb.css({width:"100%",transition:"width 5s linear"});},10);clearTimeout(sto);sto=setTimeout(function(){$("#story-viewer").removeClass("open");$pb.css({width:"0",transition:"none"});},5000);});
$("#close-story-viewer,#story-viewer").on("click",function(e){if(e.target.id==="close-story-viewer"||e.target.id==="story-viewer"){$("#story-viewer").removeClass("open");$("#sv-prog").css({width:"0",transition:"none"});clearTimeout(sto);}});
$a.on("click",".sa-post-action[data-like]",function(){var id=$(this).data("like");api.postWithToken("csrf",{action:"socialfeed",sfaction:"react",post_id:id,reaction_type:"like"}).then(loadP);});
$a.on("click",".sa-post-menu[data-delete]",function(){if(confirm("Delete this post?")){api.postWithToken("csrf",{action:"socialfeed",sfaction:"deletepost",post_id:$(this).data("delete")}).then(loadP);}});
$a.on("click",".sa-post-comments-count",function(){var id=$(this).data("post"),$s=$("#comments-"+id);if($s.hasClass("show"))$s.removeClass("show");else{$s.addClass("show");loadC(id);}});
$a.on("keypress",".sa-post-comment-input",function(e){if(e.which===13){var $i=$(this),t=$i.val().trim(),id=$i.data("post");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);loadC(id);loadP();}).fail(function(){$i.prop("disabled",false);});}}});
function loadP(){api.get({action:"socialfeed",sfaction:"getposts",limit:20}).then(function(r){var ps=(r.socialfeed&&r.socialfeed.posts)||[];$("#post-count").text(ps.length);if(!ps.length){$("#feed-container").html('<div class="sa-empty"><div class="sa-empty-icon">📷</div><div class="sa-empty-title">Share Photos</div><div class="sa-empty-text">When you share photos, they will appear here.</div></div>');return;}var h=ps.map(function(p){var up=localStorage.getItem("sf_photo_"+p.username)||"",tr=0;for(var k in p.reaction_counts)tr+=p.reaction_counts[k];var m="";if(p.image_url)m='<div class="sa-post-media"><img src="'+esc(p.image_url)+'"></div>';if(p.video_url){if(p.video_url.match(/youtube|youtu\.be/)){var vi=(p.video_url.match(/(?:v=|youtu\.be\/)([^&]+)/)||[])[1];if(vi)m='<div class="sa-post-media"><iframe src="https://www.youtube.com/embed/'+vi+'" allowfullscreen></iframe></div>';}else m='<div class="sa-post-media"><video src="'+esc(p.video_url)+'" controls></video></div>';}var lo=p.location?'<div class="sa-post-location">📍 '+esc(p.location)+'</div>':"";var del=p.username===user?'<button class="sa-post-menu" data-delete="'+p.id+'">···</button>':"";var lc=p.user_reaction==="like"?" liked":"";return'<div class="sa-post"><div class="sa-post-header"><div class="sa-post-avatar">'+av(up,p.username,"p")+'</div><div class="sa-post-user"><div class="sa-post-username">'+esc(p.username)+'</div><div class="sa-post-meta">'+ago(p.created)+'</div></div>'+del+'</div>'+(p.content&&p.content!=="(media)"?'<div class="sa-post-content">'+esc(p.content)+'</div>':"")+lo+m+'<div class="sa-post-actions"><button class="sa-post-action'+lc+'" data-like="'+p.id+'">'+(p.user_reaction==="like"?"❤️":"🤍")+'</button><button class="sa-post-action">💬</button><button class="sa-post-action">📤</button><button class="sa-post-action" style="margin-left:auto">🔖</button></div>'+(tr?'<div class="sa-post-likes">'+tr+" like"+(tr>1?"s":"")+"</div>":"")+(p.comments?'<div class="sa-post-comments-count" data-post="'+p.id+'">View all '+p.comments+" comment"+(p.comments>1?"s":"")+"</div>":"")+'<div class="sa-comments-section" id="comments-'+p.id+'"></div><div class="sa-post-time">'+ago(p.created)+'</div><div class="sa-post-comment-form"><input class="sa-post-comment-input" data-post="'+p.id+'" placeholder="Add a comment..."><button class="sa-post-comment-submit">Post</button></div></div>';}).join("");$("#feed-container").html(h);}).fail(function(){$("#feed-container").html('<div class="sa-empty"><div class="sa-empty-icon">😕</div><div class="sa-empty-title">Oops</div><div class="sa-empty-text">Could not load posts.</div></div>');});}
function loadC(id){api.get({action:"socialfeed",sfaction:"getcomments",post_id:id}).then(function(r){var cs=(r.socialfeed&&r.socialfeed.comments)||[];var h=cs.map(function(c){var up=localStorage.getItem("sf_photo_"+c.username)||"";return'<div class="sa-comment"><div class="sa-comment-avatar">'+av(up,c.username,"s")+'</div><div class="sa-comment-body"><div class="sa-comment-text"><strong>'+esc(c.username)+"</strong> "+esc(c.content)+'</div><div class="sa-comment-time">'+ago(c.created)+"</div></div></div>";}).join("");$("#comments-"+id).html(h||'<div style="color:#8e8e8e;padding:8px 0;font-size:14px">No comments yet</div>');});}
function loadS(){api.get({action:"socialfeed",sfaction:"getstories"}).then(function(r){var ss=(r.socialfeed&&r.socialfeed.stories)||[];var h='<div class="sa-story"><div class="sa-story-ring add"><div class="sa-story-inner" id="add-story-btn"><span class="sa-story-add">+</span></div></div><div class="sa-story-name">Your story</div></div>';h+=ss.map(function(s){var up=localStorage.getItem("sf_photo_"+s.username)||"";return'<div class="sa-story" data-story-url="'+esc(s.image_url)+'" data-story-user="'+esc(s.username)+'"><div class="sa-story-ring"><div class="sa-story-inner">'+(up?'<img src="'+esc(up)+'">':'<div class="sa-story-inner-placeholder">'+gi(s.username)+'</div>')+'</div></div><div class="sa-story-name">'+esc(s.username)+"</div></div>";}).join("");$("#stories-container").html(h);}).fail(function(){});}
loadP();
loadS();
});
}