KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved modals some round, and added donation-modal

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-11-29 20:02:42 +01:00
parent 41f71a2f95
commit 8d7d3ebabc
6 changed files with 111 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
server/public/assets/js/listeners.js
View File

@@ -147,6 +147,8 @@ $().ready(function(){
});
}
$("#donate").modal();
socket.on("connect", function(){
if(connect_error){
connect_error = false;
@@ -1024,6 +1026,17 @@ function seekToClick(e){
}
}
$(document).on("click", "#bitcoin-address", function(e) {
var copyTextarea = document.querySelector('#bitcoin-address');
copyTextarea.select();
var successful = document.execCommand('copy');
if(successful) {
Materialize.toast("Copied!", 2000, "green lighten");
} else {
Materialize.toast("Error copying..", 2000, "red lighten");
}
});
$(document).on("click", ".pagination-results a", function(e) {
e.preventDefault();
var that = $(this);
@@ -1310,6 +1323,11 @@ $(document).on("click", ".first_page", function(e){
List.dynamicContentPage(-10);
});
$(document).on("click", ".donate-button", function(e) {
e.preventDefault();
$("#donate").modal("open");
});
$(document).on('click', '#toast-container', function(){
before_toast();
});

1
server/public/layouts/main.handlebars
View File

@@ -65,6 +65,7 @@
</div>
</div>
{{> contact}}
{{> donate}}
{{> footer}}
<textarea class="copy_video_id" style="display:none;"></textarea>
</body>

61
server/public/partials/channel/header.handlebars
View File

@@ -95,64 +95,5 @@
</div>
</nav>
</div>
<div id="user_password" class="modal">
<div class="modal-content">
<h5>Locked Channel</h5>
<form id="user-password-channel-form">
<div class="input-field">
<input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
<label for="user-pass-input" class="noselect">Password</label>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat close-user-password">Close</a>
<a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
</div>
</div>
<div id="delete_song_alert" class="modal">
<div class="modal-content">
<h5>Delete songs</h5>
<p>Are you sure you want to delete all the songs in the channel?</p>
</div>
<div class="modal-footer">
<a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
</div>
</div>
<div id="help" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Help</h4>
<p>When listening on a channel, there are some different buttons you can click.</p>
<p>If you click the <i class="material-icons">menu</i>, you'll open the settings panel. Here you can change channel settings, decide if you want the computer you're on can be remote-controlled, enable or disable local mode, and import playlists from YouTube.</p>
<p>The <i class="material-icons">search</i>, opens up a search inputfield. If you start typing here, the site will automagically search for your input!</p>
<p>The one next to that one <i class="material-icons">shuffle</i>, is shuffling of the list.</p>
<p>Clicking a song in the playlist, gives it a vote. If you're logged in, you'll have a delete button at your disposal.</p>
<p>Also, whenever you're logged in, you'll have three tabs in the top of the playlist thats called "Playlist", "Suggested" and "Chat". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
<p>If you want to listen to the channel without any "hickups", or being affected by other peoples votes, there is a local mode. By opening up the settings <i class="material-icons">menu</i>, and checking the local mode checkbox, you will be free of synced listening! This will also enable seeking in the current playing video, perfect for those songs you only like a part of!</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="embed" class="modal">
<div class="modal-content">
<h4>Embed</h4>
<p>Copy the code in the textarea, and paste on your website.</p>
<p>
<input type="checkbox" id="autoplay" checked="checked" />
<label for="autoplay" class="padding_right_26">Autoplay</label>
<label for="width_embed" class="embed-label">Width</label>
<input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
<label for="height_embed" class="padding_left_6 embed-label">Height</label>
<input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
<label for="color_embed" class="padding_left_6 embed-label">Color</label>
<input type="text" id="color_embed" class="settings_embed" value="#808080" />
</p>
<textarea id="embed-area"></textarea>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
{{> channel/modal}}
</header>

60
server/public/partials/channel/modal.handlebars Normal file
View File

@@ -0,0 +1,60 @@
<div id="user_password" class="modal">
<div class="modal-content">
<h5>Locked Channel</h5>
<form id="user-password-channel-form">
<div class="input-field">
<input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
<label for="user-pass-input" class="noselect">Password</label>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat close-user-password">Close</a>
<a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
</div>
</div>
<div id="delete_song_alert" class="modal">
<div class="modal-content">
<h5>Delete songs</h5>
<p>Are you sure you want to delete all the songs in the channel?</p>
</div>
<div class="modal-footer">
<a href="#!" class="waves-effect waves-red btn-flat accept-delete right red-text">Delete</a>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat cancel-song-delete">Cancel</a>
</div>
</div>
<div id="help" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Help</h4>
<p>When listening on a channel, there are some different buttons you can click.</p>
<p>If you click the <i class="material-icons">menu</i>, you'll open the settings panel. Here you can change channel settings, decide if you want the computer you're on can be remote-controlled, enable or disable local mode, and import playlists from YouTube.</p>
<p>The <i class="material-icons">search</i>, opens up a search inputfield. If you start typing here, the site will automagically search for your input!</p>
<p>The one next to that one <i class="material-icons">shuffle</i>, is shuffling of the list.</p>
<p>Clicking a song in the playlist, gives it a vote. If you're logged in, you'll have a delete button at your disposal.</p>
<p>Also, whenever you're logged in, you'll have three tabs in the top of the playlist thats called "Playlist", "Suggested" and "Chat". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
<p>If you want to listen to the channel without any "hickups", or being affected by other peoples votes, there is a local mode. By opening up the settings <i class="material-icons">menu</i>, and checking the local mode checkbox, you will be free of synced listening! This will also enable seeking in the current playing video, perfect for those songs you only like a part of!</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="embed" class="modal">
<div class="modal-content">
<h4>Embed</h4>
<p>Copy the code in the textarea, and paste on your website.</p>
<p>
<input type="checkbox" id="autoplay" checked="checked" />
<label for="autoplay" class="padding_right_26">Autoplay</label>
<label for="width_embed" class="embed-label">Width</label>
<input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
<label for="height_embed" class="padding_left_6 embed-label">Height</label>
<input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
<label for="color_embed" class="padding_left_6 embed-label">Color</label>
<input type="text" id="color_embed" class="settings_embed" value="#808080" />
</p>
<textarea id="embed-area"></textarea>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>

28
server/public/partials/donate.handlebars Normal file
View File

@@ -0,0 +1,28 @@
<div id="donate" class="modal">
<div class="modal-content">
<h4>Donate</h4>
<p>Want to donate and support our server-bills?</p>
<p>We take all donations happily, via both PayPal and bitcoin core (BTC).</p>
<br>
<br>
<div class="row">
<div class="col s6 center">
<img src="https://en.bitcoin.it/w/images/en/c/cb/BC_Logotype.png" alt="bitcoin-image" class="col s6 center"/>
<input type="text" id="bitcoin-address" readonly value="18DxBV9ij9t1eSLC3rTrugJbzGtMVPEyNB" />
</div>
<div class="col s6 center">
<img src="https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.png" alt="paypal-image" class="center-align" />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
<a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">
PayPal
</a>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>

10
server/public/partials/footer.handlebars
View File

@@ -43,13 +43,9 @@
</a>
</li>
<li>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
<a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">
<i class="material-icons left footer-button-icon">payment</i>Donate
</a>
</form>
<a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share donate-button">
<i class="material-icons left footer-button-icon">payment</i>Donate
</a>
</li>
<li class="google-play-image-list">
<a href="https://play.google.com/store/apps/details?id=zoff.me.zoff&hl=no&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">