Nucleus toolbar in comments [hack]

This hack is outdated. Please follow the link to plugin version 0.3.


If a site is running Nucleus, items and comments are quite different entities. In particular, one can embed HTML to items both manually and using built-in add\edit form buttons. Nothing like that is available for comments where HTML markup is converted to text. Some plugins do exist to support fancy text but none of them provides for experience similar to add item \ add link functions available for items.

This hack was implemented to address this this request which somehow attracted my attention.

(1) Open up the commentform-loggedin.template file in the /nucleus/forms/ directory and replace its contents with the following code:

<a id="nucleus_cf"></a>
<script type="text/javascript"
   src="<%adminurl%>javascript/edit.js">
</script>

<form method="post" action="#nucleus_cf">
  <div class="commentform">
       <%errordiv%>
       <input type="hidden" name="action" value="addcomment" />
       <input type="hidden" name="url" value="<%formdata(destinationurl)%>" />
       <input type="hidden" name="itemid" value="<%itemid%>" />
       <label for="inputbody"><%text(_COMMENTFORM_COMMENT)%></label>:
       <br /><br />
       <div class="jsbuttonbar">
         <span class="jsbutton"
            onmouseover="BtnHighlight(this);"
            onmouseout="BtnNormal(this);"
             onclick="boldThis()" >        
             <img src="<%adminurl%>images/button-bold.gif" alt="" width="16" height="16"/>
         </span>               
         <span class="jsbutton"
            onmouseover="BtnHighlight(this);"
            onmouseout="BtnNormal(this);"
             onclick="italicThis()" >          
             <img src="<%adminurl%>images/button-italic.gif" alt="" width="16" height="16"/>
         </span>               
         <span class="jsbuttonspacer">
         </span>           
         <span class="jsbutton"
            onmouseover="BtnHighlight(this);"
            onmouseout="BtnNormal(this);"
             onclick="ahrefThis()" >           
             <img src="<%adminurl%>images/button-link.gif" alt="" width="16" height="16"/>
         </span>               
       </div>
       <br />
       <textarea name="body" class="formfield" tabindex="10" cols="40" rows="10" id="inputbody"
           onkeyup="storeCaret(this);"
           onclick="storeCaret(this);"
           onselect="storeCaret(this);"><%formdata(body)%></textarea>
       <br />
       <%text(_COMMENTFORM_YOUARE)%> <%formdata(membername)%>
       <small>(<a href="?action=logout"><%text(_LOGOUT)%></a>)</small>
       <br />
       <input type="submit" value="<%text(_COMMENTFORM_SUBMIT)%>" class="formbutton" />
       <%callback(FormExtra,commentform-loggedin)%>
  </div>
  <br/>
</form>

(2) replace the contents of the commentform-notloggedin.template file in the same /nucleus/forms/ directory with this code:

<script type="text/javascript"
    src="<%adminurl%>javascript/edit.js">
</script>

<a id="nucleus_cf"></a>
<form method="post" action="#nucleus_cf">
  <div class="commentform">
        <%errordiv%>
        <input type="hidden" name="action" value="addcomment" />
        <input type="hidden" name="url" value="<%formdata(destinationurl)%>" />
        <input type="hidden" name="itemid" value="<%itemid%>" />
        <label for="inputbody"><%text(_COMMENTFORM_COMMENT)%></label>:
        <br /><br />
        <div class="jsbuttonbar">
          <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="boldThis()" >          
               <img src="<%adminurl%>images/button-bold.gif" alt="" width="16" height="16"/>
          </span>              
          <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="italicThis()" >        
               <img src="<%adminurl%>images/button-italic.gif" alt="" width="16" height="16"/>
          </span>              
          <span class="jsbuttonspacer">
          </span>          
          <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="ahrefThis()" >         
               <img src="<%adminurl%>images/button-link.gif" alt="" width="16" height="16"/>
          </span>              
        </div>
        <br />
        <textarea name="body" class="formfield" tabindex="10" cols="40" rows="10" id="inputbody"
             onkeyup="storeCaret(this);"
             onclick="storeCaret(this);"
             onselect="storeCaret(this);"><%formdata(body)%></textarea>
        <br />
        <label for="nucleus_cf_name"><%text(_COMMENTFORM_NAME)%></label>:
        <input name="user" size="40" maxlength="40" value="<%formdata(user)%>"
               class="formfield" id="nucleus_cf_name" />
        <br />
        <label for="nucleus_cf_mail"><%text(_COMMENTFORM_MAIL)%></label>:
        <input name="userid" size="40" maxlength="60"
               value="<%formdata(userid)%>" class="formfield" id="nucleus_cf_mail" />

        <%callback(FormExtra,commentform-notloggedin)%>
        <br />
        <input type="checkbox" value="1" name="remember"
           id="nucleus_cf_remember" <%formdata(rememberchecked)%> />
        <label for="nucleus_cf_remember"><%text(_COMMENTFORM_REMEMBER)%></label>
        <br />
        <input type="submit" value="<%text(_COMMENTFORM_SUBMIT)%>" class="formbutton" />
  </div>
</form>

(3) Add the following code to all stylesheets in use on your site (you can usually find them in the /skins/skinname/ directory):

.jsbutton
{
    BORDER-RIGHT: #dddddd 1px solid;
    PADDING-RIGHT: 3px;
    BORDER-TOP: #dddddd 1px solid;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    BORDER-LEFT: #dddddd 1px solid;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: #dddddd 1px solid;
    TEXT-ALIGN: center
}
.jsbuttonspacer
{
    PADDING-RIGHT: 10px
}
.jsbuttonbar
{
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    CURSOR: default;
    PADDING-TOP: 3px
}

(4) Open up the COMMENT.php file inside the /nucleus/libs/ directory and replace function prepareBody with this bit of code:

        // prepares the body of a comment (static)
        function prepareBody($body)
        {

        // remove newlines when too many in a row
        $body = ereg_replace("\n.\n.\n","\n",$body);

        // trim away whitespace and newlines at beginning and end
        $body = trim($body);

        // add <br /> tags
        $body = addBreaks($body);

        return $body;
        }

1 комментарий к “Nucleus toolbar in comments [hack]”

  1. OOps Maxirmx,

    Noticed something today. I put in some text in a comment, then a line break, then used the link button to enter a link. When the link popped into the text area it deleted the text I put before it. Good thing I didn’t create a long post.. Yikes.. lol

    Also you will notice that the Text to display area picks up all the content even if its a long paragraph, actually I think it picks it all up and will use it as the links name. Even if you remove it all and put a name for the link, when the link goes into the text area all other text is stripped out. I don’t put many links in comments so I didn’t notice this until today. curious problem.. lol
    _________________
    Nucleus V 3.31 Laila skin
    Maxthon Browser v 1.6.3
    Apache 2.2.6 (Unix) PHP 5.2.5

    Ответить

Оставьте комментарий