CKB - Nudges

by sanford

HTML

<div id="pwgtopalbumcomment">
    Album Desc
    <style type="text/css" title="nudges">
    </style>
</div>
<div>
    <div class="pwgimgcomment" rel="img1">
    </style>
        PiwigoDesc
    </div>
        <img id="img1" src="http://dummyimage.com/100" tabindex="1" ZZstyle="top:0px;left:0px;">
</div>
<div>
    <div class="pwgimgcomment" rel="img2">
    Piwigo Desc
    </div>
    <img id="img2" src="http://dummyimage.com/110" tabindex="2" ZZstyle="top:0px;left:0px;">   
</div>
    
    <a id="serialize">Save</a>

CSS

div {
    float:left;
    margin: 5px;
    padding: 13px;
    border: 1px dotted gray;
}
img {
    position: relative;
    top: 0;
    left: 0;
}

JavaScript

pwgMainCatId = 666;
bodyClass = 'maincatid'+pwgMainCatId; // can't be numeric
document.id(document.body).addClass(bodyClass);

arrowkeystopx = {
    up: { x: 0, y:-1 }
    , down: { x: 0, y:1 }
    , left: { x: -1, y:0 }
    , right: { x: 1, y:0 }
}
$$('img').addEvent("keyup",function(e){
    var px;
    if ( px = arrowkeystopx[e.key], !px ) { 
        return; 
    }
    
        var newLeft = (this.getStyle('left')
                               .slice(0,-2).toInt() + px.x) + "px";
        var newTop = (this.getStyle('top')
                              .slice(0,-2).toInt() + px.y) + "px";
    var that=this;
    var styleTag = Array.filter(document.styleSheets,function(itm,idx){ 
        return itm.title == "nudges"; 
    }).pop();
        //debugger;
    Array.each(styleTag.cssRules,function(itm,idx){ 
        console.log (itm.selectorText);
        console.log ('.'+bodyClass+' #'+that.get('id'));
        if ( itm.selectorText == '.'+bodyClass+' #'+that.get('id') ){
            styleTag.deleteRule(itm); 
        }
    });
    var newRule = (
        '.'+bodyClass+' #'+this.get('id')
        +' { top: '+newTop
        +'; left: '+newLeft
        +'; }'
    );
    //debugger;
    styleTag.insertRule(newRule,0);
    // debugger;
    
});
document.id('serialize').addEvent('click',DOMStyleToHTML);
function DOMStyleToHTML() {
    var styleTag = Array.filter(document.styleSheets,function(itm,idx){ 
        return itm.title == "nudges"; 
    }).pop();
    var serialStyles = Array.map(styleTag.cssRules,function(itm,idx){ 
        return "\n" + itm.cssText; 
    });
    document.id('pwgtopalbumcomment')
        .getFirst('style')
        .set('html',serialStyles);
}