CKB - CSS via Nuvola Base

Sends HTML code to backend updates target div and executes <script>

by sanford

HTML

<script src="https://raw.github.com/tbela99/template/master/Source/Template.js"></script>
<div id="category">
    <div id='repeating_block_1' data-repeating-block="true">
        <img class="thumbnailimage" src="http://dummyimage.com/100x100/000/fff&text=template">
        <span class="collectionname"></span>
    </div>
</div>

<div id="images">
    <div id='repeating_block_2' data-repeating-block="true">
        <span class="imagename"></span>
        <img class="memberimage" src="http://dummyimage.com/100x100/000/fff&text=template">
    </div>
</div>

<span id="status"></span>

CSS

[data-repeating-block] {
    display: none;
}
body {
    font-family: Helvetica, Sans, Arial;
    background-color: lightYellow;
}
BODY#passerby {
    background:indigo;
}
p {
    padding: 10px;
}

#category span {
    font: 20px/20px "Times New Roman";
    font--style: italic;
    margin-left: 20px;
}
#category img {
    border: 2px solid purple;
    margin-left: 20px;
}

#images div {
    float: left;
    border: 1px dotted silver;
    margin: 20px;
    padding: 14px;
}
#images img {
    border: 2px solid goldenrod;
}
#images span {
    display: block;
}
#images div:hover span {
    text-decoration: underline;
}
img {
    -webkit-transition: all 1250ms ease-in;
    position:relative;
}
#status {
    color:white;
    font: 12px/12px Courier;
    margin: 10px auto 0 auto;
    width:200px;
    display:block;
}

JavaScript

// debugger;
// var cat_id = document.location.hash.substr(1);

var cat_id=3;

new Request.JSON({
    url:'/fiddlehelpers/nuvolabase/carolkbrown/10:'+cat_id,
    method: 'get',
    headers: {'Authorization':'Basic cmVhZGVyOnJlYWRlcg=='},
    onRequest: function(){
        document.id('status').set('text','Loading nudges...');
    },
    onSuccess: function(respJ){
        document.id('status').set('text','');
        for (itm in respJ) { 
            if ( itm.charAt(0) != '@' ) { 
                var itmJSON = JSON.parse(respJ[itm])[0];
                var cssRule = addCSSRule('#'+itm);
                for (rule in itmJSON) { 
                    cssRule.style[rule]=itmJSON[rule];        
                }  
            }        
        }
    }
}).send();

new Request({
    url: '/fiddlehelpers/piwigo/carolkbrown/ws.php?format=rest&method=pwg.categories.getList&cat_id='+cat_id,
    onSuccess: function(respT,respX){ 
                        var template = $('repeating_block_1');
                        var templateParent = template.getParent();
        Array.each( respX.getElementsByTagName('category'),
                    function(itm,idx){ 
                        var templatedBlock = template.clone();
                        templatedBlock.getElement('IMG.thumbnailimage')
                            .set( 'src',itm.getElement('tn_url').get('text') );
                        templatedBlock.getElement('SPAN.collectionname')
                            .set( 'text',itm.getElement('name').get('text') );

                        templatedBlock.erase('data-repeating-block');
                        templatedBlock.inject(templateParent);
                        
                    })
        }    
}).send();

new Request({
    url: '/fiddlehelpers/piwigo/carolkbrown/ws.php?format=rest&method=pwg.categories.getImages&cat_id='+cat_id,
    onSuccess: function(respT,respX){
                        var template = $('repeating_block_2');
                        var...