commit 2ede966b719a98ebba7b8c17ed303427bd579e99
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2022-04-04T13:43:35Z |
|---|
| subject | SiteFile can now have original size |
|---|
commit 2ede966b719a98ebba7b8c17ed303427bd579e99
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2022-04-04T13:43:35Z
SiteFile can now have original size
---
.../Blog/AstroEdit/Visualizer/Snippet/SiteFile.js | 25 +++++++-
botanjs/src/Astro/Blog/Components/Entry/Blog.css | 1 +
botanjs/src/Astro/Blog/Components/Entry/Home.css | 1 +
botanjs/src/Astro/Blog/Components/SiteFile.css | 73 ++--------------------
botanjs/src/Astro/Blog/Components/SiteFile.js | 20 +++---
botanjs/src/externs/_AstConf_.SiteFile.js | 2 +
6 files changed, 40 insertions(+), 82 deletions(-)
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;