|
|
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* SocialFeed v4 - Clean minimal design */ | | /* SocialFeed is loaded via MediaWiki:Common.js */ |
| 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)||"",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)+'">';return'<div class="sf-avatar-ph sf-avatar-'+sz+'">'+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");});}
| |
| | |
| // Hide Design Page button and apply clean styles
| |
| var css='[class*="wikibox"],[id*="wikibox"],button:has(svg),a[href*="wikibox"],.corner-button,[class*="corner"]{display:none!important}'+
| |
| '#social-app{font-family:system-ui,-apple-system,sans-serif;background:#fff;max-width:600px;margin:0 auto;padding:20px}'+
| |
| '#social-app *{box-sizing:border-box;margin:0;padding:0}'+
| |
| '.sf-profile{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid #eee;margin-bottom:20px}'+
| |
| '.sf-pic{width:80px;height:80px;border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;border:1px solid #ddd}'+
| |
| '.sf-pic img{width:100%;height:100%;object-fit:cover}'+
| |
| '.sf-avatar-ph{width:100%;height:100%;background:#6366f1;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}'+
| |
| '.sf-avatar-lg{font-size:28px}'+
| |
| '.sf-avatar-sm{font-size:11px}'+
| |
| '.sf-avatar-xs{font-size:10px}'+
| |
| '.sf-info{flex:1}'+
| |
| '.sf-row1{display:flex;align-items:center;gap:16px;margin-bottom:12px}'+
| |
| '.sf-name{font-size:20px;font-weight:400}'+
| |
| '.sf-edit{background:#efefef;border:none;padding:6px 14px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}'+
| |
| '.sf-edit:hover{background:#ddd}'+
| |
| '.sf-stats{display:flex;gap:24px;margin-bottom:10px;font-size:14px}'+
| |
| '.sf-stats b{font-weight:600}'+
| |
| '.sf-bio{font-size:14px;line-height:1.4;color:#333}'+
| |
| '.sf-stories{display:flex;gap:12px;padding:16px 0;overflow-x:auto;margin-bottom:16px}'+
| |
| '.sf-story{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}'+
| |
| '.sf-ring{width:56px;height:56px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}'+
| |
| '.sf-ring.add{background:#ccc}'+
| |
| '.sf-ring-inner{width:100%;height:100%;border-radius:50%;background:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;overflow:hidden}'+
| |
| '.sf-ring-inner img{width:100%;height:100%;object-fit:cover}'+
| |
| '.sf-add{color:#0095f6;font-size:20px}'+
| |
| '.sf-sname{font-size:11px;color:#666}'+
| |
| '.sf-compose{border:1px solid #ddd;border-radius:12px;margin-bottom:16px;overflow:hidden}'+
| |
| '.sf-compose-top{display:flex;gap:10px;padding:12px}'+
| |
| '.sf-compose-av{width:36px;height:36px;border-radius:50%;overflow:hidden}'+
| |
| '.sf-compose-av img{width:100%;height:100%;object-fit:cover}'+
| |
| '.sf-compose-in{flex:1;border:none;resize:none;font-size:14px;outline:none;font-family:inherit;min-height:50px}'+
| |
| '.sf-compose-preview{padding:0 12px 12px;display:none}'+
| |
| '.sf-compose-preview.show{display:block}'+
| |
| '.sf-compose-preview img{max-width:100%;max-height:150px;border-radius:8px}'+
| |
| '.sf-compose-loc{padding:0 12px 10px;font-size:13px;color:#0095f6;display:none;align-items:center;gap:6px}'+
| |
| '.sf-compose-loc.show{display:flex}'+
| |
| '.sf-compose-loc button{background:none;border:none;cursor:pointer;font-size:12px;color:#888}'+
| |
| '.sf-compose-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-top:1px solid #eee}'+
| |
| '.sf-compose-btns{display:flex;gap:2px}'+
| |
| '.sf-icon{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:50%;font-size:16px}'+
| |
| '.sf-icon:hover{background:#f0f0f0}'+
| |
| '.sf-post-btn{background:#0095f6;color:#fff;border:none;padding:6px 14px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}'+
| |
| '.sf-post-btn:disabled{opacity:0.3}'+
| |
| '.sf-feed{display:flex;flex-direction:column;gap:16px}'+
| |
| '.sf-post{border:1px solid #ddd;border-radius:12px;overflow:hidden}'+
| |
| '.sf-post-head{display:flex;align-items:center;gap:10px;padding:12px}'+
| |
| '.sf-post-av{width:32px;height:32px;border-radius:50%;overflow:hidden}'+
| |
| '.sf-post-av img{width:100%;height:100%;object-fit:cover}'+
| |
| '.sf-post-user{flex:1}'+
| |
| '.sf-post-name{font-weight:600;font-size:13px}'+
| |
| '.sf-post-time{font-size:11px;color:#888}'+
| |
| '.sf-post-del{background:none;border:none;cursor:pointer;font-size:14px;color:#888}'+
| |
| '.sf-post-text{padding:0 12px 10px;font-size:14px;line-height:1.4;white-space:pre-wrap}'+
| |
| '.sf-post-loc{padding:0 12px 8px;font-size:12px;color:#00376b}'+
| |
| '.sf-post-media img{width:100%;max-height:400px;object-fit:contain;background:#fafafa}'+
| |
| '.sf-post-media video{width:100%;max-height:400px}'+
| |
| '.sf-post-media iframe{width:100%;height:300px;border:none}'+
| |
| '.sf-post-actions{display:flex;gap:12px;padding:10px 12px}'+
| |
| '.sf-post-act{background:none;border:none;cursor:pointer;font-size:20px;padding:0}'+
| |
| '.sf-post-act.liked{color:#ed4956}'+
| |
| '.sf-post-likes{padding:0 12px 6px;font-weight:600;font-size:13px}'+
| |
| '.sf-post-comments{padding:0 12px 6px;font-size:13px;color:#888;cursor:pointer}'+
| |
| '.sf-post-cmts{display:none;padding:0 12px 10px;max-height:150px;overflow-y:auto}'+
| |
| '.sf-post-cmts.show{display:block}'+
| |
| '.sf-cmt{display:flex;gap:8px;margin-bottom:8px}'+
| |
| '.sf-cmt-av{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}'+
| |
| '.sf-cmt-av img{width:100%;height:100%;object-fit:cover}'+
| |
| '.sf-cmt-text{font-size:13px;line-height:1.3}'+
| |
| '.sf-cmt-text b{font-weight:600}'+
| |
| '.sf-cmt-time{font-size:11px;color:#888;margin-top:2px}'+
| |
| '.sf-post-cmt-form{display:flex;gap:10px;padding:10px 12px;border-top:1px solid #eee;align-items:center}'+
| |
| '.sf-post-cmt-in{flex:1;border:none;font-size:13px;outline:none}'+
| |
| '.sf-post-cmt-btn{background:none;border:none;color:#0095f6;font-weight:600;cursor:pointer;font-size:13px}'+
| |
| '.sf-empty{text-align:center;padding:40px;border:1px solid #ddd;border-radius:12px}'+
| |
| '.sf-empty-icon{font-size:40px;margin-bottom:10px}'+
| |
| '.sf-empty-title{font-size:18px;margin-bottom:6px}'+
| |
| '.sf-empty-text{color:#888;font-size:13px}'+
| |
| '.sf-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:9999;align-items:center;justify-content:center;padding:20px}'+
| |
| '.sf-modal.open{display:flex}'+
| |
| '.sf-modal-box{background:#fff;border-radius:12px;width:100%;max-width:360px;max-height:80vh;overflow:auto}'+
| |
| '.sf-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #ddd}'+
| |
| '.sf-modal-title{font-weight:600;font-size:15px}'+
| |
| '.sf-modal-x{background:none;border:none;font-size:22px;cursor:pointer;line-height:1}'+
| |
| '.sf-modal-body{padding:16px}'+
| |
| '.sf-tabs{display:flex;border-bottom:1px solid #ddd}'+
| |
| '.sf-tab{flex:1;padding:12px;text-align:center;cursor:pointer;font-weight:600;font-size:13px;color:#888;border-bottom:2px solid transparent;margin-bottom:-1px}'+
| |
| '.sf-tab.active{color:#000;border-bottom-color:#000}'+
| |
| '.sf-panel{display:none;padding:16px}'+
| |
| '.sf-panel.active{display:block}'+
| |
| '.sf-upload{border:2px dashed #ddd;border-radius:8px;padding:24px;text-align:center;cursor:pointer}'+
| |
| '.sf-upload:hover{border-color:#0095f6;background:#fafafa}'+
| |
| '.sf-upload input{display:none}'+
| |
| '.sf-upload-icon{font-size:32px;margin-bottom:8px}'+
| |
| '.sf-upload-text{color:#888;font-size:13px}'+
| |
| '.sf-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:10px;outline:none}'+
| |
| '.sf-input:focus{border-color:#333}'+
| |
| '.sf-textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:10px;outline:none;resize:vertical;min-height:70px;font-family:inherit}'+
| |
| '.sf-textarea:focus{border-color:#333}'+
| |
| '.sf-preview{width:100%;max-height:120px;object-fit:contain;border-radius:6px;margin-top:10px;display:none}'+
| |
| '.sf-preview.show{display:block}'+
| |
| '.sf-progress{height:3px;background:#ddd;border-radius:2px;margin-top:10px;overflow:hidden;display:none}'+
| |
| '.sf-progress.show{display:block}'+
| |
| '.sf-progress-bar{height:100%;background:#0095f6;width:0}'+
| |
| '.sf-btn-row{display:flex;gap:8px;margin-top:14px}'+
| |
| '.sf-btn{flex:1;padding:10px;border:none;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}'+
| |
| '.sf-btn-primary{background:#0095f6;color:#fff}'+
| |
| '.sf-btn-secondary{background:#efefef;color:#333}'+
| |
| '.sf-story-view{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#111;z-index:10000;align-items:center;justify-content:center}'+
| |
| '.sf-story-view.open{display:flex}'+
| |
| '.sf-story-view-box{position:relative;max-width:360px;width:100%}'+
| |
| '.sf-story-view-prog{position:absolute;top:12px;left:12px;right:12px;height:2px;background:rgba(255,255,255,0.3);border-radius:1px}'+
| |
| '.sf-story-view-prog-bar{height:100%;background:#fff;width:0}'+
| |
| '.sf-story-view-head{position:absolute;top:20px;left:12px;display:flex;align-items:center;gap:8px;color:#fff}'+
| |
| '.sf-story-view-av{width:28px;height:28px;border-radius:50%;overflow:hidden;border:2px solid #fff}'+
| |
| '.sf-story-view-av img{width:100%;height:100%;object-fit:cover}'+
| |
| '.sf-story-view-name{font-weight:600;font-size:13px}'+
| |
| '.sf-story-view-x{position:absolute;top:12px;right:12px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}'+
| |
| '.sf-story-view img{max-width:100%;max-height:75vh;border-radius:8px}';
| |
| $("<style>").text(css).appendTo("head");
| |
| | |
| // Also directly hide any button with "Design" text
| |
| setTimeout(function(){$('button,a').filter(function(){return $(this).text().indexOf('Design')!==-1;}).hide();},100);
| |
| setTimeout(function(){$('button,a').filter(function(){return $(this).text().indexOf('Design')!==-1;}).hide();},500);
| |
| setTimeout(function(){$('button,a').filter(function(){return $(this).text().indexOf('Design')!==-1;}).hide();},1000);
| |
| | |
| // Build HTML
| |
| var h='<div class="sf-profile">';
| |
| h+='<div class="sf-pic" id="profile-pic">'+av(ud.photo,user,"lg")+'</div>';
| |
| h+='<div class="sf-info">';
| |
| h+='<div class="sf-row1"><span class="sf-name" id="display-name">'+esc(ud.name)+'</span><button class="sf-edit" id="edit-profile-btn">Edit profile</button></div>';
| |
| h+='<div class="sf-stats"><span><b id="post-count">0</b> posts</span><span><b>0</b> followers</span><span><b>0</b> following</span></div>';
| |
| h+='<div class="sf-bio" id="bio-display">'+(ud.bio?esc(ud.bio).replace(/\n/g,"<br>"):"<span style='color:#888'>No bio yet</span>")+'</div>';
| |
| h+='</div></div>';
| |
| | |
| h+='<div class="sf-stories" id="stories-container"></div>';
| |
| | |
| h+='<div class="sf-compose">';
| |
| h+='<div class="sf-compose-top"><div class="sf-compose-av" id="composer-avatar">'+av(ud.photo,user,"sm")+'</div><textarea class="sf-compose-in" id="post-input" placeholder="What\'s on your mind?"></textarea></div>';
| |
| h+='<div class="sf-compose-preview" id="post-preview"></div>';
| |
| h+='<div class="sf-compose-loc" id="post-location"><span></span><button id="remove-location">x</button></div>';
| |
| h+='<div class="sf-compose-bar"><div class="sf-compose-btns"><button class="sf-icon" id="btn-add-photo" title="Photo">🖼</button><button class="sf-icon" id="btn-add-video" title="Video">🎬</button><button class="sf-icon" id="btn-add-location" title="Location">📍</button><button class="sf-icon" id="btn-add-emoji" title="Emoji">😊</button></div><button class="sf-post-btn" id="btn-submit-post" disabled>Post</button></div>';
| |
| h+='</div>';
| |
| | |
| h+='<div class="sf-feed" id="feed-container"></div>';
| |
| | |
| // Modals
| |
| h+='<div class="sf-modal" id="modal-edit-profile"><div class="sf-modal-box"><div class="sf-modal-head"><span class="sf-modal-title">Edit profile</span><button class="sf-modal-x" data-close="modal-edit-profile">×</button></div><div class="sf-modal-body"><label style="font-weight:600;font-size:13px;display:block;margin-bottom:6px">Name</label><input class="sf-input" id="input-display-name" value="'+esc(ud.name)+'"><label style="font-weight:600;font-size:13px;display:block;margin-bottom:6px">Bio</label><textarea class="sf-textarea" id="input-bio" placeholder="Write something about yourself...">'+esc(ud.bio)+'</textarea><div class="sf-btn-row"><button class="sf-btn sf-btn-secondary" data-close="modal-edit-profile">Cancel</button><button class="sf-btn sf-btn-primary" id="save-profile">Save</button></div></div></div></div>';
| |
| | |
| h+='<div class="sf-modal" id="modal-profile-pic"><div class="sf-modal-box"><div class="sf-modal-head"><span class="sf-modal-title">Change photo</span><button class="sf-modal-x" data-close="modal-profile-pic">×</button></div><div class="sf-tabs"><div class="sf-tab active" data-panel="panel-pic-upload">Upload</div><div class="sf-tab" data-panel="panel-pic-url">URL</div></div><div class="sf-panel active" id="panel-pic-upload"><div class="sf-upload" id="zone-profile-pic"><input type="file" accept="image/*"><div class="sf-upload-icon">📷</div><div class="sf-upload-text">Click to upload</div></div><div class="sf-progress" id="progress-profile-pic"><div class="sf-progress-bar"></div></div><img class="sf-preview" id="preview-profile-pic"></div><div class="sf-panel" id="panel-pic-url"><input class="sf-input" id="input-pic-url" placeholder="Paste image URL..."><img class="sf-preview" id="preview-pic-url"></div><div class="sf-btn-row" style="padding:0 16px 16px"><button class="sf-btn sf-btn-secondary" data-close="modal-profile-pic">Cancel</button><button class="sf-btn sf-btn-primary" id="save-profile-pic">Save</button></div></div></div>';
| |
| | |
| h+='<div class="sf-modal" id="modal-photo"><div class="sf-modal-box"><div class="sf-modal-head"><span class="sf-modal-title">Add photo</span><button class="sf-modal-x" data-close="modal-photo">×</button></div><div class="sf-tabs"><div class="sf-tab active" data-panel="panel-photo-upload">Upload</div><div class="sf-tab" data-panel="panel-photo-url">URL</div></div><div class="sf-panel active" id="panel-photo-upload"><div class="sf-upload" id="zone-photo"><input type="file" accept="image/*"><div class="sf-upload-icon">📷</div><div class="sf-upload-text">Click to upload</div></div><div class="sf-progress" id="progress-photo"><div class="sf-progress-bar"></div></div><img class="sf-preview" id="preview-photo"></div><div class="sf-panel" id="panel-photo-url"><input class="sf-input" id="input-photo-url" placeholder="Paste image URL..."><img class="sf-preview" id="preview-photo-url"></div><div class="sf-btn-row" style="padding:0 16px 16px"><button class="sf-btn sf-btn-secondary" data-close="modal-photo">Cancel</button><button class="sf-btn sf-btn-primary" id="add-photo">Add</button></div></div></div>';
| |
| | |
| h+='<div class="sf-modal" id="modal-story"><div class="sf-modal-box"><div class="sf-modal-head"><span class="sf-modal-title">Add story</span><button class="sf-modal-x" data-close="modal-story">×</button></div><div class="sf-tabs"><div class="sf-tab active" data-panel="panel-story-upload">Upload</div><div class="sf-tab" data-panel="panel-story-url">URL</div></div><div class="sf-panel active" id="panel-story-upload"><div class="sf-upload" id="zone-story"><input type="file" accept="image/*"><div class="sf-upload-icon">📷</div><div class="sf-upload-text">Click to upload</div></div><div class="sf-progress" id="progress-story"><div class="sf-progress-bar"></div></div><img class="sf-preview" id="preview-story"></div><div class="sf-panel" id="panel-story-url"><input class="sf-input" id="input-story-url" placeholder="Paste image URL..."><img class="sf-preview" id="preview-story-url"></div><div class="sf-btn-row" style="padding:0 16px 16px"><button class="sf-btn sf-btn-secondary" data-close="modal-story">Cancel</button><button class="sf-btn sf-btn-primary" id="add-story">Share</button></div></div></div>';
| |
| | |
| h+='<div class="sf-story-view" id="story-viewer"><div class="sf-story-view-box"><div class="sf-story-view-prog"><div class="sf-story-view-prog-bar" id="sv-prog"></div></div><button class="sf-story-view-x" id="close-story-viewer">×</button><div class="sf-story-view-head"><div class="sf-story-view-av" id="story-viewer-avatar"></div><div class="sf-story-view-name" id="story-viewer-name"></div></div><img id="story-viewer-image" src=""></div></div>';
| |
| | |
| $("#social-app").html(h);
| |
| var $a=$("#social-app");
| |
| | |
| $a.on("click","[data-close]",function(){cm($(this).data("close"));});
| |
| $a.on("click",".sf-modal",function(e){if($(e.target).hasClass("sf-modal"))cm(this.id);});
| |
| $a.on("click",".sf-tab",function(){var $t=$(this),$p=$("#"+$t.data("panel"));$t.addClass("active").siblings().removeClass("active");$p.addClass("active").siblings(".sf-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();});$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(".sf-progress-bar").css("width",0);$i.val("");},setP:function(p){$pr.addClass("show").find(".sf-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?esc(ud.bio).replace(/\n/g,"<br>"):"<span style='color:#888'>No bio yet</span>");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 .sf-tab.active").data("panel");if(ap==="panel-pic-url"){var u=$("#input-pic-url").val().trim();if(u)savePic(u);else alert("Enter a URL");}else if(uf.profilePic){upload(uf.profilePic,"ProfilePic",upPic.setP).then(savePic).fail(function(){alert("Upload error");});}else alert("Select an image");});
| |
| function savePic(u){ud.photo=u;localStorage.setItem("sf_photo_"+user,u);$("#profile-pic").html(av(u,user,"lg"));$("#composer-avatar").html(av(u,user,"sm"));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 .sf-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").html('<img src="'+u+'" style="max-width:100%;max-height:150px;border-radius:8px">');upd();cm("modal-photo");}else alert("Enter a URL");}else if(uf.photo){upload(uf.photo,"Post",upPho.setP).then(function(u){pp.image=u;$("#post-preview").addClass("show").html('<img src="'+u+'" style="max-width:100%;max-height:150px;border-radius:8px">');upd();cm("modal-photo");upPho.reset();}).fail(function(){alert("Upload error");});}else alert("Select an image");});
| |
| | |
| $("#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)return;var $b=$(this);$b.prop("disabled",true).text("...");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").html("");$("#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 .sf-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("Enter a URL");}else if(uf.story){upload(uf.story,"Story",upSto.setP).then(ps).fail(function(){alert("Upload error");});}else alert("Select an image");});
| |
| | |
| var sto;
| |
| $a.on("click",".sf-story[data-url]",function(){var u=$(this).data("url"),n=$(this).data("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,"xs"));$("#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",".sf-post-act[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",".sf-post-del[data-del]",function(){if(confirm("Delete?")){api.postWithToken("csrf",{action:"socialfeed",sfaction:"deletepost",post_id:$(this).data("del")}).then(loadP);}});
| |
| $a.on("click",".sf-post-comments",function(){var id=$(this).data("post"),$s=$("#cmts-"+id);if($s.hasClass("show"))$s.removeClass("show");else{$s.addClass("show");loadC(id);}});
| |
| $a.on("keypress",".sf-post-cmt-in",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="sf-empty"><div class="sf-empty-icon">📷</div><div class="sf-empty-title">Share Photos</div><div class="sf-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="sf-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="sf-post-media"><iframe src="https://www.youtube.com/embed/'+vi+'" allowfullscreen></iframe></div>';}else m='<div class="sf-post-media"><video src="'+esc(p.video_url)+'" controls></video></div>';}var lo=p.location?'<div class="sf-post-loc">📍 '+esc(p.location)+'</div>':"";var del=p.username===user?'<button class="sf-post-del" data-del="'+p.id+'">✕</button>':"";var lc=p.user_reaction==="like"?" liked":"";return'<div class="sf-post"><div class="sf-post-head"><div class="sf-post-av">'+av(up,p.username,"sm")+'</div><div class="sf-post-user"><div class="sf-post-name">'+esc(p.username)+'</div><div class="sf-post-time">'+ago(p.created)+'</div></div>'+del+'</div>'+(p.content&&p.content!=="(media)"?'<div class="sf-post-text">'+esc(p.content)+'</div>':"")+lo+m+'<div class="sf-post-actions"><button class="sf-post-act'+lc+'" data-like="'+p.id+'">'+(p.user_reaction==="like"?"❤️":"🤍")+'</button><button class="sf-post-act">💬</button><button class="sf-post-act">📤</button></div>'+(tr?'<div class="sf-post-likes">'+tr+" like"+(tr>1?"s":"")+"</div>":"")+(p.comments?'<div class="sf-post-comments" data-post="'+p.id+'">View '+p.comments+" comment"+(p.comments>1?"s":"")+"</div>":"")+'<div class="sf-post-cmts" id="cmts-'+p.id+'"></div><div class="sf-post-cmt-form"><input class="sf-post-cmt-in" data-post="'+p.id+'" placeholder="Add a comment..."><button class="sf-post-cmt-btn">Post</button></div></div>';}).join("");$("#feed-container").html(h);});}
| |
| 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="sf-cmt"><div class="sf-cmt-av">'+av(up,c.username,"xs")+'</div><div><div class="sf-cmt-text"><b>'+esc(c.username)+"</b> "+esc(c.content)+'</div><div class="sf-cmt-time">'+ago(c.created)+"</div></div></div>";}).join("");$("#cmts-"+id).html(h||'<div style="color:#888;font-size:13px;padding:4px 0">No comments</div>');});}
| |
| function loadS(){api.get({action:"socialfeed",sfaction:"getstories"}).then(function(r){var ss=(r.socialfeed&&r.socialfeed.stories)||[];var h='<div class="sf-story"><div class="sf-ring add"><div class="sf-ring-inner" id="add-story-btn"><span class="sf-add">+</span></div></div><div class="sf-sname">Your story</div></div>';h+=ss.map(function(s){var up=localStorage.getItem("sf_photo_"+s.username)||"";return'<div class="sf-story" data-url="'+esc(s.image_url)+'" data-user="'+esc(s.username)+'"><div class="sf-ring"><div class="sf-ring-inner">'+av(up,s.username,"sm")+'</div></div><div class="sf-sname">'+esc(s.username)+"</div></div>";}).join("");$("#stories-container").html(h);});}
| |
| | |
| loadP();
| |
| loadS();
| |
| });
| |
| }
| |