| 
							
							
							
						 |  |  | @@ -1,16 +1,13 @@ | 
		
	
		
			
				|  |  |  |  | .context: 1 | 
		
	
		
			
				|  |  |  |  | .type: masonry | 
		
	
		
			
				|  |  |  |  | .width: 33 | 
		
	
		
			
				|  |  |  |  | created: 20240129095948486 | 
		
	
		
			
				|  |  |  |  | creator: Octt | 
		
	
		
			
				|  |  |  |  | modified: 20240130144632702 | 
		
	
		
			
				|  |  |  |  | modified: 20240201203754580 | 
		
	
		
			
				|  |  |  |  | modifier: Octt | 
		
	
		
			
				|  |  |  |  | tags: $:/Apps | 
		
	
		
			
				|  |  |  |  | title: $:/Apps/MagicBox | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | \define SearchResults(fields) | 
		
	
		
			
				|  |  |  |  | <$list filter="[!is[system]search:$fields${$:/temp/MagicBox!!.input}sort[title]limit[100]]"> | 
		
	
		
			
				|  |  |  |  | 	<div class=`MagicBoxApplet result ${[{$:/Apps/MagicBox!!.type}]}$` style=`background-image: url("${[{!!page-cover}]}$");`> | 
		
	
		
			
				|  |  |  |  | <$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}}/> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -18,8 +15,8 @@ title: $:/Apps/MagicBox | 
		
	
		
			
				|  |  |  |  | 				<h3> | 
		
	
		
			
				|  |  |  |  | 					<$link to={{!!title}} tabindex="-1"/> | 
		
	
		
			
				|  |  |  |  | 				</h3> | 
		
	
		
			
				|  |  |  |  | 				<$if value={{$:/Apps/MagicBox!!.context}}> | 
		
	
		
			
				|  |  |  |  | 					<$context term={{$:/temp/MagicBox!!.input}} tabindex="-1"/> | 
		
	
		
			
				|  |  |  |  | 				<$if value={{$:/state/Apps/MagicBox!!.context}}> | 
		
	
		
			
				|  |  |  |  | 					<$context term={{$:/temp/Apps/MagicBox!!.input}} tabindex="-1"/> | 
		
	
		
			
				|  |  |  |  | 				</$if> | 
		
	
		
			
				|  |  |  |  | 			<!--</$link>--> | 
		
	
		
			
				|  |  |  |  | 		</$button> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -28,14 +25,14 @@ title: $:/Apps/MagicBox | 
		
	
		
			
				|  |  |  |  | \end | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | <div class="MagicBoxApplet options"> | 
		
	
		
			
				|  |  |  |  | 	<$checkbox field=".context" checked="1">Context</$checkbox> | 
		
	
		
			
				|  |  |  |  | 	<$checkbox tiddler="$:/state/Apps/MagicBox" field=".context" checked="1">Context</$checkbox> | 
		
	
		
			
				|  |  |  |  | 	  | 
		
	
		
			
				|  |  |  |  | 	<!--<$edit-text field=".type" placeholder="Display Type"/>--> | 
		
	
		
			
				|  |  |  |  | 	<$checkbox field=".type" checked="grid" unchecked="masonry">Fixed Grid</$checkbox> | 
		
	
		
			
				|  |  |  |  | 	<$checkbox tiddler="$:/state/Apps/MagicBox" field=".type" checked="grid" unchecked="masonry">Fixed Grid</$checkbox> | 
		
	
		
			
				|  |  |  |  | 	  | 
		
	
		
			
				|  |  |  |  | 	<$range field=".width" min="19" max="49"/>{{!!.width}} | 
		
	
		
			
				|  |  |  |  | 	<$range tiddler="$:/state/Apps/MagicBox" field=".width" min="19" max="49"/>{{$:/state/Apps/MagicBox!!.width}} | 
		
	
		
			
				|  |  |  |  | 	  | 
		
	
		
			
				|  |  |  |  | 	<$edit-text tiddler="$:/temp/MagicBox" field=".input" class="OcttKB-BorderFocus _input" placeholder="Search..." tabindex="0"/> | 
		
	
		
			
				|  |  |  |  | 	<$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"/> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -48,8 +45,8 @@ title: $:/Apps/MagicBox | 
		
	
		
			
				|  |  |  |  | <style> | 
		
	
		
			
				|  |  |  |  | 	@media (max-width: 500px) { | 
		
	
		
			
				|  |  |  |  | 		.MagicBoxApplet.result { | 
		
	
		
			
				|  |  |  |  | 			min-width: calc(({{!!.width}}% * 2) - 16px) !important; | 
		
	
		
			
				|  |  |  |  | 			max-width: calc(({{!!.width}}% * 3) - 16px) !important; | 
		
	
		
			
				|  |  |  |  | 			min-width: calc(({{$:/state/Apps/MagicBox!!.width}}% * 2) - 16px) !important; | 
		
	
		
			
				|  |  |  |  | 			max-width: calc(({{$:/state/Apps/MagicBox!!.width}}% * 3) - 16px) !important; | 
		
	
		
			
				|  |  |  |  | 		} | 
		
	
		
			
				|  |  |  |  | 	} | 
		
	
		
			
				|  |  |  |  | 	.MagicBoxApplet.result { | 
		
	
	
		
			
				
					
					|  |  |  | @@ -60,12 +57,12 @@ title: $:/Apps/MagicBox | 
		
	
		
			
				|  |  |  |  | 		background-position: center; | 
		
	
		
			
				|  |  |  |  | 	} | 
		
	
		
			
				|  |  |  |  | 	.MagicBoxApplet.result.grid { | 
		
	
		
			
				|  |  |  |  | 		width: calc({{!!.width}}% - 16px); | 
		
	
		
			
				|  |  |  |  | 		width: calc({{$:/state/Apps/MagicBox!!.width}}% - 16px); | 
		
	
		
			
				|  |  |  |  | 		aspect-ratio: 16/9; | 
		
	
		
			
				|  |  |  |  | 		vertical-align: top; | 
		
	
		
			
				|  |  |  |  | 	} | 
		
	
		
			
				|  |  |  |  | 	.MagicBoxApplet.result.masonry { | 
		
	
		
			
				|  |  |  |  | 		max-width: calc({{!!.width}}% - 16px); | 
		
	
		
			
				|  |  |  |  | 		max-width: calc({{$:/state/Apps/MagicBox!!.width}}% - 16px); | 
		
	
		
			
				|  |  |  |  | 	} | 
		
	
		
			
				|  |  |  |  | 	.MagicBoxApplet.result h3 { | 
		
	
		
			
				|  |  |  |  | 		margin-top: 25%; | 
		
	
	
		
			
				
					
					|  |  |  | @@ -97,11 +94,11 @@ title: $:/Apps/MagicBox | 
		
	
		
			
				|  |  |  |  | 	} | 
		
	
		
			
				|  |  |  |  | </style> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | <$if value={{{ [{$:/temp/MagicBox!!.input}split[]count[]compare:integer:gteq[3]then[1]] }}}> | 
		
	
		
			
				|  |  |  |  | 	<$if value={{{ [search:title{$:/temp/MagicBox!!.input}then[0]else[1]] }}}> | 
		
	
		
			
				|  |  |  |  | <$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/MagicBox!!.input}} /> | 
		
	
		
			
				|  |  |  |  | 			<$action-sendmessage $message="tm-new-tiddler" title={{$:/temp/Apps/MagicBox!!.input}} /> | 
		
	
		
			
				|  |  |  |  | 			Create as New Tiddler | 
		
	
		
			
				|  |  |  |  | 		</$button> | 
		
	
		
			
				|  |  |  |  | 	</$if> | 
		
	
	
		
			
				
					
					|  |  |  |   |