Simon Grim
6 years ago
17 changed files with 830 additions and 651 deletions
@ -1,119 +0,0 @@ |
|||||||
// interface_profile-edit.js
|
|
||||||
// 2013 Miguel Freitas
|
|
||||||
//
|
|
||||||
// Profile editing interface (profile-edit.html)
|
|
||||||
|
|
||||||
var newUserWarnDisplayed = false; |
|
||||||
|
|
||||||
function initProfileEdit() { |
|
||||||
// Check for the various File API support.
|
|
||||||
if (window.File && window.FileReader && window.FileList && window.Blob) { |
|
||||||
// Great success! All the File APIs are supported.
|
|
||||||
} else { |
|
||||||
alert('The File APIs are not fully supported in this browser.'); |
|
||||||
} |
|
||||||
|
|
||||||
initInterfaceCommon(); |
|
||||||
|
|
||||||
$('.profile-card-photo.forEdition').on('click', function () {$('#avatar-file').trigger('click');}); |
|
||||||
$('#avatar-file').on('change', handleAvatarFileSelect); |
|
||||||
$('.submit-changes').on('click', saveProfile); |
|
||||||
$('.cancel-changes').on('click', $.MAL.goHome); |
|
||||||
|
|
||||||
initUser(function() { |
|
||||||
if (!defaultScreenName) { |
|
||||||
alert(polyglot.t('username_undefined')); |
|
||||||
$.MAL.goLogin(); |
|
||||||
return; |
|
||||||
} |
|
||||||
checkNetworkStatusAndAskRedirect(); |
|
||||||
|
|
||||||
loadFollowing(function() { |
|
||||||
twisterFollowingO = TwisterFollowing(defaultScreenName); |
|
||||||
verifyUserAlreadyInBlockchain(); |
|
||||||
initMentionsCount(); |
|
||||||
initDMsCount(); |
|
||||||
}); |
|
||||||
|
|
||||||
$('.profile-card-main h2').text('@' + defaultScreenName); |
|
||||||
loadAvatarForEdit(); |
|
||||||
loadProfileForEdit(); |
|
||||||
|
|
||||||
$('.secret-key-container').hide(); |
|
||||||
|
|
||||||
$('.toggle-priv-key').on('click', function () { |
|
||||||
if ($('.secret-key-container').is(':visible')) { |
|
||||||
$('.secret-key-container').fadeOut(function () { |
|
||||||
$('.secret-key').text(''); |
|
||||||
}); |
|
||||||
} else { |
|
||||||
dumpPrivkey(defaultScreenName, function(args, key) { |
|
||||||
$('.secret-key').text(key); |
|
||||||
$('.secret-key-container').fadeIn(); |
|
||||||
}, {}); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function handleAvatarFileSelect(event) { |
|
||||||
var files = event.target.files; // FileList object
|
|
||||||
var file = files[0]; |
|
||||||
|
|
||||||
// Only process image files.
|
|
||||||
if (file.type.match('image.*')) { |
|
||||||
var reader = new FileReader(); |
|
||||||
|
|
||||||
reader.onload = function(event) { |
|
||||||
var img = new Image(); |
|
||||||
img.onload = function() { |
|
||||||
var MAXWidthHeight = 64; |
|
||||||
var ratio = MAXWidthHeight / Math.max(this.width, this.height); |
|
||||||
var canvas = document.createElement('canvas'); |
|
||||||
canvas.width = Math.round(this.width * ratio); |
|
||||||
canvas.height = Math.round(this.height * ratio); |
|
||||||
canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height); |
|
||||||
|
|
||||||
var imgURL = undefined; |
|
||||||
for (var quality = 1.0; (!imgURL || imgURL.length > 4096) && quality > 0.1; quality -= 0.01) { |
|
||||||
imgURL = canvas.toDataURL('image/jpeg', quality); |
|
||||||
} |
|
||||||
$('.profile-card-photo.forEdition').attr('src', imgURL); |
|
||||||
} |
|
||||||
img.src = event.target.result; |
|
||||||
} |
|
||||||
|
|
||||||
// Read in the image file as a data URL.
|
|
||||||
reader.readAsDataURL(file); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
function verifyUserAlreadyInBlockchain() { |
|
||||||
$.MAL.disableButton($('.submit-changes')); |
|
||||||
|
|
||||||
dumpPubkey(defaultScreenName, function(args, pubkey) { |
|
||||||
if (pubkey.length > 0) { |
|
||||||
follow('twister', true, function() { |
|
||||||
$.MAL.enableButton($('.submit-changes')); |
|
||||||
}); |
|
||||||
} else { |
|
||||||
if (!newUserWarnDisplayed) { |
|
||||||
alert(polyglot.t('user_not_yet_accepted')); |
|
||||||
newUserWarnDisplayed = true; |
|
||||||
} |
|
||||||
setTimeout(verifyUserAlreadyInBlockchain, 5000); |
|
||||||
} |
|
||||||
}, {}); |
|
||||||
} |
|
||||||
|
|
||||||
function localizePlaceholders() { |
|
||||||
$('.input-name').attr('placeholder', polyglot.t('Full name here')); |
|
||||||
$('.input-description').attr('placeholder', polyglot.t('Describe yourself')); |
|
||||||
$('.input-city').attr('placeholder', polyglot.t('Location')); |
|
||||||
$('.input-website').attr('placeholder', polyglot.t('website')); |
|
||||||
$('.input-tox').attr('placeholder', polyglot.t('Tox address')); |
|
||||||
$('.input-bitmessage').attr('placeholder', polyglot.t('Bitmessage address')); |
|
||||||
} |
|
||||||
|
|
||||||
$(localizePlaceholders); |
|
||||||
@ -1,108 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<title>Edit profile</title> |
|
||||||
<link id="stylecss" rel="stylesheet" href="css/style.css" type="text/css"> |
|
||||||
<link id="profilecss" rel="stylesheet" href="css/profile.css" type="text/css"> |
|
||||||
<script src="js/jquery-3.3.1.min.js"></script> |
|
||||||
<script src="js/jQueryPlugins.js"></script> |
|
||||||
<script src="js/jquery.jsonrpcclient.js"></script> |
|
||||||
<script src="js/jquery.storageapi.js"></script> |
|
||||||
<script src="js/options.js"></script> |
|
||||||
<script src="js/franc.js"></script> |
|
||||||
<script src="js/notify.js"></script> |
|
||||||
<script src="js/mobile_abstract.js"></script> |
|
||||||
<script src="js/twister_io.js"></script> |
|
||||||
<script src="js/polyglot.min.js"></script> |
|
||||||
<script src="js/interface_localization.js"></script> |
|
||||||
<script src="js/twister_user.js"></script> |
|
||||||
<script src="js/twister_formatpost.js"></script> |
|
||||||
<script src="js/twister_actions.js"></script> |
|
||||||
<script src="js/twister_network.js"></script> |
|
||||||
<script src="js/twister_following.js"></script> |
|
||||||
<script src="js/twister_newmsgs.js"></script> |
|
||||||
<script src="js/interface_common.js"></script> |
|
||||||
<script src="js/interface_profile-edit.js"></script> |
|
||||||
<script src="js/twister-crypto-bundle.js"></script> |
|
||||||
|
|
||||||
<link rel="shortcut icon" type="image/png" href="img/twister_mini.png" /> |
|
||||||
</head> |
|
||||||
|
|
||||||
<body> |
|
||||||
|
|
||||||
<!-- MENU SUPERIOR INIT --> |
|
||||||
<nav class="userMenu"> |
|
||||||
<ul> |
|
||||||
<li class="userMenu-home"><a href="home.html"> |
|
||||||
<span class="selectable_theme theme_original label">Home</span> |
|
||||||
<span class="selectable_theme theme_nin menu-news"></span> |
|
||||||
</a></li> |
|
||||||
<li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li> |
|
||||||
<li class="userMenu-config"> |
|
||||||
<a class="userMenu-config-dropdown"> |
|
||||||
<div class="config-menu dialog-modal"> |
|
||||||
<div class="mini-profile-info selectable_theme theme_original"> |
|
||||||
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div> |
|
||||||
<a href="#" class="mini-profile-name">Fulano da Silva</a> |
|
||||||
<span class="mini-profile-view">View</span> |
|
||||||
</div> |
|
||||||
<a class="dropdown-menu-item" href="options.html">Options</a> |
|
||||||
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a> |
|
||||||
<a class="dropdown-menu-item" href="network.html">Network config</a> |
|
||||||
</div> |
|
||||||
</a> |
|
||||||
</li> |
|
||||||
<li class="userMenu-dhtindicator selectable_theme theme_calm"><a href="network.html"></a></li> |
|
||||||
</ul> |
|
||||||
</nav> |
|
||||||
<!-- MENU SUPERIOR END --> |
|
||||||
|
|
||||||
|
|
||||||
<div class="wrapper"> |
|
||||||
<!-- ÁREA DE PROFILE PHOTO INIT --> |
|
||||||
<div class="profile-card forEdition"> |
|
||||||
<!-- Coloquei a imagem de fundo do card do usuário como background da div abaixo inline na tag para poder ser alterada dinamicamente --> |
|
||||||
<div class="profile-card-main" style="background: url(img/img.png) no-repeat center center #b43e34;"> |
|
||||||
<img class="profile-card-photo forEdition" src="img/genericPerson.png"/> |
|
||||||
<input type="text" class="input-name" placeholder="Full name here"/> |
|
||||||
<h2></h2> |
|
||||||
<textarea class="input-description" placeholder="Describe yourself"></textarea> |
|
||||||
<input type="text" class="input-city" placeholder="Location"/> |
|
||||||
<input type="text" class="input-website" placeholder="website"/> |
|
||||||
<input type="text" class="input-tox" placeholder="Tox address"/> |
|
||||||
<input type="text" class="input-bitmessage" placeholder="Bitmessage address"/> |
|
||||||
</div> |
|
||||||
<div class="profile-edition-buttons"> |
|
||||||
<button class="toggle-priv-key" style="float: left" href="#">Secret Key</button> |
|
||||||
<button class="cancel-changes" href="#">Cancel</button> |
|
||||||
<button class="submit-changes" href="#">Save Changes</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div style="font-size:80%;text-align: center;" class="secret-key-container"> |
|
||||||
<span class="label">Secret key:</span> <span class="secret-key"></span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<input type="file" id="avatar-file" name="avatar_files" style="display:none;"/> |
|
||||||
|
|
||||||
<div id="templates" style="display:none;"> |
|
||||||
<div class="prompt-wrapper"> |
|
||||||
<div class="modal-header"> |
|
||||||
<h3></h3> |
|
||||||
<span class="modal-close prompt-close">×</span> |
|
||||||
</div> |
|
||||||
<div class="modal-content"></div> |
|
||||||
<div class="modal-blackout"></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div id="confirm-popup-template"> |
|
||||||
<div class="message"></div> |
|
||||||
<div class="modal-buttons"> |
|
||||||
<button class="confirm"></button> |
|
||||||
<button class="cancel"></button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue