mirror of
https://github.com/owncast/owncast.git
synced 2024-10-22 20:45:58 +03:00
clean up social code
This commit is contained in:
Ginger Wong
parent
19dee67f2a
commit
1ecf39c2f1
4 changed files with 153 additions and 152 deletions
|
|
@ -90,40 +90,25 @@ GW TODO:
|
|||
</main>
|
||||
|
||||
<section id="user-content" class="user-content">
|
||||
<div class="social-list flex">
|
||||
<user-social-icon
|
||||
v-for="(item, index) in socialHandles"
|
||||
v-if="item.platform && item.handle"
|
||||
v-bind:key="index"
|
||||
v-bind:platform="item.platform"
|
||||
v-bind:username="item.handle"
|
||||
/>
|
||||
</div>
|
||||
<social-list v-bind:platforms="socialHandles"></social-list>
|
||||
|
||||
|
||||
<!-- USER CONTENT... -->
|
||||
<div v-html="description"></div>
|
||||
|
||||
<owncast-footer />
|
||||
<owncast-footer></owncast-footer>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<section id="chat-container-wrap" class="flex">
|
||||
<div id="user-content-touch" class="user-content">
|
||||
<div class="social-list flex">
|
||||
<user-social-icon
|
||||
v-for="(item, index) in socialHandles"
|
||||
v-if="item.platform && item.handle"
|
||||
v-bind:key="index"
|
||||
v-bind:platform="item.platform"
|
||||
v-bind:username="item.handle"
|
||||
/>
|
||||
</div>
|
||||
<social-list v-bind:platforms="socialHandles"></social-list>
|
||||
|
||||
<!-- USER CONTENT... -->
|
||||
<div v-html="description"></div>
|
||||
|
||||
<owncast-footer />
|
||||
<owncast-footer></owncast-footer>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -180,6 +165,7 @@ GW TODO:
|
|||
<script src="js/config.js"></script>
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/message.js"></script>
|
||||
<script src="js/social.js"></script>
|
||||
<script src="js/footer.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/player/airplay.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,132 +7,3 @@ Vue.component('owncast-footer', {
|
|||
</footer>
|
||||
`,
|
||||
});
|
||||
|
||||
|
||||
const SOCIAL_PLATFORMS_URLS = {
|
||||
default: {
|
||||
name: "default",
|
||||
urlPrefix: "",
|
||||
imgPos: [0,0], // [row,col]
|
||||
},
|
||||
|
||||
facebook: {
|
||||
name: "Facebook",
|
||||
urlPrefix: "http://www.facebook.com/",
|
||||
imgPos: [0,1], // [row,col]
|
||||
},
|
||||
twitter: {
|
||||
name: "Twitter",
|
||||
urlPrefix: "http://www.twitter.com/",
|
||||
imgPos: [0,2], // [row,col]
|
||||
},
|
||||
instagram: {
|
||||
name: "Instagram",
|
||||
urlPrefix: "http://www.instagram.com/",
|
||||
imgPos: [0,3], // [row,col]
|
||||
},
|
||||
instagram: {
|
||||
name: "Snapchat",
|
||||
urlPrefix: "http://www.snapchat.com/",
|
||||
imgPos: [0,4], // [row,col]
|
||||
},
|
||||
tiktok: {
|
||||
name: "TikTok",
|
||||
urlPrefix: "http://www.tiktok.com/",
|
||||
imgPos: [0,5], // [row,col]
|
||||
},
|
||||
soundcloud: {
|
||||
name: "Soundcloud",
|
||||
urlPrefix: "http://www.soundcloud.com/",
|
||||
imgPos: [0,6], // [row,col]
|
||||
},
|
||||
basecamp: {
|
||||
name: "Base Camp",
|
||||
urlPrefix: "http://www.basecamp.com/",
|
||||
imgPos: [0,7], // [row,col]
|
||||
},
|
||||
patreon: {
|
||||
name: "Patreon",
|
||||
urlPrefix: "http://www.patreon.com/",
|
||||
imgPos: [0,1], // [row,col]
|
||||
},
|
||||
youtube: {
|
||||
name: "YouTube",
|
||||
urlPrefix: "http://www.youtube.com/",
|
||||
imgPos: [0,9 ], // [row,col]
|
||||
},
|
||||
spotify: {
|
||||
name: "Spotify",
|
||||
urlPrefix: "http://www.spotify.com/",
|
||||
imgPos: [0,10], // [row,col]
|
||||
},
|
||||
twitch: {
|
||||
name: "Twitch",
|
||||
urlPrefix: "http://www.twitch.com/",
|
||||
imgPos: [0,11], // [row,col]
|
||||
},
|
||||
paypal: {
|
||||
name: "Paypal",
|
||||
urlPrefix: "http://www.paypal.com/",
|
||||
imgPos: [0,12], // [row,col]
|
||||
},
|
||||
github: {
|
||||
name: "Github",
|
||||
urlPrefix: "http://www.github.com/",
|
||||
imgPos: [0,13], // [row,col]
|
||||
},
|
||||
linkedin: {
|
||||
name: "LinkedIn",
|
||||
urlPrefix: "http://www.linkedin.com/",
|
||||
imgPos: [0,14], // [row,col]
|
||||
},
|
||||
discord: {
|
||||
name: "Discord",
|
||||
urlPrefix: "http://www.discord.com/",
|
||||
imgPos: [0,15], // [row,col]
|
||||
},
|
||||
mastadon: {
|
||||
name: "Mastadon",
|
||||
urlPrefix: "http://www.mastadon.com/",
|
||||
imgPos: [0,16], // [row,col]
|
||||
},
|
||||
};
|
||||
|
||||
Vue.component('user-social-icon', {
|
||||
props: ['platform', 'username'],
|
||||
data: function() {
|
||||
const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
|
||||
const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
|
||||
const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
|
||||
const useDefault = platformInfo.name === "default";
|
||||
return {
|
||||
name: platformInfo.name,
|
||||
link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
|
||||
style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
|
||||
itemClass: {
|
||||
"user-social-item": true,
|
||||
"flex": true,
|
||||
"rounded": useDefault,
|
||||
"use-default": useDefault,
|
||||
},
|
||||
labelClass: {
|
||||
"platform-label": true,
|
||||
"visually-hidden": !useDefault,
|
||||
"text-indigo-800": true,
|
||||
},
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<a
|
||||
v-bind:class="itemClass"
|
||||
target="_blank"
|
||||
:href="link"
|
||||
>
|
||||
<span
|
||||
class="platform-icon rounded-lg"
|
||||
:style="style"
|
||||
/>
|
||||
<span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
|
||||
</a>
|
||||
`,
|
||||
});
|
||||
|
|
|
|||
142
webroot/js/social.js
Normal file
142
webroot/js/social.js
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
const SOCIAL_PLATFORMS_URLS = {
|
||||
default: {
|
||||
name: "default",
|
||||
urlPrefix: "",
|
||||
imgPos: [0,0], // [row,col]
|
||||
},
|
||||
|
||||
facebook: {
|
||||
name: "Facebook",
|
||||
urlPrefix: "http://www.facebook.com/",
|
||||
imgPos: [0,1],
|
||||
},
|
||||
twitter: {
|
||||
name: "Twitter",
|
||||
urlPrefix: "http://www.twitter.com/",
|
||||
imgPos: [0,2],
|
||||
},
|
||||
instagram: {
|
||||
name: "Instagram",
|
||||
urlPrefix: "http://www.instagram.com/",
|
||||
imgPos: [0,3],
|
||||
},
|
||||
instagram: {
|
||||
name: "Snapchat",
|
||||
urlPrefix: "http://www.snapchat.com/",
|
||||
imgPos: [0,4],
|
||||
},
|
||||
tiktok: {
|
||||
name: "TikTok",
|
||||
urlPrefix: "http://www.tiktok.com/",
|
||||
imgPos: [0,5],
|
||||
},
|
||||
soundcloud: {
|
||||
name: "Soundcloud",
|
||||
urlPrefix: "http://www.soundcloud.com/",
|
||||
imgPos: [0,6],
|
||||
},
|
||||
basecamp: {
|
||||
name: "Base Camp",
|
||||
urlPrefix: "http://www.basecamp.com/",
|
||||
imgPos: [0,7],
|
||||
},
|
||||
patreon: {
|
||||
name: "Patreon",
|
||||
urlPrefix: "http://www.patreon.com/",
|
||||
imgPos: [0,1],
|
||||
},
|
||||
youtube: {
|
||||
name: "YouTube",
|
||||
urlPrefix: "http://www.youtube.com/",
|
||||
imgPos: [0,9 ],
|
||||
},
|
||||
spotify: {
|
||||
name: "Spotify",
|
||||
urlPrefix: "http://www.spotify.com/",
|
||||
imgPos: [0,10],
|
||||
},
|
||||
twitch: {
|
||||
name: "Twitch",
|
||||
urlPrefix: "http://www.twitch.com/",
|
||||
imgPos: [0,11],
|
||||
},
|
||||
paypal: {
|
||||
name: "Paypal",
|
||||
urlPrefix: "http://www.paypal.com/",
|
||||
imgPos: [0,12],
|
||||
},
|
||||
github: {
|
||||
name: "Github",
|
||||
urlPrefix: "http://www.github.com/",
|
||||
imgPos: [0,13],
|
||||
},
|
||||
linkedin: {
|
||||
name: "LinkedIn",
|
||||
urlPrefix: "http://www.linkedin.com/",
|
||||
imgPos: [0,14],
|
||||
},
|
||||
discord: {
|
||||
name: "Discord",
|
||||
urlPrefix: "http://www.discord.com/",
|
||||
imgPos: [0,15],
|
||||
},
|
||||
mastadon: {
|
||||
name: "Mastadon",
|
||||
urlPrefix: "http://www.mastadon.com/",
|
||||
imgPos: [0,16],
|
||||
},
|
||||
};
|
||||
|
||||
Vue.component('social-list', {
|
||||
props: ['platforms'],
|
||||
|
||||
template: `
|
||||
<div class="social-list flex">
|
||||
<span v-if="this.platforms.length" class="follow-label">Follow me: </span>
|
||||
<user-social-icon
|
||||
v-for="(item, index) in this.platforms"
|
||||
v-if="item.platform && item.handle"
|
||||
v-bind:key="index"
|
||||
v-bind:platform="item.platform"
|
||||
v-bind:username="item.handle"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
|
||||
});
|
||||
|
||||
Vue.component('user-social-icon', {
|
||||
props: ['platform', 'username'],
|
||||
data: function() {
|
||||
const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
|
||||
const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
|
||||
const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
|
||||
const useDefault = platformInfo.name === "default";
|
||||
return {
|
||||
name: platformInfo.name,
|
||||
link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
|
||||
style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
|
||||
itemClass: {
|
||||
"user-social-item": true,
|
||||
"flex": true,
|
||||
"rounded": useDefault,
|
||||
"use-default": useDefault,
|
||||
},
|
||||
labelClass: {
|
||||
"platform-label": true,
|
||||
"visually-hidden": !useDefault,
|
||||
"text-indigo-800": true,
|
||||
},
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<a
|
||||
v-bind:class="itemClass"
|
||||
target="_blank"
|
||||
:href="link"
|
||||
>
|
||||
<span class="platform-icon rounded-lg" :style="style" />
|
||||
<span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
|
||||
</a>
|
||||
`,
|
||||
});
|
||||
|
|
@ -126,19 +126,21 @@ footer {
|
|||
|
||||
.social-list {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.user-social-item:first-of-type::before {
|
||||
content: 'FOLLOW ME: ';
|
||||
.social-list .follow-label {
|
||||
font-weight: bold;
|
||||
font-size: .75em;
|
||||
margin-right: .5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.user-social-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 0em;
|
||||
margin-right: -.25em;
|
||||
}
|
||||
.user-social-item .platform-icon {
|
||||
--icon-width: 40px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue