Skip to content

Commit

Permalink
on-page tweet viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimdenGD
dimdenGD committed Aug 22, 2022
1 parent cbce8ea commit 7f7567b
Show file tree
Hide file tree
Showing 11 changed files with 2,133 additions and 121 deletions.
1 change: 1 addition & 0 deletions layouts/header/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,7 @@ setTimeout(async () => {
<div class="new-message-results"></div>
</div>
`, "inbox-modal");
modal.querySelector('.modal-close').hidden = true;
const inboxList = modal.querySelector('.inbox-list');
const readAll = modal.querySelector('.inbox-readall');
const refresh = modal.querySelector('.inbox-refresh');
Expand Down
294 changes: 294 additions & 0 deletions layouts/header/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,19 @@
src: url(chrome-extension://__MSG_@@extension_id__/fonts/rosetta.woff);
}

::-webkit-scrollbar {
width: 6px;
}

::-webkit-scrollbar-track {
background: var(--background-color);
}

::-webkit-scrollbar-thumb {
background: var(--link-color);
border-radius: 3px;
}

input, textarea {
background-color: var(--input-background);
color: var(--default-text-color)
Expand Down Expand Up @@ -929,4 +942,285 @@ input, textarea {
.tweet-player {
border: none;
border-radius: 5px;
}
.tweet-date {
color: var(--light-gray);
font-size: 14px
}

.tweet-footer-stat {
display: grid;
text-decoration: none
}

.tweet-footer {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
display: inline-block;
margin-bottom: 10px;
margin-top: 10px;
width: 100%
}

.tweet-footer-stats {
border-right: 1px solid var(--border);
display: inline-flex;
float: left;
padding-bottom: 5px
}

.tweet-footer-favorites {
display: inline-flex;
float: left;
margin-left: 10px;
margin-top: 12px
}

.tweet-footer-stat-text {
color: var(--light-gray);
float: left;
font-size: 10px;
line-height: 16px;
padding: 7px 28px 0 0;
text-transform: uppercase
}

.tweet-footer-stat:hover .tweet-footer-stat-text {
color: var(--link-color)
}

.tweet-footer-stat-count {
color: var(--link-color);
font-size: 18px;
font-weight: 500;
line-height: 20px
}

.tweet-time[hidden] {
display: none !important
}

.tweet-header-info-main {
display: inline-grid !important;
width: fit-content
}

.tweet-header-info-main>b {
font-size: 18px;
line-height: 1.25;
margin-top: 3px;
padding-top: 2px
}

.tweet-body-main {
display: block !important;
margin-top: 10px
}

.tweet-main {
padding: 20px
}

.tweet-footer-favorites-img {
border-radius: 5px;
margin-right: 5px
}

.tweet-header-follow {
float: right;
margin-top: 2px;
padding: 9px 12px !important
}

.following-item-btn {
bottom: 52px;
float: right;
height: 40px;
position: relative
}

.following-item-text {
bottom: 14px;
display: inline-block;
margin-left: 8px;
position: relative;
width: fit-content
}

.following-item {
margin-bottom: 5px
}

.following-list,
.followers-list {
padding: 10px
}

.following-item-name {
position: absolute;
width: 300px
}

.new-tweet-user-search {
background-color: var(--background-color);
color: var(--almost-black);
padding: 5px;
position: absolute;
z-index: 5
}

.new-tweet-user-search span {
border-radius: 5px;
cursor: pointer;
padding: 2px
}

.new-tweet-user-search span:hover,
.search-result-item-active {
background-color: var(--link-color) !important;
color: var(--background-color) !important
}
.tweet-viewer {
width: 580px;
max-height: 100%;
}
.new-tweet-avatar {
vertical-align: top
}

.new-tweet-text {
border: 1px solid var(--border);
border-radius: 3px;
display: inline-block;
font: 18px var(--font);
height: 23px;
padding: 5px;
padding-right: 40px;
resize: none;
scrollbar-width: thin;
width: 450px
}

.new-tweet-text::-webkit-scrollbar {
width: 2px
}

.new-tweet-text:focus {
outline: none
}

.new-tweet-text-focused {
height: 100px !important
}

.new-tweet {
background-color: var(--new-tweet-over);
border-bottom: none !important;
border-radius: 0 !important;
border-top: none !important;
padding: 10px;
width: 538px
}
.new-tweet-view {
background-color: var(--new-tweet-over);
border-bottom: none !important;
border-radius: 0 !important;
border-top: none !important;
border-right: none !important;
border-left: none !important;
padding: 10px;
width: 541px;
}


.new-tweet-container {
background-color: var(--link-color)
}

.new-tweet-media-div {
bottom: 36px;
cursor: pointer;
float: right;
position: relative;
right: 15px
}

.new-tweet-media-div-focused {
bottom: 112px !important
}

.new-tweet-media:before {
color: var(--link-color);
content: "\f159";
font: 20px RosettaIcons
}

.new-tweet-button {
float: right;
left: 14px;
margin-top: 5px;
position: relative
}

.new-tweet-char {
color: var(--light-gray);
font-size: 12px;
margin-left: -46px;
margin-top: 38px;
position: absolute;
text-align: center;
width: 43px
}
.tweet-view-self-thread-div {
bottom: 35px;
position: relative
}
.tweet-view-self-thread-button {
font-size: 13px;
margin-top: 2px;
text-decoration: none
}

.tweet-no-top {
border-top: none !important
}

.tweet-view-self-thread-line {
background-color: var(--border);
height: 32px;
margin-top: 21px;
margin-left: -34px;
position: absolute;
width: 2px;
z-index: 1;
}

.tweet-view-self-thread-line-dots {
border: 2px var(--background-color) solid;
display: unset;
height: 2px;
margin-left: -41px;
margin-top: 23px;
position: absolute;
width: 12px;
z-index: 2;
}

.tweet:hover .tweet-view-self-thread-line-dots {
border: 2px var(--darker-background-color) solid !important
}
.cool-header {
color: var(--darker-gray);
display: inline-block;
font-size: 22px;
font-weight: 300;
margin: 0
}

.cool-header {
margin-bottom: 10px
}
.tweet-view {
border-right: none !important;
border-left: none !important;
}
39 changes: 15 additions & 24 deletions layouts/home/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ chrome.storage.local.get(['installed'], async data => {
}
chrome.storage.local.set({installed: true});
}
})
});

// Util
function updateUserData() {
Expand Down Expand Up @@ -166,7 +166,17 @@ async function appendTweet(t, timelineContainer, options = {}) {
const tweet = document.createElement('div');
tweet.addEventListener('click', e => {
if(e.target.className.startsWith('tweet tweet-id-') || e.target.className === 'tweet-body' || e.target.className === 'tweet-interact') {
openInNewTab(`https://twitter.com/${t.user.screen_name}/status/${t.id_str}`);
let tweet = t;
if(tweet.retweeted_status) tweet = tweet.retweeted_status;
new TweetViewer(user, settings, tweet);
}
});
tweet.addEventListener('mousedown', e => {
if(e.button === 1) {
e.preventDefault();
if(e.target.className.startsWith('tweet tweet-id-') || e.target.className === 'tweet-body' || e.target.className === 'tweet-interact') {
openInNewTab(`https://twitter.com/${t.user.screen_name}/status/${t.id_str}`);
}
}
});
tweet.tabIndex = -1;
Expand Down Expand Up @@ -195,27 +205,6 @@ async function appendTweet(t, timelineContainer, options = {}) {
}
}
}
const mediaClasses = [
undefined,
'tweet-media-element-one',
'tweet-media-element-two',
'tweet-media-element-three',
'tweet-media-element-four',
];
const sizeFunctions = [
undefined,
(w, h) => [w > 450 ? 450 : w, h > 500 ? 500 : h],
(w, h) => [w > 200 ? 200 : w, h > 400 ? 400 : h],
(w, h) => [w > 150 ? 150 : w, h > 250 ? 250 : h],
(w, h) => [w > 100 ? 100 : w, h > 150 ? 150 : h],
];
const quoteSizeFunctions = [
undefined,
(w, h) => [w > 400 ? 400 : w, h > 400 ? 400 : h],
(w, h) => [w > 200 ? 200 : w, h > 400 ? 400 : h],
(w, h) => [w > 125 ? 125 : w, h > 200 ? 200 : h],
(w, h) => [w > 100 ? 100 : w, h > 150 ? 150 : h],
];
let textWithoutLinks = t.full_text.replace(/(?:https?|ftp):\/\/[\n\S]+/g, '').replace(/(?<!\w)@([\w+]{1,15}\b)/g, '');
let isEnglish = textWithoutLinks.length < 1 ? {languages:[{language:'en', percentage:100}]} : await chrome.i18n.detectLanguage(textWithoutLinks);
isEnglish = isEnglish.languages[0] && isEnglish.languages[0].percentage > 60 && isEnglish.languages[0].language.startsWith('en');
Expand Down Expand Up @@ -1131,9 +1120,11 @@ document.addEventListener('mousemove', e => {
if(Date.now() - lastScroll > 10) {
let t = e.target;
if(t.className.includes('tweet ') || t.className === 'tweet-interact' || t.className === 'tweet-body' || t.className === 'tweet-media') {
if(t.className.includes('tweet-view')) return;
if(t.className === 'tweet-interact' || t.className === 'tweet-media') t = t.parentElement.parentElement;
else if(t.className === 'tweet-body') t = t.parentElement;
let id = t.className.split('id-')[1].split(' ')[0];
let id;
try { id = t.className.split('id-')[1].split(' ')[0] } catch(e) { return };
if(!tweetsToLoad[id]) tweetsToLoad[id] = 1;
else tweetsToLoad[id]++;
if(tweetsToLoad[id] === 15) {
Expand Down
5 changes: 4 additions & 1 deletion layouts/home/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,11 @@ span.tweet-body-text {
.tweet-body-text-quote {
overflow-x: hidden;
}
.tweet-header-name-main {
width: 300px;
}

.tweet-active .tweet-interact::after {
.tweet-active:not(.tweet-view) .tweet-interact::after {
content: "•";
float: right;
color: #1da1f2;
Expand Down
Loading

0 comments on commit 7f7567b

Please sign in to comment.