diff --git a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js index adc7fc5..8527f1f 100644 --- a/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js +++ b/botanjs/src/Astro/Blog/AstroEdit/Visualizer/Snippet/SiteFile.js @@ -16,6 +16,8 @@ var Config = __import( "Astro.Blog.Config" ); /** @type {System.utils.Perf} */ var Perf = __import( "System.utils.Perf" ); + /** @type {System.Cycle.Trigger} */ + var Trigger = __import( "System.Cycle.Trigger" ); /** @type {Astro.utils.Date} */ var XDate = __import( "Astro.utils.Date" ); @@ -78,7 +80,7 @@ _stage.setAttribute( new DataKey( "collection", 1 ) ); } - var s, m, l; + var s, m, l, o; var finfo = e.file; var content = this.stage.firstChild; @@ -94,6 +96,13 @@ var _image = Dand.wrapna( "img", new IKey("src", config.path.image.large + _hash + ".jpg") ); var keys = [ new IKey( "type", "radio" ), new IKey( "name", "size_grp" + Perf.uuid ) ]; var sid; + + var detectImageChange = function() { return _image.complete; }; + var setImageSizeProp = function() + { + _stage.setAttribute( new DataKey( "dimensions", _image.naturalWidth + "x" + _image.naturalHeight ) ); + }; + var selectionChanged = function () { _stage.setAttribute( new DataKey( "size", this.size ) ); @@ -109,9 +118,15 @@ case "large": _image.setAttribute( "src", config.path.image.large + _hash + ".jpg" ); break; + case "original": + _image.setAttribute( "src", config.path.image.original + _hash + ".jpg" ); + break; } + + Trigger.register( detectImageChange, setImageSizeProp, 100 ); }; + Trigger.register( detectImageChange, setImageSizeProp, 100 ); this.stage.insertBefore( _image, desc ); desc.removeChild( desc.firstChild ); @@ -124,6 +139,8 @@ , Dand.wrapne("label", "medium", new IKey("for", sid)) , l = Dand.wrapna("input", keys.concat( new IKey("checked", "1"), new IKey("id", sid = "size_" + Perf.uuid) )) , Dand.wrapne("label", "large (default)", new IKey("for", sid)) + , o = Dand.wrapna("input", keys.concat( new IKey("id", sid = "size_" + Perf.uuid) )) + , Dand.wrapne("label", "original", new IKey("for", sid)) ]) ); @@ -131,6 +148,7 @@ IDOMElement(s).addEventListener("Change", selectionChanged.bind({size: "small"})); IDOMElement(m).addEventListener("Change", selectionChanged.bind({size: "medium"})); IDOMElement(l).addEventListener("Change", selectionChanged.bind({size: "large"})); + IDOMElement(o).addEventListener("Change", selectionChanged.bind({size: "original"})); var hasValue = _stage.getDAttribute( "size" ); if( hasValue ) @@ -140,6 +158,7 @@ case "small": s.checked = 1; break; case "medium": m.checked = 1; break; case "large": l.checked = 1; break; + case "original": o.checked = 1; break; } selectionChanged.bind({ size: hasValue })(); @@ -251,6 +270,10 @@ { options += " size=\"" + opt + "\""; } + if( opt = stage.getDAttribute( "dimensions" ) ) + { + options += " dimensions=\"" + opt + "\""; + } if( opt = stage.getDAttribute( "preferred" ) ) { options += " preferred=\"" + opt + "\""; diff --git a/botanjs/src/Astro/Blog/Components/Entry/Blog.css b/botanjs/src/Astro/Blog/Components/Entry/Blog.css index 1b5f94a..a9d3286 100644 --- a/botanjs/src/Astro/Blog/Components/Entry/Blog.css +++ b/botanjs/src/Astro/Blog/Components/Entry/Blog.css @@ -1,5 +1,6 @@ .b_entry img { max-width: 100%; + height: auto; } .inline-code { diff --git a/botanjs/src/Astro/Blog/Components/Entry/Home.css b/botanjs/src/Astro/Blog/Components/Entry/Home.css index b29bb8a..475d405 100644 --- a/botanjs/src/Astro/Blog/Components/Entry/Home.css +++ b/botanjs/src/Astro/Blog/Components/Entry/Home.css @@ -120,4 +120,5 @@ .h_img img { max-width: 100%; + height: auto; } diff --git a/botanjs/src/Astro/Blog/Components/SiteFile.css b/botanjs/src/Astro/Blog/Components/SiteFile.css index 14a9aee..707e8fc 100644 --- a/botanjs/src/Astro/Blog/Components/SiteFile.css +++ b/botanjs/src/Astro/Blog/Components/SiteFile.css @@ -1,3 +1,7 @@ +.site-file { + max-width: 100%; + height: auto; +} .sf_regular sup { vertical-align: baseline; } .sf_regular { @@ -11,72 +15,3 @@ opacity: 0.5; } .sf_failed:hover { opacity: 1; } - -.loading_bubble { - width: 20px; - height: 20px; - - display: block; - float: left; - - position: relative; -} - -.loading_bubble > span { - width: 0.25em; - height: 0.25em; - - position: absolute; - - background-color: royalblue; - - animation: p1 1s infinite; - animation-timing-function: linear; - - /* Safari and Chrome */ - -webkit-animation: p1 1s infinite; - -webkit-animation-timing-function:linear; -} - -.loading_bubble > span:nth-child(1) { - top: 2.5px; - left: 2.5px; -} - -.loading_bubble > span:nth-child(2) { - top: 2.5px; - left: 12.5px; - - animation-delay: 250ms; - -webkit-animation-delay: 250ms; -} - -.loading_bubble > span:nth-child(4) { - top: 12.5px; - left: 12.5px; - - animation-delay: 500ms; - -webkit-animation-delay: 500ms; -} - -.loading_bubble > span:nth-child(3) { - top: 12.5px; - left: 2.5px; - - animation-delay: 750ms; - -webkit-animation-delay: 750ms; -} - -@keyframes p1 -{ - 0% { opacity: 0; } - 50% { opacity: 1; } - 100% { opacity: 0; } -} - -@-webkit-keyframes p1 /* Safari and Chrome */ -{ - 0% { opacity: 0; } - 50% { opacity: 1; } - 100% { opacity: 0; } -} diff --git a/botanjs/src/Astro/Blog/Components/SiteFile.js b/botanjs/src/Astro/Blog/Components/SiteFile.js index 5b8a06e..555dd46 100644 --- a/botanjs/src/Astro/Blog/Components/SiteFile.js +++ b/botanjs/src/Astro/Blog/Components/SiteFile.js @@ -32,37 +32,35 @@ } this.id = id; this.hash = hash; - this.type = IDOMElement( stage ).getDAttribute( "type" ); + this.type = IDOMElement( stage ).getDAttribute( "type" ); if(!( this.type == "default" || this.type == null )) return this; if( stage.getAttribute( "noauto" ) != null ) return this; var applyStructure = function( obj ) { - // remove loading bubbles - while( stage.hasChildNodes() ) stage.removeChild(stage.firstChild); - /** @type {_AstJson_.SiteFile} */ var finfo = JSON.parse( obj ).file; switch( finfo.type ) { case "image": - var node = Dand.wrap('img'); - var k = new IKey( "src", null ); + var node = Dand.tag( "img", false, stage )[0]; switch( IDOMElement(stage).getDAttribute('size') ) { case "small": - k.keyValue = config.path.image.small + hash + '.jpg'; + node.src = config.path.image.small + hash + '.jpg'; break; case "medium": - k.keyValue = config.path.image.medium + hash + '.jpg'; + node.src = config.path.image.medium + hash + '.jpg'; + break; + case "original": + node.src = config.path.image.original + hash + '.jpg'; break; default: // large - k.keyValue = config.path.image.large + hash + '.jpg'; + node.src = config.path.image.large + hash + '.jpg'; } - IDOMElement( node ).setAttribute( k ); stage.appendChild(Dand.wrapne( 'a', node @@ -125,9 +123,7 @@ // date form.appendChild( Dand.wrapne( 'sup', Dand.wrape( 'Date: ' + getSMStamp( new Date( finfo.date_created ) ) ) ) ); - stage.appendChild(form); - } }; diff --git a/botanjs/src/externs/_AstConf_.SiteFile.js b/botanjs/src/externs/_AstConf_.SiteFile.js index 1b6513c..9717773 100644 --- a/botanjs/src/externs/_AstConf_.SiteFile.js +++ b/botanjs/src/externs/_AstConf_.SiteFile.js @@ -17,5 +17,7 @@ _AstConf_.SiteFile = {}; _AstConf_.SiteFile.path.image.medium; /** @type {String} */ _AstConf_.SiteFile.path.image.large; + /** @type {String} */ + _AstConf_.SiteFile.path.image.original; /** @type {Array} */ _AstConf_.SiteFile.files;