forked from Botanical/BotanJS
Added footnote support
This commit is contained in:
parent
eda4250533
commit
041617f0b4
@ -0,0 +1,37 @@
|
|||||||
|
(function ()
|
||||||
|
{
|
||||||
|
var ns = __namespace( "Astro.Blog.AstroEdit.SmartInput.CandidateAction" );
|
||||||
|
|
||||||
|
/** @type {System.utils.IKey} */
|
||||||
|
var IKey = __import( "System.utils.IKey" );
|
||||||
|
/** @type {System.utils.DataKey} */
|
||||||
|
var DataKey = __import( "System.utils.DataKey" );
|
||||||
|
/** @type {Dandelion.IDOMElement} */
|
||||||
|
var IDOMElement = __import( "Dandelion.IDOMElement" );
|
||||||
|
/** @type {Dandelion} */
|
||||||
|
var Dand = __import( "Dandelion" );
|
||||||
|
|
||||||
|
/** @type {Astro.Blog.AstroEdit.SmartInput.ICandidateAction} */
|
||||||
|
var Footnote = function ( visualizer, key )
|
||||||
|
{
|
||||||
|
this.visualizer = visualizer;
|
||||||
|
this.key = key;
|
||||||
|
};
|
||||||
|
|
||||||
|
Footnote.prototype.GetCandidates = function( handler )
|
||||||
|
{
|
||||||
|
handler( false );
|
||||||
|
};
|
||||||
|
|
||||||
|
Footnote.prototype.Process = function( content )
|
||||||
|
{
|
||||||
|
this.visualizer.insertSnippet( "footnote", { "value": content } );
|
||||||
|
};
|
||||||
|
|
||||||
|
Footnote.prototype.Retreat = function( sender, e )
|
||||||
|
{
|
||||||
|
return sender.value == "" && e.keyCode == 8; // Backspace
|
||||||
|
};
|
||||||
|
|
||||||
|
ns[ NS_EXPORT ]( EX_CLASS, "Footnote", Footnote );
|
||||||
|
})();
|
@ -140,6 +140,7 @@
|
|||||||
var insert = function() { return Dand.textNode( "" ); };
|
var insert = function() { return Dand.textNode( "" ); };
|
||||||
|
|
||||||
var ModLevels = [];
|
var ModLevels = [];
|
||||||
|
var BindingBox = null;
|
||||||
|
|
||||||
ModLevels.Cands = function() { return ModLevels[0][0]; };
|
ModLevels.Cands = function() { return ModLevels[0][0]; };
|
||||||
ModLevels.Action = function() { return ModLevels[0][1]; };
|
ModLevels.Action = function() { return ModLevels[0][1]; };
|
||||||
@ -232,11 +233,11 @@
|
|||||||
if( v == "" )
|
if( v == "" )
|
||||||
{
|
{
|
||||||
insert = function() { return Dand.textNode( "`" ); };
|
insert = function() { return Dand.textNode( "`" ); };
|
||||||
sender.BindingBox.close( true );
|
BindingBox.close( true );
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
sender.BindingBox.close();
|
BindingBox.close();
|
||||||
// Insert the code snippet with inline flag
|
// Insert the code snippet with inline flag
|
||||||
visualizer.insertSnippet( "code", { "inline": "on", "lang": "plain", "value": v } );
|
visualizer.insertSnippet( "code", { "inline": "on", "lang": "plain", "value": v } );
|
||||||
break;
|
break;
|
||||||
@ -249,7 +250,7 @@
|
|||||||
if( ModLevels.Cands().Empty && 1 < ModLevels.length )
|
if( ModLevels.Cands().Empty && 1 < ModLevels.length )
|
||||||
{
|
{
|
||||||
ModLevels.Action()( sender.value.substr( 1 ) );
|
ModLevels.Action()( sender.value.substr( 1 ) );
|
||||||
sender.BindingBox.close();
|
BindingBox.close();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -259,19 +260,19 @@
|
|||||||
{
|
{
|
||||||
insert = undefined;
|
insert = undefined;
|
||||||
var close = ModLevels.Action()( selected.getDAttribute( "key" ) );
|
var close = ModLevels.Action()( selected.getDAttribute( "key" ) );
|
||||||
if( close ) sender.BindingBox.close();
|
if( close ) BindingBox.close();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
// Insert this text directly
|
// Insert this text directly
|
||||||
var v = Dand.textNode( sender.value.substr( 1 ) );
|
var v = Dand.textNode( sender.value.substr( 1 ) );
|
||||||
insert = function() { return v; };
|
insert = function() { return v; };
|
||||||
sender.BindingBox.close( true );
|
BindingBox.close( true );
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 27: // Esc
|
case 27: // Esc
|
||||||
sender.BindingBox.close();
|
BindingBox.close();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 9: // Tab
|
case 9: // Tab
|
||||||
@ -389,6 +390,7 @@
|
|||||||
title( true );
|
title( true );
|
||||||
stage()[0].value = "`";
|
stage()[0].value = "`";
|
||||||
stage()[0].setAttribute( "placeholder", ModLevels.Cands().desc );
|
stage()[0].setAttribute( "placeholder", ModLevels.Cands().desc );
|
||||||
|
BindingBox.show();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -396,7 +398,7 @@
|
|||||||
{
|
{
|
||||||
if( ModLevels.length == 1 )
|
if( ModLevels.length == 1 )
|
||||||
{
|
{
|
||||||
sender.BindingBox.close();
|
BindingBox.close();
|
||||||
destructor.Destruct();
|
destructor.Destruct();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -414,6 +416,7 @@
|
|||||||
|
|
||||||
input.selectionStart = 1;
|
input.selectionStart = 1;
|
||||||
input.selectionEnd = input.value.length;
|
input.selectionEnd = input.value.length;
|
||||||
|
BindingBox.show();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -434,7 +437,7 @@
|
|||||||
MsgBox.show();
|
MsgBox.show();
|
||||||
|
|
||||||
var Command = stage()[0];
|
var Command = stage()[0];
|
||||||
Command.BindingBox = MsgBox;
|
BindingBox = MsgBox;
|
||||||
|
|
||||||
Command.focus();
|
Command.focus();
|
||||||
|
|
||||||
|
@ -0,0 +1,3 @@
|
|||||||
|
.v_boundary[data-type="Footnote"] {
|
||||||
|
color: #f15a24;
|
||||||
|
}
|
@ -0,0 +1,97 @@
|
|||||||
|
(function ()
|
||||||
|
{
|
||||||
|
var ns = __namespace( "Astro.Blog.AstroEdit.Visualizer.Snippet" );
|
||||||
|
|
||||||
|
/** @type {System.utils.IKey} */
|
||||||
|
var IKey = __import( "System.utils.IKey" );
|
||||||
|
/** @type {System.utils.DataKey} */
|
||||||
|
var DataKey = __import( "System.utils.DataKey" );
|
||||||
|
/** @type {Dandelion.IDOMElement} */
|
||||||
|
var IDOMElement = __import( "Dandelion.IDOMElement" );
|
||||||
|
/** @type {Dandelion} */
|
||||||
|
var Dand = __import( "Dandelion" );
|
||||||
|
/** @type {Components.MessageBox} */
|
||||||
|
var MessageBox = __import( "Components.MessageBox" );
|
||||||
|
|
||||||
|
var escapeStr = ns[ NS_INVOKE ]( "escapeStr" );
|
||||||
|
|
||||||
|
var footnote = function (insertSnippet, snippetWrap, createContext, override)
|
||||||
|
{
|
||||||
|
var temp, i, j
|
||||||
|
|
||||||
|
, handler = function ()
|
||||||
|
{
|
||||||
|
// Input fields
|
||||||
|
var v_snippetInput = Dand.wrap( "textarea", null, "v_snippet_input" );
|
||||||
|
|
||||||
|
if ( this._stage )
|
||||||
|
{
|
||||||
|
v_snippetInput.value = this._mText;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Popup MessageBox
|
||||||
|
new MessageBox(
|
||||||
|
"Insert Footnote"
|
||||||
|
, v_snippetInput
|
||||||
|
, "OK", "Cancel"
|
||||||
|
, visualizer.bind({ mText: v_snippetInput, stage: this._stage })
|
||||||
|
).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
, visualizer = function (submitted, override)
|
||||||
|
{
|
||||||
|
|
||||||
|
var mText, stage = this.stage;
|
||||||
|
|
||||||
|
mText = override ? override.value : this.mText.value;
|
||||||
|
|
||||||
|
if (submitted && mText)
|
||||||
|
{
|
||||||
|
if (!stage)
|
||||||
|
{
|
||||||
|
// Visualize component
|
||||||
|
temp = Dand.wrapne( "span", "^", [
|
||||||
|
new DataKey( "value", mText )
|
||||||
|
]);
|
||||||
|
|
||||||
|
insertSnippet(
|
||||||
|
j = snippetWrap( "Footnote", temp, false, "span" )
|
||||||
|
, Boolean( override )
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
IDOMElement( stage ).setAttribute(new DataKey( "value", mText ));
|
||||||
|
temp = stage;
|
||||||
|
}
|
||||||
|
|
||||||
|
i = { _mText: mText, _stage: temp };
|
||||||
|
|
||||||
|
// Set context menu
|
||||||
|
createContext( i, j, handler );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( override )
|
||||||
|
{
|
||||||
|
visualizer( true, override );
|
||||||
|
override = false;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return handler;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var compile = function (stage)
|
||||||
|
{
|
||||||
|
// [footnote][/footnote]
|
||||||
|
return "[footnote]" + escapeStr( IDOMElement(stage).getDAttribute("value") ) + "[/footnote]";
|
||||||
|
};
|
||||||
|
|
||||||
|
__static_method( footnote, "compile", compile );
|
||||||
|
|
||||||
|
ns[ NS_EXPORT ]( EX_CLASS, "Footnote", footnote );
|
||||||
|
})();
|
@ -38,6 +38,7 @@
|
|||||||
, "Html" , "background: coral;"
|
, "Html" , "background: coral;"
|
||||||
, "SiteFile" , "background: royalblue;"
|
, "SiteFile" , "background: royalblue;"
|
||||||
, "Heading" , ""
|
, "Heading" , ""
|
||||||
|
, "Footnote" , ""
|
||||||
, "ArticleLink" , ""
|
, "ArticleLink" , ""
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -51,6 +51,7 @@
|
|||||||
color: #555;
|
color: #555;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
min-height: 155px;
|
min-height: 155px;
|
||||||
|
margin-bottom: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b_bodyWrapper a { color: #f15a24; }
|
.b_bodyWrapper a { color: #f15a24; }
|
||||||
|
31
botanjs/src/Astro/Blog/Components/Footnote.css
Normal file
31
botanjs/src/Astro/Blog/Components/Footnote.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.footnote {
|
||||||
|
padding-top: 0.25em;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote {
|
||||||
|
color: #555;
|
||||||
|
list-style-type: decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote > li {
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote > li[focused] {
|
||||||
|
background-color: #EE5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote:before {
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
width: 40%;
|
||||||
|
|
||||||
|
border-top: 1px black solid;
|
||||||
|
}
|
46
botanjs/src/Astro/Blog/Components/Footnote.js
Normal file
46
botanjs/src/Astro/Blog/Components/Footnote.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
(function(){
|
||||||
|
var ns = __namespace( "Astro.Blog.Components.Footnote" );
|
||||||
|
/** @type {Dandelion} */
|
||||||
|
var Dand = __import( "Dandelion" );
|
||||||
|
/** @type {Dandelion.IDOMElement} */
|
||||||
|
var IDOMElement = __import( "Dandelion.IDOMElement" );
|
||||||
|
/** @type {Astro.Bootstrap} */
|
||||||
|
var Bootstrap = __import( "Astro.Bootstrap" );
|
||||||
|
/** @type {Astro.Blog.Config} */
|
||||||
|
var Config = __import( "Astro.Blog.Config" );
|
||||||
|
/** @type {Astro.utils.Date} */
|
||||||
|
var XDate = __import( "Astro.utils.Date" );
|
||||||
|
|
||||||
|
/** @param {Dandelion.IDOMElement} elem */
|
||||||
|
var Footnote = function( elem )
|
||||||
|
{
|
||||||
|
var jumpers = Dand.glass( "ft", true );
|
||||||
|
if( !jumpers.length ) return;
|
||||||
|
|
||||||
|
var notes = Dand.glass( "footnote", true )[0];
|
||||||
|
|
||||||
|
jumpers.forEach( function( e ) {
|
||||||
|
|
||||||
|
var a = e.first( 1 );
|
||||||
|
IDOMElement( a ).addEventListener( "Click", function()
|
||||||
|
{
|
||||||
|
var clicked = a.hash.substr( 1 );
|
||||||
|
notes.foreach( 1, function( e ) {
|
||||||
|
if( e.id == clicked )
|
||||||
|
{
|
||||||
|
e.setAttribute( "focused", 1 );
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
e.removeAttribute( "focused" );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} );
|
||||||
|
};
|
||||||
|
|
||||||
|
Bootstrap.regInit(function() {
|
||||||
|
new Footnote();
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
@ -36,6 +36,7 @@
|
|||||||
|
|
||||||
.section {
|
.section {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
margin: 1em -2em;
|
margin: 1em -2em;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
|
Loading…
Reference in New Issue
Block a user