Javascript: IPB thread moderation panel

[balu♥krishnaKßZ ►☻◄ ƒøяυλ⁄(-αđмιиιѕтяαтσя]

Tutorial: Moderate your thread

This tutorial will give you the same look of IPB moderation threads.

--> Tutorials, tips and tricks <--
Moderate your thread

1º - Javascript

Placement: In topics

Code:

$(function(){
    var level = _userdata["user_level"];
    var del = $('.main-foot a[href*="mode=delete"]').attr('href');
    var trash = $('.main-foot a[href*="mode=trash"]').attr('href');
    var move = $('.main-foot a[href*="mode=move"]').attr('href');
    var lockunlock = $('.main-foot a[href*="mode=lock"]').attr('href');
    var split = $('.main-foot a[href*="mode=split"]').attr('href');
    var merge = $('.main-foot a[href*="merge"]').attr('href');

    if(level === 1 | level === 2 | trash) {
      $('.paged-head').after('<div id="moderation_tool" class="act_mod"><p class="mod" title="Moderate topic">Moderate topic</p></div>');
    $('#moderation_tool').append('<div id="popw" class="action_mod">
    <div class="mod_hover"></div>
    <div class="popwinner">
    <li><a href="'+del+'">Delete topic</a></li>
    <li><a href="'+trash+'">Trash this topic</a></li>
    <li><a href="'+move+'">Move this topic</a></li>
    <li><a href="'+lockunlock+'">Lock / Unlock topic</a></li>
    <li><a href="'+split+'">Split this topic</a></li>
    <li><a href="'+merge+'">Merge topic</a></li>
    </div></div>');
    $('.mod').click(function(){
      $('.action_mod').slideToggle(300);
    });
    }
    });

2º - CSS

Code:

#moderation_tool {
margin:0 0 8px;
}

#moderation_tool.act_mod p {
-moz-border-radius:3px;
-moz-box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);
-moz-transition:all .2s ease-in-out;
-webkit-border-radius:3px;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:all .2s ease-in-out;
cursor:pointer;
webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background:0;
background-image:0;
border:1px solid #D9DBDD;
border-radius:3px;
box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);
color:#616161;
display:inline-block;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8fa',endColorstr='#edeeef',GradientType=0);
font-size:12px;
height:22px;
line-height:22px;
white-space:nowrap;
padding:0 10px;
}

#popw {
background-color:rgba(70,70,70,0.6);
-webkit-box-shadow:0 8px 15px rgba(0,0,0,0.7);
-moz-box-shadow:0 8px 15px rgba(0,0,0,0.7);
box-shadow:0 8px 15px rgba(0,0,0,0.7);
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:none;
z-index:999;
margin-top:16px;
position:absolute;
padding:4px;
}

#popw .mod_hover {
background-image:url(http://i38.servimg.com/u/f38/18/24/85/15/bottom10.png);
width:31px;
height:16px;
top:-16px;
left:5px;
z-index:999;
position:absolute;
}

#popw .popwinner {
background:#fff;
max-height:465px;
width:190px;
overflow:auto;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.4);
box-shadow:0 0 3px rgba(0,0,0,0.4);
overflow-x:hidden;
}

#popw .popwinner li {
background:#f8f8f8;
list-style-type:none;
border-bottom:1px solid #eaeaea;
text-align:center;
padding:3px 4px;
}

#popw .popwinner li a {
color:#333!important;
}

3º - Preview