Duplicating the "Reputation/Like" function onto the mobile version
4 posters
Page 1 of 1
Duplicating the "Reputation/Like" function onto the mobile version
Hi all,
www.bellsareringing.forumotion.com
phpBB3
I have a LIKE function that counts points toward reputation. Feel free to view the page but it looks like this:
Javascript and CSS changes made all that possible.
But...how can I have this showing on the mobile version? A huge chunk of my users have moved over to the mobile version and now the LIKE/Reputation feature is being neglected. I figured there'd be more to it than simply copying the CSS code into the mobile section of the CSS.
I was hoping to get it to look like this (photoshopped!).
Is it possible?
Thanks,
Troy.
www.bellsareringing.forumotion.com
phpBB3
I have a LIKE function that counts points toward reputation. Feel free to view the page but it looks like this:
Javascript and CSS changes made all that possible.
But...how can I have this showing on the mobile version? A huge chunk of my users have moved over to the mobile version and now the LIKE/Reputation feature is being neglected. I figured there'd be more to it than simply copying the CSS code into the mobile section of the CSS.
I was hoping to get it to look like this (photoshopped!).
Is it possible?
Thanks,
Troy.
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Re: Duplicating the "Reputation/Like" function onto the mobile version
need a test account for your forum so I can see
Re: Duplicating the "Reputation/Like" function onto the mobile version
username: Test Testicles
p/w: testing
p/w: testing
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Re: Duplicating the "Reputation/Like" function onto the mobile version
Do you need the CSS and javascript?
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Re: Duplicating the "Reputation/Like" function onto the mobile version
I looked up and unfortunately I am not much familiar with JavaScript and mobile theme.
Re: Duplicating the "Reputation/Like" function onto the mobile version
I appreciate you looking into.it. is anyone on the forumotion team good at this sort of stuff?
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Re: Duplicating the "Reputation/Like" function onto the mobile version
Does it work in the classic version?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: Duplicating the "Reputation/Like" function onto the mobile version
Yes brilliantly. See the screenshot in the OP
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Re: Duplicating the "Reputation/Like" function onto the mobile version
I'm not on my computer atm to give you the CSS and Java but this is the topic I got help from @Ange Tuteur
https://help.forumotion.com/t135424-reputation-button-move
https://help.forumotion.com/t135424-reputation-button-move
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Re: Duplicating the "Reputation/Like" function onto the mobile version
Aside from me, Luffy is starting to get the hang of things, although I'm not sure what his field of expertise is. I'm no longer on the team, so I don't count anymore.troyeccles wrote:I appreciate you looking into.it. is anyone on the forumotion team good at this sort of stuff?
In regards to your question you need to modify the templates to install the default reputation buttons, after that you can fashion any rep script you have to work with the version mobile. Go to Admin Panel > Display > Templates > Version Mobile > viewtopic_body
Find :
- Code:
<div class="content">
Replace by :
- Code:
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
<div class="content">
Save and publish, then you can use this CSS to style the default voting system :
- Code:
#mpage-body .vote {
float:right;
text-align:center;
}
Voilà ! Reputation installed on the mobile version.
Re: Duplicating the "Reputation/Like" function onto the mobile version
Hi Ange.
Didn't work.
I've replaced the <div class="content"> with the script you've given, I've published it and added the CSS. No change.
It hasn't upset the page either (classic version or mobile) so it's all good on that front. I have modified the original mobile version so maybe I've added code that's conflicting with yours???
Full CSS and full > Version Mobile > viewtopic_body is below on the CSS the vote button code is right at the top, the mobile addition is labelled in the mobile section near the bottom.
CSS:
Javascript:
Didn't work.
I've replaced the <div class="content"> with the script you've given, I've published it and added the CSS. No change.
It hasn't upset the page either (classic version or mobile) so it's all good on that front. I have modified the original mobile version so maybe I've added code that's conflicting with yours???
Full CSS and full > Version Mobile > viewtopic_body is below on the CSS the vote button code is right at the top, the mobile addition is labelled in the mobile section near the bottom.
CSS:
- Code:
/*Vote Button*/
.vote .vote-button, .vote-no-bar {
display:none;
}
.vote .vote-button:first-child {
display:block;
}
.vote .vote-button a {
background-image: url('http://i86.servimg.com/u/f86/19/33/21/71/blue_l10.png') !important;
background-repeat:no-repeat;
padding-right: 50px;
padding-top: 50px;
font-size:0 !important;
}
.vote { width:auto }
/*Vote System*/
.VCount:before{
content: url('http://i86.servimg.com/u/f86/19/33/21/71/blue_l10.png');
opacity:1;
filter:alpha(opacity=50);
}
.VCount{
color:#00;
font-size:12px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.3);
font-family: Verdana,Arial,Helvetica,sans-serif;
cursor:default;
}
.VPlus{
color:#00 !important;
font-size:15px;
font-weight:bold;
text-shadow:1px 1px 0px rgba(0,120,0, 0.1);
font-family: Verdana,Arial,Helvetica,sans-serif;
position:relative;
left:9px;
z-index:1;
}
.vote{
opacity:0;
filter:alpha(opacity=0);
}
/*Header Logo*/
#logo img { width:100%; }
/*page width*/
#wrap { width:97% !important; }
body {
@media (max-width: 700px)}
/*Toolbar colour*/
#fa_toolbar, #fa_toolbar_hidden {background-color: #4A1D1D !important;}
/*Hide Search Bar*/
#page-header #search-box { display:none }
/*Icon Spacing ToolBar*/
.fa_network {
margin:0 5px;
max-height:40px;
max-width:40px;
}
#fa_toolbar { height:50px ! important }
#fa_toolbar { width : 100% ! Important }
/* button image */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
/* drop down input */
#fa-mention {
background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
padding-left:22px;
}
/*Profile Box*/
.postprofile {
text-align:center;
background:#;
border:1px solid #CCC;
border-radius:3px;
margin: 10px 0px 0px;
padding: 10px 3px 3px;
box-shadow: 01px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0);
min-height: 80px;
position: relative;
max-width: 277px;
word-wrap: break-word;
}
.postprofile dd, .postprofile dt { margin-left:0 }
blockquote blockquote {
background-color: #ECECEC;
font-size: 1.0em;
margin: 0.5em 1px 0pt 15px;}
.postprofile dd, .postprofile dt { margin-left:0 }
/* offline image */
.post .postprofile {
background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n33.png');
background-repeat:no-repeat;
background-position:center 0px;
}
/* online image */
.post.online .postprofile {
background-image:url('http://i86.servimg.com/u/f86/18/45/72/48/tbar_n32.png');
background-repeat:no-repeat;
background-position:center 0px;
}
.postprofile .label {
float: left;
margin-left: -3px;
margin-right: 3px;
width: 50%;
text-align: right;
}
.postprofile .label, .postprofile .label span {
font-weight: 700;
color: #39C !important;
}
* {
margin: 0px;
padding: 0px;}
.postprofile dd {
color: #333;
text-align: left;
}
.postprofile dd, .postprofile dt {
line-height: 1.2em;}
.postprofile dd:last-child, .postprofile dt + dd {
text-align: center;}
.postprofile { padding-top:70px }
#content-container div#right {
float: right;
overflow: hidden;
width: 220px;
padding-top: 46px;
}
li.row { position:relative }
/*Last Post Icon location*/
.lastpost > span > a:last-child, .lastpost > div > span > a, .last-post-icon {
position:absolute;
right:10px;
top:10%;
}
ul.topics dd.dterm, ul.topics dt {
display: block;
float: left;
padding-left: 55px;
width: 50%;
}
.dterm a[href$="?view=newest"] { display:none; }
.postprofile dt img {
max-height:125px;
max-width:125px;
}
#login_popup{background-color: #07005e;max-height:600px;colour:#d4c196;border:1px solid white;border-radius:5px;padding:25px;}
ul.linklist li.rightside a {
display: inline-block !important;
}
div#main-content ul.linklist {
display: none !important;
}
/* Spacing between topic and body text */
.postbody .content {
margin-top:10px; !important;
}
/* Topic border width */
.forabg {
padding: 1px;
}
/* Footer width for all devices */
.floating_foot_list {
float: left;
width: 25%;
min-width: 320px;
}
/* Customised Quote box */
blockquote div { margin-left: 3px!important; }
blockquote blockquote { margin: 0.5em 10px 0pt 10px!important; }
blockquote, .codebox {
background:#FFF;
border:1px solid #A0C9E3;
border-bottom-width:1px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 5px;
padding-left: 0px !important;
}
blockquote cite, .codebox dt {
color:#FFF;
background:#A0C9E3;
border-radius:1px;
padding:6px;
}
blockquote cite, .cite_content {
border:none;
padding:5px;
border-radius:1px;
margin-bottom:10px;
}
/* Customised Spoiler box */
dl.codebox {
background:#A0C9E3;
border:1px solid #A0C9E3;
border-radius:1px;
}
dl.codebox dt {
color:#FFF;
padding:1px;
}
dl.codebox dd, .spoiler_content {
color:#666;
background:#FFF;
border:none;
padding:6px;
border-radius:1px;
}
/* THEME MOBILE */
#mpage-body {
background:#EDEDED;
}
#mpage-body .post .content a {
color:#292929;
text-decoration:underline;
}
/* POSTS */
#mpage-body .post .content a:hover { color:#333 }
#mpage-body .post {
color:#525252;
background:#EDEDED;
margin:6px 3px;
border-radius:3px;
}
#mpage-body .postbody .post_header {
color:#FFF;
background:#4A1D1D;
border-radius:3px 3px 0 0;
}
.avatarMobile {
background:#EDEDED;
border:1px solid #555;
border-radius:40px;
height:40px;
width:40px;
display:inline-block;
vertical-align:bottom;
margin-bottom:-0.1em;
overflow:hidden;
position: relative;
}
.avatarMobile img {
width:40px;
height:40px;
}
#mpage-body .postbody:after, #mpage-body .postbody::after { background:none }
/* HEADER */
.mobile_title {
background:none;
border:none;
}
.mobile_title.application_header {
background:#FFF;
border-bottom:1px solid #CCC;
}
.mobile_title_content {
color:#333;
text-shadow:none;
}
/* FORUMS */
.mobile_set {
color:#FFF;
background:#4A1D1D;
border:none;
border-radius:3px;
margin:6px 3px;
}
.mobile_set_content {
text-shadow:none;
line-height:16px;
}
.mobile_item {
background:#A0C9E3;
border:none;
border-radius:3px;
margin:6px 3px;
padding:0;
overflow:hidden;
}
.mobile_item:hover, .mobile_item_content:hover {
background-color:#333;
}
.mobile_item_content {
padding:6px 0;
background-position:-2px 50%;
}
.mobile_subtitle, .mobile_comment {
color:#FFF;
text-shadow:none;
}
/* BUTTONS */
.mobile_prev_button, .mobile_next_button, .defaultBtn {
background:#A0C9E3;
border:none;
border-radius:3px;
}
.mobile_prev_button p, .mobile_next_button p {
color:#FFF;
text-shadow:none;
}
.mobile_prev_button:hover, .mobile_next_button:hover, .defaultBtn:hover { background:#333 }
/* INPUT FIELDS */
.inputTxtContainer {
padding:0;
border:none;
}
.inputTxtContainer .inputTxt, #mpage-body textarea {
color:#666;
border:1px solid #CCC !important;
border-radius:3px;
padding:5px;
}
.inputTxtContainer .inputTxt:hover, #mpage-body textarea:hover { border-color:#EDEDED !important }
.inputTxtContainer .inputTxt:focus, #mpage-body textarea:focus { border-color:#333 !important }
/* POST BOXES */
#mpage-body blockquote, #mpage-body .codebox, #mpage-body .spoiler {
color:#666;
background:#FFF;
border:1px solid #A0C9E3;
border-radius:3px;
display:block;
}
#mpage-body blockquote cite, #mpage-body .codebox p, #mpage-body .spoiler_title {
color:#FFF;
background:#A0C9E3;
border-radius:3px;
display:block;
float:none;
padding:0.5em;
margin-bottom:0.5em;
}
#mpage-body .codebox code, #mpage-body .spoiler_content {
color:#EDEDED;
background:#EEE;
border:1px solid #CCC;
border-radius:3px;
padding:0.5em;
}
/* ERROR MESSAGE */
.errorMobile {
color:#FFF;
font-size:0.8em;
font-weight:bold;
background:#E53;
padding:16px 5px;
}
#mpage-body .poll .fieldset { border:none }
/* NEW TOPIC */
#mobileActionBar {
background:#8C5;
font-weight:bold;
}
#mobileActionBar .mobileActionLabel {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/add10.png');
text-transform:uppercase;
font-size:1em;
}
/* FORUM IMAGES */
.mobile_item_link_content {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/chevro10.png');
background-position:99% 50%;
}
.cat_no_new, .cat_new {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/folder10.png');
}
.forum_no_new, .forum_new, .folder_new, .folder_no_new, .folder_hot, .folder_hot_new {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}
.cat_locked, .forum_locked, .folder_locked, .folder_locked_new {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}
.folder_global, .folder_global_new, .folder_announce, .folder_announce_new {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}
.folder_sticky, .folder_sticky_new {
background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png');
}
/* NEW POST COLOR */
.cat_new, .forum_new, .folder_new, .folder_locked_new, .folder_global_new, .folder_announce_new, .folder_hot_new, .folder_sticky_new {
background-color:#8C5;
}
.mobile_image { max-width:99% }
#mpage-body .post embed {
max-width:99% !important;
height:auto !important;
}
/* Mobile Reputation look */
#mpage-body .vote {
float:right;
text-align:center;
}
/* LAST POST AVATAR */
#fa_popup_content > div.post .postprofile dt > a, #main-content > div.post .postprofile dt > a,
#userAvatar, .avatar, .lastpost-avatar, .mod-login-avatar dt, .postprofile dt > img,
td.avatar-mini img {
background: #ebebeb;
border-radius: 100px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 -1px 1px rgba(0, 0, 0, 0.4);
display: inline-block;
height: 100px;
margin: 0px 10px;
overflow: hidden;
padding: 5px;
width: 100px
}
#fa_popup_content > div.post .postprofile dt img, #main-content > div.post .postprofile dt img,
#userAvatar img, .avatar img, .lastpost-avatar img, .mod-login-avatar dt > img,
td.avatar-mini img {
border-radius: 100px;
height: 100px;
width: 100px
}
.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
height: 34px;
width: 34px
}
/*
** The Bells Are Ringing
** May 2016
** By Troy Eccles
**/
Javascript:
- Code:
<style type="text/css">.mobile-actions{float:right;padding-top:3px}
.mobile-actions li{float:left;list-style:none}
#mobile_editor {text-align:center}
#text_box {padding:6px 5%}
#mobile_editor textarea {width:100%;height:100px}
#post_status {color:#000;background:#FFF;border:1px solid #2F6BC2;border-left-width:4px;margin:4px auto;padding:4px;width:90%}
#post_status.post_progress {background-color:#FFE;border-color:#990}
#post_status.post_done {background-color:#EFE;border-color:#090}
#post_status.post_fail {background-color:#FEE;border-color:#C33}
blockquote {display:block}</style>
<script type="text/javascript">
//<![CDATA[
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
try
{
var regId = parseInt(id, 10);
if( isNaN(regId) ) { regId = 0; }
if( regId > 0)
{
$('.post--' + id).toggle(0, function()
{
if( $(this).is(":visible") )
{
$('#hidden-title--' + id).html(hiddenMsgLabel.visible);
}
else
{
$('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
}
});
}
}
catch(e) { }
return false;
};
//]]>
</script>
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<div id="{postrow.U_POST_ID}">
<!-- BEGIN hidden -->
<div class="post {postrow.hidden.ROW_CLASS}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<p style="text-align:center">{postrow.hidden.MESSAGE}</p>
</div>
<!-- END hidden -->
<!-- BEGIN displayed -->
<div id="p{postrow.displayed.U_POST_ID}" class="style2 post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<div class="postbody">
<div class="post_header"><span class="avatarMobile">{postrow.displayed.POSTER_AVATAR}</span> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</div>
<ul class="mobile-actions">
<li>{postrow.displayed.QUOTE_IMG}</li>
<li>{postrow.displayed.EDIT_IMG}</li>
<li>{postrow.displayed.DELETE_IMG}</li>
</ul>
<br class="clear"/>
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
<div class="content">
<div>{postrow.displayed.MESSAGE}</div>
<!-- BEGIN switch_attachments -->
<div class="attachbox">
<p class="title">{postrow.displayed.switch_attachments.L_ATTACHMENTS}</p>
<dl class="attachments">
<!-- BEGIN switch_post_attachments -->
<dt>
<!-- BEGIN switch_dl_att -->
<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
<!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att -->
{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
<!-- END switch_no_dl_att -->
</dt>
<dd>
<!-- BEGIN switch_no_comment -->
<p>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</p>
<!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att -->
<p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
<!-- END switch_no_dl_att -->
<p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
</dd>
<!-- END switch_post_attachments -->
</dl>
</div>
<!-- END switch_attachments -->
</div>
{postrow.displayed.EDITED_MESSAGE}
</div>
</div>
<!-- BEGIN first_post_br -->
<hr id="first-post-br" />
<!-- END first_post_br -->
<!-- END displayed -->
</div>
<!-- END postrow -->
<!-- BEGIN topicpagination -->
{PAGINATION}
<!-- END topicpagination -->
{INLINE_MESSAGE}
{QUICK_REPLY_FORM}
<script type="text/javascript">//<![CDATA[
(function() {
'ForumActif Mobile Actions';
window.$FAMA = {
lang : {
title_reply : '<b>Post a reply</b>',
title_edit : '<b>Edit post</b>',
status_progress : 'Sending, please wait...',
status_done : function(url) {
return 'Your message has been submitted successfully. Please <a href="' + url + '">click here</a> if you\'re not redirected.'
},
status_fail : 'An error has occurred, please try again later.',
delete_warning : 'Are you sure you want to delete this post ?',
delete_done : 'The message has been deleted successfully.',
delete_fail : 'The message could not be deleted, please try again later.',
textarea_placeholder : 'Message body..',
button_submit : 'Submit',
fatal_error : 'In case of error : ',
button_force : 'Force submit'
},
node : null,
id : window.location.href.replace(/.*?\/t(\d+).*/, '$1'),
store : new Object(),
encode : function(string) {
return encodeURIComponent(escape(this.message.value).replace(/%u[A-F0-9]{4}/g, function(match) {
return '&#' + parseInt(match.substr(2), 16) + ';';
})).replace(/%25/g, '%');
},
create : function(node, href) {
var form = document.createElement('form');
form.action = '/post';
form.method = 'post';
form.name = 'post';
form.id = 'mobile_editor';
form.innerHTML = '<div id="editor_title" class="post_header"></div><div id="text_box"><textarea placeholder="' + $FAMA.lang.textarea_placeholder + '" name="message"></textarea></div><div><input type="submit" value="' + $FAMA.lang.button_submit + '" name="post" class="defaultBtn"/><div id="post_status" style="display:none"></div></div><div id="mobile_data" style="display:none"></div>';
form.onsubmit = function(e) {
e.preventDefault();
try {
var t = this,
data = $(t).serialize() + '&post=1',
status = document.getElementById('post_status'),
charSet = document.characterSet || document.charset;
if (charSet != 'UTF-8') {
if (t.message) data = data.replace(/message=.*?&/, 'message=' + $FAMA.encode(t.message.value) + '&');
if (t.subject) data = data.replace(/subject=.*?&/, 'subject=' + $FAMA.encode(t.subject.value) + '&');
}
t.post.style.display = 'none';
status.style.display = 'block';
status.className = 'post_progress';
status.innerHTML = $FAMA.lang.status_progress;
$.post('/post', data, function(d) {
var redir = d.match(/.*content="\d;url=(.*?)".*/i, '$1'),
url = (redir && redir[1]) ? redir[1].replace(/&/g, '&') : window.location.pathname + (/mode=reply/.test(data) ? '?view=newest' : '');
status.className = 'post_done';
status.innerHTML = $FAMA.lang.status_done(url);
window.setTimeout(function() {
window.location.href = url;
}, 1500);
}).fail(function() {
status.className = 'post_fail';
status.innerHTML = $FAMA.lang.status_fail;
t.post.style.display = '';
});
} catch (err) {
var status = document.getElementById('post_status');
this.onsubmit = null;
status.innerHTML = err + '<div>' + $FAMA.lang.fatal_error + '<input type="submit" name="post" value="' + $FAMA.lang.button_force + '" /></div>';
status.className = 'post_fail';
status.style.display = 'block';
}
};
$FAMA.node = form;
$FAMA.change(node, href);
},
change : function(node, href) {
node.appendChild($FAMA.node);
if ($FAMA.node.mode) {
var oldid = document.getElementById('old_post_id');
if ($FAMA.node.mode.value == 'reply' && oldid) {
if (!$FAMA.store['post_' + oldid.value]) $FAMA.store['post_' + oldid.value] = new Object();
$FAMA.store['post_' + oldid.value].reply = $FAMA.node.message.value;
}
else if ($FAMA.node.mode.value == 'editpost' && $FAMA.node.p) {
if (!$FAMA.store['post_' + $FAMA.node.p.value]) $FAMA.store['post_' + $FAMA.node.p.value] = new Object();
$FAMA.store['post_' + $FAMA.node.p.value].editpost = $FAMA.node.message.value;
}
}
$FAMA.node.message.value = '';
var mode = href.replace(/.*?mode=(.*)/, '$1'),
pid = href.replace(/.*?p=(\d+).*/, '$1'),
data = document.getElementById('mobile_data'),
title = document.getElementById('editor_title');
if (mode == 'quote') {
if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].reply) $FAMA.node.message.value = $FAMA.store['post_' + pid].reply;
title.innerHTML = $FAMA.lang.title_reply;
data.innerHTML = '<input id="old_post_id" type="hidden" value="' + pid + '"/><input type="hidden" name="mode" value="reply"/><input type="hidden" name="t" value="' + $FAMA.id + '"/>';
} else {
if ($FAMA.store['post_' + pid] && $FAMA.store['post_' + pid].editpost) $FAMA.node.message.value = $FAMA.store['post_' + pid].editpost;
title.innerHTML = $FAMA.lang.title_edit;
data.innerHTML = '<input type="hidden" name="mode" value="editpost"/><input type="hidden" name="p" value="' + pid + '"/>';
}
$.get(href, function(d) {
var titre = $('input[name="subject"]', d)[0],
editer = $('input[name="edit_reason"]', d)[0];
$('input[name="auth[]"]', d).appendTo(data);
if (!$FAMA.node.message.value) $FAMA.node.message.value = $('#text_editor_textarea', d)[0].value;
if (titre && titre.value) data.appendChild(titre);
if (editer && editer.value) data.appendChild(editer);
});
}
};
for (var a = document.getElementsByTagName('A'), i = 0, j = a.length; i < j; i++) {
if (/mobile-actions/.test(a[i].parentNode.parentNode.className)) {
if (/mode=(?:quote|editpost)/.test(a[i].href)) {
a[i].onclick = function(e) {
var node = this.parentNode.parentNode.parentNode, href = this.href;
e.preventDefault();
$FAMA.node ? $FAMA.change(node, href) : $FAMA.create(node, href);
};
} else if (/mode=delete/.test(a[i].href)) {
a[i].onclick = function(e) {
var del = confirm($FAMA.lang.delete_warning);
if (del) {
$.post('/post', 'p=' + this.href.replace(/.*?p=(\d+).*/, '$1') + '&mode=delete&confirm=1', function(d) {
alert($FAMA.lang.delete_done);
window.location.reload();
}).fail(function() {
alert($FAMA.lang.delete_fail);
});
}
e.preventDefault();
};
}
}
}
})();
//]]></script>
troyeccles- Forumember
- Posts : 301
Reputation : 5
Language : English
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum