Wikia

Community Central

Changes: Hiding comments

Edit

Back to page

 
Line 6: Line 6:
 
|-
 
|-
 
|
 
|
<pre>
+
<pre style="width: 450px;">
 
$(function () {
 
$(function () {
if (!$('#WikiaArticleComments').length) return;
+
if (!$('#WikiaArticleComments').length) return;
   
var buttonTexts = {
+
var buttonTexts = {
toggleComment: {
+
toggleComment: {
true: 'Hide Post', false: 'Show Post'
+
true: 'Hide Post', false: 'Show Post'
},
+
},
toggleUser: {
+
toggleUser: {
true: 'Hide User', false: 'Show User'
+
true: 'Hide User', false: 'Show User'
},
+
},
toggleThread: {
+
toggleThread: {
true: 'Hide Thread', false: 'Show Thread'
+
true: 'Hide Thread', false: 'Show Thread'
}
+
}
};
+
};
   
if (skin == "monobook") {
+
if (skin == "monobook") {
// Set container position to relative so that absolute positioning
+
// Set container position to relative so that absolute positioning
// works properly for the buttons in Monobook
+
// works properly for the buttons in Monobook
$('.speech-bubble-message').css('position', 'relative');
+
$('.speech-bubble-message').css('position', 'relative');
// Monobook CSS
+
$('head').append(
+
// Monobook CSS
'<style type="text/css">' +
+
$('head').append(
'.threadButton { ' +
+
'<style type="text/css">' +
' display: none; float: none !important; position: absolute; top: -9px;' +
+
'.threadButton { ' +
' margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 11px;' +
+
' display: none; float: none !important; position: absolute; top: -9px;' +
' height: 16px; width: 75px; line-height: 15px; left: 15px; cursor: pointer;' +
+
' margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 11px;' +
'}' +
+
' height: 16px; width: 75px; line-height: 15px; left: 15px; cursor: pointer;' +
'.toggleUser {' +
+
'}' +
' left: 105px;' +
+
'.toggleUser {' +
'}' +
+
' left: 105px;' +
'.toggleThread {' +
+
'}' +
' left: 195px;' +
+
'.toggleThread {' +
'}' +
+
' left: 195px;' +
'.speech-bubble-message:hover .threadButton {' +
+
'}' +
' display: block;' +
+
'.speech-bubble-message:hover .threadButton {' +
'}' +
+
' display: block;' +
'.threadButton:hover {' +
+
'}' +
' display: block; width: 81px; height: 20px; top: -11px;'+
+
'.threadButton:hover {' +
' line-height: 19px; margin-left: -3px' +
+
' display: block; width: 81px; height: 20px; top: -11px;'+
'}' +
+
' line-height: 19px; margin-left: -3px' +
'</style>');
+
'}' +
} else {
+
'</style>');
// Oasis CSS
+
} else {
$('head').append(
+
// Oasis CSS
'<style type="text/css">' +
+
$('head').append(
'.threadButton { ' +
+
'<style type="text/css">' +
' display: none; float: none !important; position: absolute; top: -5px;' +
+
'.threadButton { ' +
' margin: 0; padding: 0; font-size: 11px; height: 16px; width: 90px;' +
+
' display: none; float: none !important; position: absolute; top: -5px;' +
' line-height: 15px;' +
+
' margin: 0; padding: 0; font-size: 11px; height: 16px; width: 90px;' +
'}' +
+
' line-height: 15px;' +
'.toggleUser {' +
+
'}' +
' left: 115px;' +
+
'.toggleUser {' +
'}' +
+
' left: 115px;' +
'.toggleThread {' +
+
'}' +
' left: 215px;' +
+
'.toggleThread {' +
'}' +
+
' left: 215px;' +
'.speech-bubble-message:hover .threadButton {' +
+
'}' +
' display: block;' +
+
'.speech-bubble-message:hover .threadButton {' +
'}' +
+
' display: block;' +
'.threadButton:hover {' +
+
'}' +
' display: block; width: 91px; height: 20px; top: -7px;'+
+
'.threadButton:hover {' +
' line-height: 19px; margin-left: -3px' +
+
' display: block; width: 91px; height: 20px; top: -7px;'+
'}' +
+
' line-height: 19px; margin-left: -3px' +
'</style>');
+
'}' +
}
+
'</style>');
// Rewritten
+
}
function createButton (className) {
+
return '<button class="threadButton ' + className + ' wikia-button secondary" type="button">'
+
// Rewritten
+ buttonTexts[className][true] +
+
function createButton (className) {
'</button>';
+
return '<button class="threadButton ' + className + ' wikia-button secondary" type="button">'
}
+
+ buttonTexts[className][true] +
// Rewritten
+
'</button>';
$('.article-comm-text', '#article-comments-ul')
+
}
.before(createButton('toggleComment') + createButton('toggleUser') + createButton('toggleThread'));
+
  +
// Rewritten
  +
$('.article-comm-text', '#article-comments-ul')
  +
.before(createButton('toggleComment') + createButton('toggleUser') + createButton('toggleThread'));
   
$('.threadButton', '#article-comments-ul')
+
$('.threadButton', '#article-comments-ul')
.data({
+
.data({
on: true,
+
on: true,
})
+
})
.click(function () {
+
.click(function () {
var on = !$(this).data('on');
+
var on = !$(this).data('on');
$(this).data('on', on)
+
$(this).data('on', on)
.text(function () {
+
.text(function () {
for (var i in buttonTexts) {
+
for (var i in buttonTexts) {
if ($(this).hasClass(i)) {
+
if ($(this).hasClass(i)) {
return buttonTexts[i][on];
+
return buttonTexts[i][on];
}
+
}
}
+
}
})
+
})
.trigger('toggle');
+
.trigger('toggle');
});
+
});
   
$('.toggleThread', '#article-comments-ul')
+
$('.toggleThread', '#article-comments-ul')
.on('toggle', function () {
+
.on('toggle', function () {
console.log(
+
console.log(
($(this).data('on') ? 'showing' : 'hiding') + ' thread'
+
($(this).data('on') ? 'showing' : 'hiding') + ' thread'
);
+
);
});
+
});
   
$('.toggleUser', '#article-comments-ul')
+
$('.toggleUser', '#article-comments-ul')
.on('toggle', function () {
+
.on('toggle', function () {
console.log(
+
console.log(
($(this).data('on') ? 'showing' : 'hiding') + ' user'
+
($(this).data('on') ? 'showing' : 'hiding') + ' user'
);
+
);
});
+
});
   
$('.toggleComment', '#article-comments-ul')
+
$('.toggleComment', '#article-comments-ul')
.on('toggle', function () {
+
.on('toggle', function () {
console.log(
+
console.log(
($(this).data('on') ? 'showing' : 'hiding') + ' post'
+
($(this).data('on') ? 'showing' : 'hiding') + ' post'
);
+
);
});
+
});
 
});
 
});
 
</pre>
 
</pre>

Latest revision as of 05:21, May 13, 2012

Okay, I've gotten it working in Monobook. Looks good in Chrome, CSS needs a bit of refinement though for Firefox. Also I made a small tweak to the Oasis CSS (Show Thread button needed to be wider) and rewrote createButton.

Edit: Before doing this, I always assumed that .prepend() and .before() did exactly the same thing. I learned the hard way that that is not the case...

Around Wikia's network

Random Wiki