Browse Source

added popular board selector

circle-list
Kevin Froman 2 years ago
parent
commit
160469f50f
  1. 6
      static-data/www/board/board.js
  2. 1
      static-data/www/board/default-circle-picker.js
  3. 64
      static-data/www/board/index.html
  4. 45
      static-data/www/board/popular.js
  5. 2
      static-data/www/board/theme.css

6
static-data/www/board/board.js

@ -251,4 +251,10 @@ newPostForm.onsubmit = function(){
return false
}
resetCirclePickers = function(){
document.getElementById('recommendedBoards').value = ""
document.getElementById('popularBoards').value = ""
}
document.getElementById('feedIDInput').onchange = resetCirclePickers

1
static-data/www/board/default-circle-picker.js

@ -22,4 +22,5 @@ recommendedIDs = document.getElementById('recommendedBoards')
recommendedIDs.onchange = function(){
document.getElementById('feedIDInput').value = recommendedIDs.value
getBlocks()
resetCirclePickers()
}

64
static-data/www/board/index.html

@ -8,25 +8,26 @@
<title>
Circles
</title>
<link rel='shortcut icon' type='image/ico' href='/shared/images/favicon.ico'>
<link rel='stylesheet' href='/shared/main/PNotifyBrightTheme.css'>
<link rel="shortcut icon" type="image/ico" href="/shared/images/favicon.ico">
<link rel="stylesheet" href="/shared/main/PNotifyBrightTheme.css">
<link rel="stylesheet" href="/shared/fontawesome-free-5.10.2/css/all.min.css">
<link rel="stylesheet" href="/gettheme">
<link rel="stylesheet" href="theme.css">
<script defer src="/shared/base32.js"></script>
<script defer src="/shared/identicon.js"></script>
<script defer src='/shared/node_modules/pnotify/dist/iife/PNotify.js'></script>
<script defer src='/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js'></script>
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotify.js"></script>
<script defer src="/shared/node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script defer src="/shared/useridenticons.js"></script>
<script defer src='/shared/misc.js'></script>
<script defer src='/shared/navbar.js'></script>
<script defer src="/shared/misc.js"></script>
<script defer src="/shared/navbar.js"></script>
<script defer src="/shared/main/apicheck.js"></script>
<script defer src="detect-plaintext-storage.js"></script>
<script defer src='sethumanreadable.js'></script>
<script defer src="sethumanreadable.js"></script>
<script defer src="default-circle-picker.js"></script>
<script defer src="sort-posts.js"></script>
<script defer src='board.js'></script>
<script defer src='autorefresh.js'></script>
<script defer src="board.js"></script>
<script defer src="autorefresh.js"></script>
<script defer src="popular.js"></script>
</head>
<body>
@ -114,22 +115,43 @@
<a class="button is-static">Circle Name</a>
</p>
<p class="control is-expanded">
<input id='feedIDInput' class="input" placeholder="Board name" value="global">
<input id="feedIDInput" class="input" placeholder="Board name" value="global">
</p>
<p class="control">
<a class="button is-success" id='refreshFeed'>Refresh Feed</a>
<a class="button is-success" id="refreshFeed">Refresh Feed</a>
</p>
</div>
<label for="recommendedBoards">Main Circles:</label>
<select id="recommendedBoards">
<option value="global">Global</option>
<option value="onionr">Onionr</option>
<option value="games">Games</option>
<option value="politics">Politics</option>
<option value="tech">Tech</option>
<option value="random">Random</option>
<option value="privacy">Privacy</option>
</select>
<div class="field">
<div class="columns">
<div class="column is-2">
<div class="control">
<label for="recommendedBoards" class="label">Default Circles:</label>
<div class="select">
<select id="recommendedBoards">
<option value=""></option>
<option value="global">Global</option>
<option value="onionr">Onionr</option>
<option value="games">Games</option>
<option value="politics">Politics</option>
<option value="tech">Tech</option>
<option value="random">Random</option>
<option value="privacy">Privacy</option>
</select>
</div>
</div>
</div>
<div class="column is-2">
<div class="control">
<label for="popularBoards" class="label">Popular Circles:</label>
<div class="select">
<select id="popularBoards">
<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>
</div>
</div>
</div>
</div>
</div>
<p class="control">
<br>
Note: All posts in Circles are publicly accessible.

45
static-data/www/board/popular.js

@ -0,0 +1,45 @@
/*
Onionr - Private P2P Communication
Load popular boards and show them in the UI. Handle selections of popular boards.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
fetch('/circles/getpopular/8', {
method: 'GET',
headers: {
"token": webpass
}})
.then((popular) => popular.text())
.then(function(popular) {
var popularSelect = document.getElementById('popularBoards')
let boards = popular.split(',')
for (board of boards){
let newOption = document.createElement('option')
if (board == ""){continue}
newOption.value = board
newOption.innerText = board.charAt(0).toUpperCase() + board.slice(1)
console.debug(board)
popularSelect.appendChild(newOption)
}
})
document.getElementById('popularBoards').onchange = function(){
document.getElementById('feedIDInput').value = document.getElementById('popularBoards').value
getBlocks()
resetCirclePickers()
}

2
static-data/www/board/theme.css

@ -8,4 +8,4 @@
body{
background-color: #212224;
color: white;
}
}

Loading…
Cancel
Save