Colors in new posts

[Mencey Melgar]

Hi, I've been trying to create something like a editor_color_button but failed all the time(javascript is not my strong face). So I'm asking for help here.

I think colors are actually a good feature for all forums, at first I tried to add colors using the < h1>, 2, etc. But this is not the good way to do it.

I'm purposing to add a new tool for new posts with a dropdown showing a table of colors. I tried to do it following the smiley tool since it's very similar for what I want:

(this is just an idea, maybe I'm wrong trying to do this x)):

The smiley feature uses a default line to introduce the url to the image:

<img src=

And adds the URL depending of the smile chosen.

My idea is to use something similar, but for < span>. When you select a predefined color in the colors table, insert the span and changing the color style source. This would be the default line:

<span style="<here the color:# and color id>"> + "here the text" + <span>

So to use this, we will also need a colors_table, something like:

<macro name="color_table">
    <n.comment.>
        You can edit the table below if you want to customize the list of colors.
        Example:
        <n.color name="red" col="color:#F00"/>
    </n.comment.>
    
    <table style="text-align:center">
        <tr>
            <td><n.color name="red" col="color:#F00" src=(here the url to the color box that will appear in the dropdown)/></td>
            <td><n.color name="yellow" col="color:#FF0"/></td>
            <td><n.color name="green" col="color:#008000"/></td>
        </tr>
    </table>
</macro>

And a color macro:

<macro name="color" parameters="name,style">
    <a href="javascript:Nabble.color('[n.style/]')">
        <n.if.starts_with text="[n.style/]" prefix="color:#">
            <then><span style="[n.style/]" alt="[n.name/]" border="0" /></then>
            <else><img src="[n.src/]" alt="[n.name/]" border="0" /></else>
        </n.if.starts_with>
    </a>
</macro>

I want to say again that I couldn't do it, I don't have enough knowledge to do it.

What do you think nabble team? :)

[Pedro]

Interesting. I'm trying to work it out.

[Pedro]

Take a look at this code:

<macro name="editor_color_button">
    <n.put_in_head.>
        <script type="text/javascript">
            var colorTable = "<n.javascript_string_encode.compress.color_table/>";
Nabble.color2 = function(cod,name) {
    var textarea = Nabble.get(textareaID);
    var s = this.getSelection(textarea);
    if( s != "" || (s=prompt("Enter text to make "+name+":","")) != null ) {
        this.setSelection( textarea, "<span style ='color: "+cod+" ;'>" + s + "</span>" );
    }
    textarea.focus();
};

var colorsLoaded = false;
Nabble.openColors = function() {
    Nabble.closeWindows();
    var $colors = $('#color-dropdown');
    if (!colorsLoaded) {
        $colors.html(colorTable);
        colorsLoaded = true;
    }
    $colors.show();
};
        </script>
    </n.put_in_head.>   
    <td class="has-dropdown">
        <div id="color-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:1em"></div>
        <button type="button" onclick="Nabble.openColors()" class="toolbar" title="[t]Add colors to your text.[/t]">
            <img src="http://cdn1.iconfinder.com/data/icons/SUPERVISTA/graphics/png/400/palette.png" border="0"  style="vertical-align:middle; hight: 20px; width:20px"/>
            <img src="/images/more.png" width="10" height="10"/>
        </button>
        <n.tooltip use_title="true"/>
    </td>
</macro>

<macro name="color_table">
     <n.comment.>
        You can edit the table below if you want to customize the list of colors.
        Use the 'color_span' command. Example:
        <n.color_span name="red" cod="#F00"/>
    </n.comment.>
    
    <!--Table of colors -->
    <table style="text-align:center">
        <tr>
            <td><n.color_span name="red" cod="#F00"/></td>
            <td><n.color_span name="blue" cod="#0000cd"/></td>
        </tr>
        <tr>
            <td><n.color_span name="green" cod="#008000"/></td>
            <td><n.color_span name="yellow" cod="#FF0"/></td>
        </tr>
    </table>
</macro>
<!--Making the showing of the options -->
<macro name="color_span" parameters="name,cod">
    <a href="javascript:Nabble.color2('[n.cod/]','[n.name/]')" style='text-decoration: none'>
        <span style="color:[n.cod/]"><n.name/></span>
    </a>
</macro> 

Put it on any file you want, then override the editor_toolbar macro to add the button:

            <tr>
                <n.editor_quote_button original_text="[n.original_text/]"/>
                <n.editor_insert_image_button/>
                <n.editor_bold_button/>
                <n.editor_color_button/>
                <n.editor_italic_button/>
                <n.editor_link_button/>
                <n.editor_smiley_button/>               
                <n.editor_more_options_button/>
            </tr>

[Mencey Melgar]

Very nice Pedro, thanks a lot! I want to suggest to nabble team to this feature should be implemented in all nabble forums, it's pretty useful!.

By the way, It's fine as how it is right now but I think it would be better with little color boxes instead of the color name(I'm talking about the dropdown). Is this possible? maybe a kind of a small < div> for each color:

<div style="background:<here the color of the span_color>

thanks again :3

[Pedro]

You can try to implement that. I thought about it, but since I would have to use the color name at the typing box, I left it with the color name as well.

[Mencey Melgar]

Done! I don't know if you are going to add this feature to all nabble forums, *you should :)*, I put my code here for interested people:

