mirror of
https://github.com/twisterarmy/twister-html.git
synced 2025-01-12 16:07:59 +00:00
initial very basic post preview
This commit is contained in:
Simon Grim
parent
a245bc449f
commit
3b696e336a
@ -206,6 +206,12 @@
|
||||
<li class="ancestor module post">
|
||||
</li>
|
||||
|
||||
<div id="post-preview-template">
|
||||
<div id="post-preview">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<li id="post-template" class="module post" data-time="">
|
||||
<div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
|
||||
data-screen-name="" data-id="" data-text="" data-text-mentions="">
|
||||
|
||||
@ -298,6 +298,11 @@
|
||||
<li class="ancestor module post">
|
||||
</li>
|
||||
|
||||
<div id="post-preview-template">
|
||||
<div id="post-preview">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li id="post-template" class="module post" data-time="">
|
||||
<div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
|
||||
data-screen-name="" data-id="" data-text="" data-text-mentions="">
|
||||
|
||||
@ -578,6 +578,15 @@ function composeNewPost(e, postAreaNew) {
|
||||
postAreaNew.find('textarea:last').focus();
|
||||
}
|
||||
|
||||
function posPostPreview(event) {
|
||||
var textArea = $(event.target);
|
||||
var postPreview = textArea.siblings('#post-preview');
|
||||
if (!postPreview.length)
|
||||
postPreview = $('#post-preview-template').children().clone();
|
||||
postPreview.html(htmlFormatMsg(textArea[0].value, []))
|
||||
textArea.before(postPreview);
|
||||
}
|
||||
|
||||
// Reduz Área do Novo post
|
||||
function unfocusThis() {
|
||||
$(this).removeClass('open');
|
||||
@ -680,6 +689,8 @@ function replyTextInput(event) {
|
||||
textArea.caret(caretPos);
|
||||
}
|
||||
}
|
||||
|
||||
textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, []));
|
||||
}
|
||||
|
||||
function getPostSplitingPML() {
|
||||
@ -1372,6 +1383,7 @@ function initInterfaceCommon() {
|
||||
.clickoutside(unfocusThis)
|
||||
.children('textarea')
|
||||
.on({
|
||||
'focus': posPostPreview,
|
||||
'input': replyTextInput, // input event fires in modern browsers (IE9+) on any changes in textarea (and copypasting with mouse too)
|
||||
'input focus': replyTextUpdateRemaining,
|
||||
'keyup': replyTextKeySend
|
||||
|
||||
@ -26,6 +26,7 @@ function initializeTwister( redirectNetwork, redirectLogin, cbFunc, cbArg ) {
|
||||
// reply text counter both newmsg and dmchat
|
||||
$('.post-area-new textarea')
|
||||
.off('input keyup')
|
||||
.on('focus', posPostPreview)
|
||||
.on('keyup', replyTextInput)
|
||||
.on('keyup', function() { replyTextUpdateRemaining(this); })
|
||||
;
|
||||
|
||||
121
tmobile.html
121
tmobile.html
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>twister mobile</title>
|
||||
|
||||
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no"/>
|
||||
|
||||
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
|
||||
@ -38,8 +38,8 @@
|
||||
<script src="js/jpeg_encoder_basic.js"></script>
|
||||
|
||||
<link rel="icon" type="image/png" href="img/twister_mini.png" />
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
.ui-li-heading { margin: 0em 0 0.6em 0; }
|
||||
@ -61,22 +61,22 @@
|
||||
}
|
||||
img.size24 {width: 24px; height: 24px;}
|
||||
#profile-edit img.avatar {display:block; margin-left: auto; margin-right: auto; width: 64px; height: 64px;}
|
||||
|
||||
|
||||
.ui-listview .post a{ color: #0030ff; }
|
||||
|
||||
|
||||
#post li.original { background: #fff; /*top:5px; border-width:5px !important;*/}
|
||||
#post li.related .post-interactions { display:none; }
|
||||
|
||||
|
||||
#new-user-modal .text { margin: 0 0 15px 0; }
|
||||
#new-user-modal .emphasis { font-size: 18px; text-align: center; }
|
||||
#new-user-modal .secret-key { font-weight: bold; word-break:break-all; }
|
||||
#profile-edit .secret-key { word-break:break-all; }
|
||||
|
||||
|
||||
.header {position:fixed;z-index:10;top:0;width:100%}
|
||||
.content {padding:15px 20px 20px 20px;}
|
||||
.footer {position:fixed;z-index:10;bottom:0;width:100%}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div id="index" data-role="page">
|
||||
@ -94,7 +94,7 @@
|
||||
<h1 class="rtitle">twister login</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content" style="">
|
||||
<div class="content" data-role="content" style="">
|
||||
<div class="login">
|
||||
<div class="module">
|
||||
<span> Existing local users </span>
|
||||
@ -143,7 +143,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -153,7 +153,7 @@
|
||||
</div>
|
||||
|
||||
<div id="home" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
|
||||
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
|
||||
<a data-role="button" data-icon="refresh" class="timeline-refresh" rel="external">
|
||||
@ -164,19 +164,19 @@
|
||||
@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="rtitle"></h1>
|
||||
|
||||
<a href="#newmsg" class="ui-btn-right" style="">New post</a>
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content">
|
||||
<div class="content" data-role="content">
|
||||
<div class="timeline">
|
||||
<ul class="posts" data-role="listview">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#login" data-role="button">Login</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -186,7 +186,7 @@
|
||||
</div>
|
||||
|
||||
<div id="post" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
|
||||
<a href="#search" class="ui-btn-left" style="">Search</a>
|
||||
<h1 class="rtitle">twister</h1>
|
||||
@ -197,7 +197,7 @@
|
||||
<ul class="posts" data-role="listview">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -208,7 +208,7 @@
|
||||
|
||||
|
||||
<div id="mentions" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
|
||||
<a href="#search" class="ui-btn-left" style="">Search</a>
|
||||
<h1 class="rtitle"></h1>
|
||||
@ -219,7 +219,7 @@
|
||||
<ul class="posts" data-role="listview">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -229,7 +229,7 @@
|
||||
</div>
|
||||
|
||||
<div id="hashtag" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false" data-nobackbtn="true">
|
||||
<a href="#search" class="ui-btn-left" style="">Search</a>
|
||||
<h1 class="rtitle"></h1>
|
||||
@ -240,7 +240,7 @@
|
||||
<ul class="posts" data-role="listview">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -252,16 +252,16 @@
|
||||
|
||||
|
||||
<div id="newmsg" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
|
||||
<h1 class="rtitle">New post</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content">
|
||||
|
||||
|
||||
<div class="tbox" style="">
|
||||
<div style="padding-left:5px; width:300px; margin-bottom: 30px;">
|
||||
|
||||
|
||||
<form class="post-area-new open">
|
||||
<textarea placeholder="New Post..." style="height:85px; width:270px;"></textarea>
|
||||
<div class="post-area-extras">
|
||||
@ -277,7 +277,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -317,7 +317,7 @@
|
||||
|
||||
|
||||
<div id="profile" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#search" class="ui-btn-left" style="">Search</a>
|
||||
<h1 class="rtitle">Profile</h1>
|
||||
@ -325,7 +325,7 @@
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content">
|
||||
|
||||
|
||||
<div class="profile-card" data-screen-name="">
|
||||
<!-- Coloquei a imagem de fundo do card do usuário como background da div
|
||||
abaixo inline na tag para poder ser alterada dinamicamente
|
||||
@ -351,7 +351,7 @@
|
||||
<a data-role="button" data-mini="true" class="mentions-from-user" href="#mentions">Mentions</a>
|
||||
<div> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<ul class="posts postboard-posts" data-role="listview">
|
||||
</ul>
|
||||
@ -367,7 +367,7 @@
|
||||
</div>
|
||||
|
||||
<div id="profile-edit" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#login" class="ui-btn-left" style="">Login</a>
|
||||
<h1 class="rtitle">Edit profile</h1>
|
||||
@ -407,7 +407,7 @@
|
||||
|
||||
|
||||
<div id="following" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#search" class="ui-btn-left" style="">Search</a>
|
||||
<h1 class="rtitle">Following</h1>
|
||||
@ -455,7 +455,7 @@
|
||||
|
||||
|
||||
<div id="network" data-role="page">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#login" class="ui-btn-left" style="">Login</a>
|
||||
<h1 class="rtitle">twister</h1>
|
||||
@ -475,7 +475,7 @@
|
||||
<div> </div>
|
||||
</ul>
|
||||
<button class="terminate-daemon">Terminate Daemon</button>
|
||||
|
||||
|
||||
<h3> Detailed information </h3>
|
||||
<ul>
|
||||
<li class="connections">
|
||||
@ -550,7 +550,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -564,11 +564,11 @@
|
||||
<h1 class="rtitle">Direct Messages</h1>
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content">
|
||||
<div class="content" data-role="content">
|
||||
<ul class="direct-messages-thread" data-role="listview">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -585,7 +585,7 @@
|
||||
<div class="content" data-role="content">
|
||||
<ul class="direct-messages-list" data-role="listview">
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="dm-form" style="padding:15px 20px 20px 20px;">
|
||||
<form class="post-area-new open">
|
||||
<textarea placeholder="New direct message..."></textarea>
|
||||
@ -596,8 +596,8 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -629,8 +629,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#home" data-role="button">Home</a>
|
||||
<a href="#network" data-role="button">Network</a>
|
||||
@ -650,7 +650,7 @@
|
||||
Please do not close this window, this might take a few minutes.
|
||||
</div>
|
||||
<div class="text emphasis">
|
||||
Your secret key is:
|
||||
Your secret key is:
|
||||
<div class="secret-key"></div>
|
||||
</div>
|
||||
<div class="text">
|
||||
@ -676,25 +676,25 @@
|
||||
|
||||
|
||||
<div id="dialog_page" data-role="page" style="background:gray;">
|
||||
|
||||
|
||||
<div class="myheader" data-role="header" data-position="fixed" data-tap-toggle="false">
|
||||
<a class="back-btn" href="#home" data-icon="arrow-l" data-rel="back">Back</a>
|
||||
|
||||
|
||||
<h1 class="page-title"></h1>
|
||||
</div>
|
||||
|
||||
<div class="content" data-role="content" style="">
|
||||
|
||||
|
||||
<div class="ui-body-c" style="padding:10px; border-radius: 10px;">
|
||||
<div class="dialog-title" style="font-size: 105%; font-weight:bold; margin-bottom:10px; text-align:center;"></div>
|
||||
<div class="dialog-description" style="width:100%; margin-bottom:20px; text-align:center;"></div>
|
||||
|
||||
|
||||
<div class="dialog-buttons" style="width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
|
||||
<a href="#" data-role="button" class="logoutButton">Logout</a>
|
||||
</div>
|
||||
<a href="#" data-role="button" class="logoutButton">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="anywhere"></div>
|
||||
@ -717,7 +717,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</li> <!-- post-template -->
|
||||
|
||||
|
||||
<div id="post-preview-template">
|
||||
<div id="post-preview">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li id="post-template-post" class="module post" data-time="">
|
||||
<img class="avatar" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
|
||||
<div class="post-data" data-userpost="" data-content_to_rt="" data-content_to_sigrt=""
|
||||
@ -755,20 +760,20 @@
|
||||
</div> <!-- expanded-content -->
|
||||
</div> <!-- post-data -->
|
||||
</li> <!-- post-template -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- template for user links in message (open profile modal) -->
|
||||
<a id="msg-user-link-template" class="open-profile-modal"></a>
|
||||
<!-- template for user links in message (open profile modal) -->
|
||||
<a id="external-page-link-template" rel="nofollow" target="_blank"></a>
|
||||
<!-- template for user links in message (open profile modal) -->
|
||||
<a id="hashtag-link-template" class="open-hashtag-modal"></a>
|
||||
|
||||
|
||||
<!-- template para ir dentro de avatar-row -->
|
||||
<a id="avatar-row-template" class="open-profile-modal" href="">
|
||||
<img class="avatar size24" src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- template for dm-snippet (dm threads list) -->
|
||||
<li id="dm-snippet-template" class="module post message" data-icon="arrow-r">
|
||||
<a class="dm-chat-link post-photo" href="#dmchat">
|
||||
@ -782,7 +787,7 @@
|
||||
<p class="post-text"></p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<!-- template for each dm (chat window) -->
|
||||
<li id="dm-chat-template" class="module post message">
|
||||
<h4 class="post-photo">
|
||||
@ -791,9 +796,9 @@
|
||||
</h4>
|
||||
<p class="post-text no-ellipsis"></p>
|
||||
</li>
|
||||
|
||||
|
||||
</div> <!-- templates -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user