forked from Botanical/BotanJS
		
	SiteFile can now have original size
This commit is contained in:
		@@ -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 + "\"";
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,6 @@
 | 
			
		||||
.b_entry img {
 | 
			
		||||
	max-width: 100%;
 | 
			
		||||
	height: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.inline-code {
 | 
			
		||||
 
 | 
			
		||||
@@ -120,4 +120,5 @@
 | 
			
		||||
 | 
			
		||||
.h_img img {
 | 
			
		||||
	max-width: 100%;
 | 
			
		||||
	height: auto;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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; }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -39,30 +39,28 @@
 | 
			
		||||
 | 
			
		||||
		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);
 | 
			
		||||
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
		};
 | 
			
		||||
 
 | 
			
		||||
@@ -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;
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user