Skip to content

Instantly share code, notes, and snippets.

@marcuseby
Created February 15, 2014 11:23
Show Gist options
  • Save marcuseby/9017929 to your computer and use it in GitHub Desktop.
Save marcuseby/9017929 to your computer and use it in GitHub Desktop.
Javascript file that adds an active title to all piklist widgets.
jQuery(document).ready(function($) {
mae_add_active_title = function (cur,newtitle) {
var active = cur.find('.widget-inside .widget-content div[id^="_piklist_universal_widget"] select[id^="widget-piklist-universal-widget"] option:selected').text();
if (newtitle!='') {
active = newtitle;
cur.find('.widget-top .widget-title .widget-piklist-active-title').remove();
}
cur.find('.widget-top .widget-title').append('<span class="widget-piklist-active-title">Active: '+active+'</span>');
};
$('div[id*="piklist-universal-widget"]').each(function () {
var cur = $(this);
mae_add_active_title(cur,'');
});
$('div[id*="piklist-universal-widget"]').find('.widget-inside .widget-content div[id^="_piklist_universal_widget"] select[id^="widget-piklist-universal-widget"]').on('change', function(e) {
e.preventDefault();
var cur = $(this).parents('div[id*="piklist-universal-widget"]');
var th = $(this);
mae_add_active_title(cur,th.find('option:selected').text());
return true;
});
});
@marcuseby
Copy link
Author

Add the following CSS to your admin css file:

.widget .widget-title .widget-piklist-active-title {
    clear: both;
    position: relative;
    display: block;
    padding: 0px 0px 10px 15px;
    font-size: 80%;
    margin-top: -15px;
    font-weight: normal;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment