The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Duplicating the "Reputation/Like" function onto the mobile version

View previous topic View next topic Go down

Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 3rd 2016, 5:24 am

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.

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 6th 2016, 1:33 am

Bump

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by Rhino.Freak on June 6th 2016, 2:47 am

need a test account for your forum so I can see Smile

Rhino.Freak
Helper
Helper

Male Posts : 1246
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 6th 2016, 3:27 am

username: Test Testicles
p/w: testing

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 6th 2016, 3:28 am

Do you need the CSS and javascript?

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by Rhino.Freak on June 7th 2016, 11:50 am

I looked up and unfortunately I am not much familiar with JavaScript and mobile theme. :/

Rhino.Freak
Helper
Helper

Male Posts : 1246
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 7th 2016, 11:53 am

I appreciate you looking into.it. is anyone on the forumotion team good at this sort of stuff?

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by SLGray on June 7th 2016, 12:30 pm

Does it work in the classic version?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36701
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 7th 2016, 3:47 pm

Yes brilliantly. See the screenshot in the OP

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 7th 2016, 3:52 pm

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

http://help.forumotion.com/t135424-reputation-button-move

troyeccles
Forumember

Posts : 296
Reputation : 5
Language : English

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by Ange Tuteur on June 8th 2016, 2:15 pm

@troyeccles wrote:I appreciate you looking into.it. is anyone on the forumotion team good at this sort of stuff?
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. tongue

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. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Duplicating the "Reputation/Like" function onto the mobile version

Post by troyeccles on June 9th 2016, 8:08 am

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:
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>&nbsp;{L_TOPIC_BY}&nbsp;{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(/&amp;/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 : 296
Reputation : 5
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum