Themes

Hello Themers,

I have long been frustrated by the font size of the dock title being fixed at 11px - too small.  So, I've decided to have a go at making the JS take into account the font size set in the CSS.  Now, this is not complete, but rather posted here as a 'challenge' to you as I'm not sure when I'll revisit the code but I wanted to share what I've done so far.

Thus with the CSS:

#dock, #dock .dockedtitle h2 {
    font-size: 24px;
}

#dock #dockeditempanel {
    font-size: 12px;
}

and the changed dock.js code:

M.core.dock.fixTitleOrientation = function(title, text) {
    var dock = M.core.dock.get(),
        fontsize = Y.one('#dock').getStyle('fontSize'),
        transform = 'rotate(-90deg)',
        test,
        width,
        height,
        top,
        container;
    title = Y.one(title);

/*
#dock, #dock .dockedtitle h2 {
font-size: 24px;
}

#dock #dockeditempanel {
font-size: 12px;
}
*/
    if (dock.get('orientation') !== 'vertical') {
        // If the dock isn't vertical don't adjust it!
        title.set('innerHTML', text);
        return title;
    }

    if (Y.UA.ie > 0 && Y.UA.ie < 8) {
        // IE 6/7 can't rotate text so force ver
        M.str.langconfig.thisdirectionvertical = 'ver';
    }

    switch (M.str.langconfig.thisdirectionvertical) {
        case 'ver':
            // Stacked is easy
            return title.set('innerHTML', text.split('').join('
'));
        case 'ttb':
            transform = 'rotate(90deg)';
            break;
        case 'btt':
            // Nothing to do here. transform default is good.
            break;
    }

    if (Y.UA.ie === 8) {
        // IE8 can flip the text via CSS but not handle transform. IE9+ can handle the CSS3 transform attribute.
        title.set('innerHTML', text);
        title.setAttribute('style', 'writing-mode: tb-rl; filter: flipV flipH;display:inline;');
        title.addClass('filterrotate');
        return title;
    }

    // We need to fix a font-size - sorry theme designers.
	Y.log('Dock font size: ' + title.getStyle('fontSize'));
	Y.log('Dock font size: ' + title.getComputedStyle('fontSize'));
	Y.log('Dock attribute: ' + title.getAttribute('style'));
	//Y.log('Dock font size: ' + Y.one('#dock').getStyle('fontSize'));
	Y.log('Dock font size: ' + fontsize);
	Y.log('Dock font size int: ' + parseInt(fontsize));
	//Y.log('Dock font siz4: ' + Y.one('#dock').getComputedStyle('fontSize'));
    test = Y.Node.create('

'+text+'

');
    //test = Y.Node.create('

style="font-size:'+title.getStyle('fontSize')+';">'+text+'

');
    BODY.insert(test, 0);
    width = test.one('span').get('offsetWidth') * 1.2;
    height = test.one('span').get('offsetHeight');
    test.remove();

    title.set('innerHTML', text);
    title.addClass('css3transform');

	Y.log('Test width: ' + width);
	Y.log('Test height: ' + height);

    // Move the title into position
    top = (width - height)/2;
    title.setStyles({
        'position' : 'relative',
        //'fontSize' : fontsize,
        'width' : width,
        //'top' : '0',
        //'transform-origin' : '100% 100%',
        'top' : top
    });

    // Positioning is different when in RTL mode.
	/*
    if (right_to_left()) {
        title.setStyle('left', width/2 - height);
    } else {
        title.setStyle('right', width/2 - height);
    }
    */
    if (right_to_left()) {
        title.setStyle('left', top - ((top/30) + (parseInt(fontsize)/3)));
    } else {
        title.setStyle('right', top - ((top/30) + (parseInt(fontsize)/3)));
    }

    // Rotate the text
    title.setStyles({
        'transform' : transform,
        '-ms-transform' : transform,
        '-moz-transform' : transform,
        '-webkit-transform' : transform,
        '-o-transform' : transform
    });

    container = Y.Node.create('

');
    container.append(title);
    container.setStyles({
        height : width + (width / 4),
        position : 'relative'
    });
    return container;
};

you can get titles like the attached image.  The key snag appears to be this calculation:

    if (right_to_left()) {
        title.setStyle('left', top - ((top/30) + (parseInt(fontsize)/3)));
    } else {
        title.setStyle('right', top - ((top/30) + (parseInt(fontsize)/3)));
    }

Where I think as the font size decreases so the difference between that value and top increases.  I've run out of time now to do any more.

More info to follow, cheers,

Gareth

(Edited by Mary Evans - original submission Friday, 30 January 2015, 7:19 PM)