Making WordPress.org

Changeset 301


Ignore:
Timestamp:
01/21/2014 12:31:09 AM (11 years ago)
Author:
nacin
Message:

Trac: Add initial support for 'focuses'. These are a cross between a component and a keyword. Disabled for now - see #287.

Location:
sites/trunk/wordpress.org/public_html/style/trac
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/style/trac/wp-trac.css

    r295 r301  
    11011101}
    11021102#edit-keywords {
    1103     float: right;
    11041103    cursor: pointer;
    11051104    font-size: 8px;
    11061105    color: #999;
    1107     margin: 6px 6px 0 0;
     1106    margin: 6px 6px 0 6px;
    11081107}
    11091108#keyword-bin span a:hover {
     
    11201119    padding: 5px 6px 5px 0;
    11211120    text-align: right;
     1121}
     1122
     1123/* =Focuses */
     1124#properties table td#focuses {
     1125    padding: .6em 0 .3em;
     1126    height: 66px;
     1127}
     1128#focuses span {
     1129    float: left;
     1130}
     1131#focuses ul {
     1132    float: left;
     1133    width: 356px;
     1134    margin: 0;
     1135    padding: 0;
     1136    list-style: none;
     1137}
     1138#focuses li {
     1139    font-size: 12px;
     1140    display: inline-block;
     1141    float: left;
     1142    margin: 0 0 6px 6px;
     1143    border-radius: 3px;
     1144    background: #eee;
     1145    color: #aaa;
     1146}
     1147#focuses a {
     1148    display: inline-block;
     1149    padding: 4px 7px;
     1150    color: inherit;
     1151    border-radius: 3px;
     1152    background: inherit;
     1153    text-decoration: none;
     1154    border-bottom: none;
     1155}
     1156#focuses li:hover,
     1157#focuses a:focus {
     1158    color: #000;
     1159    cursor: pointer;
     1160}
     1161#focuses li.active,
     1162#focuses li.active a:focus {
     1163    background: #666;
     1164    color: #fff;
    11221165}
    11231166
  • sites/trunk/wordpress.org/public_html/style/trac/wp-trac.js

    r300 r301  
    1 var wpTrac, coreKeywordList, gardenerKeywordList;
     1var wpTrac, coreKeywordList, gardenerKeywordList, coreFocusesList;
    22
    33(function($){
     
    2727    };
    2828
     29    coreFocusesList = {
     30        'ui' : 'UI or design related.',
     31        'javascript' : 'Heavy JavaScript focus.',
     32        // 'accessibility' : 'Accessibility focus.',
     33        'unit tests' : 'PHP or JS unit tests.',
     34        'docs' : 'Documentation focus.',
     35        'rtl' : 'Right-to-left languages.',
     36        'administration' : 'Dashboard related, but assigned a more specifc component.',
     37        'template' : 'Relating to theme template functions, but assigned a more specific component.',
     38        'performance' : 'Performance or caching (but not the Cache API component).',
     39        // 'multisite' : 'Relating to multisite, but assigned a more specific component.'
     40    };
     41
    2942    gardenerKeywordList = [ 'commit', 'early', 'i18n-change' ];
    3043
     
    357370                    $('#field-owner').parents('tr').remove();
    358371
    359                     html = '<a id="edit-keywords">manual</a>';
    360                     html += '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
    361                     html += '<select id="keyword-add"><option value=""> - Add - </option></select></div>';
     372                    html = '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>';
     373                    html += '<select id="keyword-add"><option value=""> - Add - </option></select> <a id="edit-keywords">manual</a></div>';
    362374                    html += '<div id="keyword-bin"></div>';
    363375                    container.prepend( html );
     
    380392
    381393                    // Replace commas, collapse spaces, trim, then split by space.
    382                     keywords = $.trim( elements.hiddenEl.val().replace(',', ' ').replace(/ +/g, ' ') ).split(' ');
     394                    keywords = $.trim( elements.hiddenEl.val().replace(/,/g, ' ').replace(/ +/g, ' ') ).split(' ');
    383395
    384396                    // Put our cleaned up version back into the hidden field.
     
    397409                    // Populate the dropdown.
    398410                    if ( elements.add ) {
    399                         elements.add.empty();
     411                        elements.add.children().not('[value=""]').remove();
    400412                    } else {
    401413                        elements.add = $('#keyword-add');
     
    476488                }
    477489            }
     490        }()),
     491
     492        focuses: (function() {
     493            var field, container, focuses, originalFocuses;
     494
     495            function init() {
     496                var ul, classes;
     497                if ( typeof coreFocusesList === 'undefined' ) {
     498                    return;
     499                }
     500
     501                field = $( '#field-focuses' );
     502                if ( field.length === 0 ) {
     503                    return;
     504                }
     505                $('label[for="field-focuses"]').parent().remove();
     506                field.parent().attr({ colspan: 2, id: 'focuses' });
     507                field.hide();
     508
     509                focuses = $.trim( field.val().replace(/,/g, ' ').replace(/ +/g, ' ') );
     510                if ( focuses.length === 0 ) {
     511                    focuses = [];
     512                } else {
     513                    focuses = focuses.split( ' ' );
     514                }
     515                originalFocuses = $.merge( [], focuses );
     516
     517                container = $( '#focuses' );
     518                container.append( '<span>Focuses:</span>' );
     519                ul = $( '<ul />' );
     520                $.each( coreFocusesList, function( focus, description ) {
     521                    classes = focus.replace( ' ', '-' );
     522                    if ( -1 !== $.inArray( focus, focuses ) ) {
     523                        classes += ' active';
     524                    }
     525                    ul.append( $( '<li />', {
     526                        'data-focus' : focus,
     527                        title: description,
     528                        class: classes
     529                    } ).html( '<a href="#">' + focus + '</a>' ) );
     530                });
     531                ul.appendTo( container );
     532
     533                container.on( 'click', 'a', addRemove );
     534                container.closest( 'form' ).on( 'submit', submit );
     535            }
     536
     537            function addRemove() {
     538                var focus = $( this ).parent();
     539                if ( focus.hasClass( 'active' ) ) {
     540                    remove( focus );
     541                } else {
     542                    add( focus );
     543                }
     544                return false;
     545            }
     546
     547            function add( focus ) {
     548                focus.addClass( 'active' );
     549                focuses.push( focus.data( 'focus' ) );
     550                updateField();
     551            }
     552
     553            function remove( focus ) {
     554                focus.removeClass( 'active' );
     555                var remove = focus.data( 'focus' );
     556                focuses = $.grep( focuses, function( value ) {
     557                    return value != remove;
     558                } );
     559                updateField();
     560            }
     561
     562            function updateField() {
     563                var orderedFocuses = [];
     564                $.each( coreFocusesList, function( focus ) {
     565                    if ( -1 !== $.inArray( focus, focuses ) ) {
     566                        orderedFocuses.push( focus );
     567                    }
     568                });
     569                field.val( orderedFocuses.join( ', ' ) );
     570            }
     571
     572            function submit() {
     573                if ( focuses.length !== originalFocuses.length )
     574                    return;
     575                var testFocuses = $.grep( focuses, function(v) {
     576                    return -1 === $.inArray( v, originalFocuses );
     577                });
     578                // If the difference has no length, then restore to the original order.
     579                if ( ! testFocuses.length ) {
     580                    field.val( originalFocuses.join( ', ' ) );
     581                }
     582            }
     583
     584            return {
     585                init: init
     586            };
    478587        }()),
    479588
Note: See TracChangeset for help on using the changeset viewer.