Pages - Menu

2013年2月21日木曜日

ラベルガジェットをツリー階層化に改良(Awesome Incテンプレ補正あり)

ラベルのツリー階層化改造
headタグ内に入れる
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
ラベルウィジェットの最後に「ラベル階層化 と トグル処理 のscript」を入れる
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
    <b:if cond='data:title'>
        <h2><data:title/></h2>
    </b:if>
    <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
        :
        <b:include name='quickedit'/>
<script type='text/javascript'>
//ラベル階層化
$(function(){

    // START: Awesome Inc. テンプレ補正
    var cssUL = {
        'marginTop'   : '0px',
        'marginRight' : '0px',
        'marginLeft'  : '0px',
        'paddingLeft' : '15px'
    };
    var cssLI = {
        'paddingRight'  : '0px',
        'paddingBottom' : '0px',
        'paddingLeft'   : '0px'
    };
    // START: Awesome Inc. テンプレ補正

    var DELIMITER = " > ";

    var list = $( 'div#Label1 div ul > li' );
    var dest = $( "<ul style='display: none;'/>" );
    var nodes = new Array();
    $( list ).each( function() {

        // START: Awesome Inc. テンプレ補正
        var tagName = $( this ).get( 0 ).tagName.toLowerCase();
        if ( tagName == 'li' ) {
            $( this ).css( cssLI );
        }
        // E N D: Awesome Inc. テンプレ補正

        var work;
        if ( $( this ).children( 'a' ).length > 0 ) {
            work = $( this ).children( 'a' ).text().split( DELIMITER );
            $( this ).children( 'a' ).text( work[ work.length - 1 ] );
        } else {
            work = $( this ).children( 'span:first' ).text().split( DELIMITER );
            $( this ).children( 'span:first' ).text( work[ work.length - 1 ] );
        }
        $( this ).addClass( "categoryLabel" );
        var key = "";
        var target = $( this );
        $( work ).each( function( i ) {
            if ( i == work.length - 1 ) {
                if ( key == "" ) {
                    dest.append( $( target ).clone( true ) );
                } else {
                    nodes[ key ].append( $( target ).clone( true ) );
                }
                $( target ).remove();
            }else{
                var parent = null;
                if ( i > 0 ) {
                    parent = nodes[ key ];
                    key = key + DELIMITER;
                }
                key = key + work[ i ];
                if ( nodes[ key ] == null ) {
                    var item = $( "<li class='categoryLabel'>" + work[ i ] + "</li>" );
                    var temp = $( "<ul style='display: none;'/>" );

                    // START: Awesome Inc. テンプレ補正
                    item.css( cssLI );
                    temp.css( cssUL );
                    // E N D: Awesome Inc. テンプレ補正

                    item.append( temp );
                    nodes[ key ] = temp;
                    if ( parent == null ) {
                        dest.append( item );
                    } else {
                        parent.append( item );
                    }
                }
            }
        } );
    } );
    $( 'div#Label1 div ul' ).html( $( dest ).html() );

    // START: Awesome Inc. テンプレ補正
    $( 'div#Label1 div ul' ).css( cssUL );
    // START: Awesome Inc. テンプレ補正

} );
//トグル処理
$( function() {
    var open = 'data:image/gif;base64,'
        + 'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACEYyPoAvG614LQFg7ZZbxoR8UADs=';
    var close = 'data:image/gif;base64,'
        + 'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACFIyPoAu2spyCyol7W3hxz850CFIA'
        + 'ADs=';
    $( '.categoryLabel:has(ul)' )
        .click( function( event ) {
            if ( this == event.target ) {
                $( this ).children().toggle();
                $( this ).css( 'list-style-image',
                    ( $( this ).children().is( ':hidden' ) ) ?
                    'url(' + close + ')' : 'url(' + open + ')' );
            }
        } )
        .css( 'cursor','pointer' );
    $( '.categoryLabel:has(ul)' ).css( {
        cursor: 'pointer',
        'list-style-image': 'url(' + close + ')'
    } );
    $( '.categoryLabel:not(:has(ul))' ).css( {
        cursor: 'pointer',
        'list-style-image': 'url(' + open + ')'
    } );  
    $( '#Label1Cover' ).show();
} );
</script>
    </div>
</b:includable>
</b:widget>