created: 20240129095948486
creator: Octt
modified: 20240201203754580
modifier: Octt
tags: $:/Apps
title: $:/Apps/MagicBox

\define SearchResults(fields)
<$list filter="[!is[system]search:$fields${$:/temp/Apps/MagicBox!!.input}sort[title]limit[100]]">
	<div class=`MagicBoxApplet result ${[{$:/state/Apps/MagicBox!!.type}]}$` style=`background-image: url("${[{!!page-cover}]}$");`>
		<$button class="OcttKB-BorderFocus tc-btn-invisible">
			<$action-sendmessage $message="tm-close-tiddler" $param=<<closeOnChoose>>/>
			<$action-navigate $to={{!!title}}/>
			<!--<$link to={{!!title}}>-->
				<h3>
					<$link to={{!!title}} tabindex="-1"/>
				</h3>
				<$if value={{$:/state/Apps/MagicBox!!.context}}>
					<$context term={{$:/temp/Apps/MagicBox!!.input}} tabindex="-1"/>
				</$if>
			<!--</$link>-->
		</$button>
	</div>
</$list>
\end

<div class="MagicBoxApplet options">
	<$checkbox tiddler="$:/state/Apps/MagicBox" field=".context" checked="1">Context</$checkbox>
	&nbsp;
	<!--<$edit-text field=".type" placeholder="Display Type"/>-->
	<$checkbox tiddler="$:/state/Apps/MagicBox" field=".type" checked="grid" unchecked="masonry">Fixed Grid</$checkbox>
	&nbsp;
	<$range tiddler="$:/state/Apps/MagicBox" field=".width" min="19" max="49"/>{{$:/state/Apps/MagicBox!!.width}}
	&nbsp;
	<$edit-text tiddler="$:/temp/Apps/MagicBox" field=".input" class="OcttKB-BorderFocus _input" placeholder="Search..." tabindex="0"/>
</div>

<$action-sendmessage $message="tm-focus-selector" $param=".MagicBoxApplet.options > ._input"/>
<<script script='try {
	var inputElem = document.querySelector("div.tc-tiddler-frame.tc-tiddler-view-frame[data-tiddler-title=\"$:/Apps/MagicBox/Overlay\"] .MagicBoxApplet.options > ._input, .MagicBoxApplet.options > ._input");
	inputElem?.focus();
	inputElem?.select();
} catch(e) { $OcttKB.ErrAtLine(e) }'>><<script off>>

<style>
	@media (max-width: 500px) {
		.MagicBoxApplet.result {
			min-width: calc(({{$:/state/Apps/MagicBox!!.width}}% * 2) - 16px) !important;
			max-width: calc(({{$:/state/Apps/MagicBox!!.width}}% * 3) - 16px) !important;
		}
	}
	.MagicBoxApplet.result {
		margin: 8px;
		display: inline-block;
		background-color: lightgray;
		background-size: cover;
		background-position: center;
	}
	.MagicBoxApplet.result.grid {
		width: calc({{$:/state/Apps/MagicBox!!.width}}% - 16px);
		aspect-ratio: 16/9;
		vertical-align: top;
	}
	.MagicBoxApplet.result.masonry {
		max-width: calc({{$:/state/Apps/MagicBox!!.width}}% - 16px);
	}
	.MagicBoxApplet.result h3 {
		margin-top: 25%;
		padding: 8px;
		background-color: rgba(255, 255, 255, 0.75);
		text-align: center;
	}
	.MagicBoxApplet.result pre {
		color: initial;
		max-height: 10em;
		overflow-y: auto;
		margin: 0;
		top: 0.5em;
		position: relative;
		text-align: initial;
		font-size: small;
	}
	.MagicBoxApplet.result h3 > a {
		pointer-events: none;
	}
	.MagicBoxApplet.result > a,
	.MagicBoxApplet.result > button {
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.MagicBoxApplet.result > a:after {
		content: "" !important;
	}
</style>

<$if value={{{ [{$:/temp/Apps/MagicBox!!.input}split[]count[]compare:integer:gteq[3]then[1]] }}}>
	<$if value={{{ [search:title{$:/temp/Apps/MagicBox!!.input}then[0]else[1]] }}}>
		<$button>
			<$action-sendmessage $message="tm-close-tiddler" $param=<<closeOnChoose>>/>
			<$action-sendmessage $message="tm-new-tiddler" title={{$:/temp/Apps/MagicBox!!.input}} />
			Create as New Tiddler
		</$button>
	</$if>

	<div><br/><hr/><br/></div>

	Title or Caption matches:
	<br/><<SearchResults "title,caption">>

	<div><br/><hr/><br/></div>

	Tags or Text matches:
	<br/><<SearchResults "tags,text">>
</$if>