Add a new macro called editor_color_button:

<macro name="editor_color_button">  
    <n.put_in_head.>  
        <script type="text/javascript">  
            var colorTable = "<n.javascript_string_encode.compress.color_table/>";  
Nabble.color2 = function(cod,name) {  
    var textarea = Nabble.get(textareaID);  
    var s = this.getSelection(textarea);  
    if( s != "" || (s=prompt("Enter text to make "+name+":","")) != null ) {  
        this.setSelection( textarea, "<span style ='color: "+cod+" ;'>" + s + "</span>" );  
    }  
    textarea.focus();  
};  
  
var colorsLoaded = false;  
Nabble.openColors = function() {  
    Nabble.closeWindows();  
    var $colors = $('#color-dropdown');  
    if (!colorsLoaded) {  
        $colors.html(colorTable);  
        colorsLoaded = true;  
    }  
    $colors.show();  
};  
        </script>  
    </n.put_in_head.>     
    <td class="has-dropdown">  
        <div id="color-dropdown" class="editor-dropdown medium-border-color light-bg-color drop-shadow" style="margin-left:1em"></div>  
        <button type="button" onclick="Nabble.openColors()" class="toolbar" title="[t]Add colors to your text.[/t]">  
            <img src="http://cdn1.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/color2_16x16.gif" border="0"  style="vertical-align:middle; padding-bottom: .15em;"/>  
            <img src="/images/more.png" width="10" height="10"/>  
        </button>  
        <n.tooltip use_title="true"/>  
    </td>  
</macro>  
  
<macro name="color_table">  
     <n.comment.>  
        You can edit the table below if you want to customize the list of colors.  
        Use the 'color_span' command. Example:  
        <n.color_span name="red" cod="#F00"/>  
    </n.comment.>  
      
    <!--Table of colors -->  
    <table style="text-align:center">  
        <tr>  
            <td><n.color_span name="dark-red" cod="#850000"/></td> 
            <td><n.color_span name="dark-orange" cod="#8A3700"/></td> 
            <td><n.color_span name="dark-yellow" cod="#686800"/></td>
            <td><n.color_span name="dark-green" cod="#004E14"/></td>
            <td><n.color_span name="dark-cyan" cod="#009399"/></td>
            <td><n.color_span name="dark-blue" cod="#000069"/></td>
            <td><n.color_span name="dark-pink" cod="#580064"/></td>
            <td><n.color_span name="black" cod="#000"/></td>
            <td><n.color_span name="medium-light-grey" cod="#929292"/></td>
        </tr>  
        <tr>  
            <td><n.color_span name="red" cod="#F00"/></td> 
           <td><n.color_span name="orange" cod="#F60"/></td>  
            <td><n.color_span name="yellow" cod="#FF0"/></td>
            <td><n.color_span name="green" cod="#0F0"/></td>
            <td><n.color_span name="cyan" cod="#0FF"/></td>
            <td><n.color_span name="blue" cod="#00F"/></td>
            <td><n.color_span name="pink" cod="#E000FF"/></td>
            <td><n.color_span name="dark-grey" cod="#3C3C3C"/></td>
            <td><n.color_span name="light-grey" cod="#CACACA"/></td>
        </tr>  
         <tr>  
            <td><n.color_span name="light-red" cod="#FF8080"/></td>
            <td><n.color_span name="light-orange" cod="#FFA86E"/></td>   
            <td><n.color_span name="light-yellow" cod="#FFFF76"/></td>
            <td><n.color_span name="light-green" cod="#74FF74"/></td>
            <td><n.color_span name="light-cyan" cod="#80FFFF"/></td>
            <td><n.color_span name="light-blue" cod="#9999FF"/></td>
            <td><n.color_span name="light-pink" cod="#EE73FF"/></td>
            <td><n.color_span name="medium-dark-grey" cod="#757575"/></td>
             <td><n.color_span name="white" cod="#FFF"/></td>
        </tr> 
    </table>  
</macro>  
<!--Making the showing of the options -->  
<macro name="color_span" parameters="name,cod">  
    <a href="javascript:Nabble.color2('[n.cod/]','[n.name/]')" style='text-decoration: none'>  
        <div style="background:[n.cod/];padding: .5em" title="[t][n.name/][/t]"></div>  
    </a>  
</macro>   

Now override(search and edit) the macro editor_toolbar

<override_macro name="editor_toolbar" parameters="textarea_id, original_text, node_id">
    <n.put_in_head.>
        <n.editor_stylesheet/>
        <n.editor_shared_scripts textarea_id="[n.textarea_id/]" node_id="[n.node_id/]"/>
        <script type="text/javascript" src="/util/minmax.js"></script>
    </n.put_in_head.>
    
    <div class="toolbar rounded-top shaded-bg-color">
        <table class="toobar">
            <tr>
                <n.editor_quote_button original_text="[n.original_text/]"/>
                <n.editor_insert_image_button/>
                <n.editor_bold_button/>
                <n.editor_italic_button/>
                <n.editor_color_button/>
                <n.editor_link_button/>
                <n.editor_smiley_button/>
                <n.editor_subheaders_button/>
                <n.editor_embed_button/>
                <n.editor_more_options_button/>
            </tr>
        </table>
    </div>
</override_macro>

This will look like this:

[Pedro]

Excellent. The colored blocks are much better than color names.