Implement html page into "main_top"

MoritzCH · 2019-03-07 23:33:47

Hi all,

my TTG page is up and running for a few years now and it's time for a revamp. Recently I bought Backlight 2 and set up a few templates. Right now I am playing around with an idea
of a new way to navigate trough my galleries and pictures. I already have a working example and would like to implement the code into the Backlight 2 version using phplugins so the map
(http://backlight2.globetrotter.one/Test/europe.html) will show up on the main column (2 column layout, nav will be removed shortly -- http://backlight2.globetrotter.one/).

This is the code of the working standalone example:

<html>
	<head>
		<!-- Viewport for Responsivity -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="mapplic/mapplic.css">
	</head>
	<body>
		<div class="map-container">
			<div id="mapplic" class="mapplic-transparent"></div>
		</div>
		<!-- Scripts -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/hammer.min.js"></script>
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
		<script type="text/javascript" src="mapplic/mapplic.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#mapplic').mapplic({
					source: 'europe.json',
					height: 700,
					sidebar: true,
					minimap: false,
					zoomoutclose: true,
					developer: false,
					search: false,
					fullscreen: false,	
					alphabetic: true,
					maxscale: 7,
					mapfill: true,
					zoommargin: 0
				});
			});
		</script>
	</body>
</html>

I tried to use the "function main_top() { }" function but always get an error that the "mapplic" function is not available. Maybe I have to use both (main_top and scripts) functions but yeah, can't get it to work right now
Don't know if anyone can help me but I would appreciate any help I can get.

Thank you in advance!

rod barbee · 2019-03-08 00:21:50

you don't need the <html> or <body> tags. They are already a part of all pages.

Don't add jQuery again (jquery.min.js), Backlight already loads that.

I don't think you'll need the <meta name="viewport" ... line as all Backlight pages are already responsive.

for your <link rel.... css calls, where are those css files? the url shows that they are on the same level as the page itself. They should probably be in the /backlight/custom/css/ folder. Then change the url in your code using that path.

Use phplugins to add the css and the scripts.
For the css, use the head () hook to add the css links.
for the script, use the scripts () hook.

There are two ways to add scripts in the scripts hook.

Since you have single quotes in the main script, you either need to escape them by preceding each with a backslash: \' or use the method demonstrated in the phplugins-pangolin-sample.php file found in /backlight/custom/phplugins.
(and that's the file you need to start with since phplugins has changes since Backlight 1)

in the main_top () hook, echo everything starting with <div class="map-container"> and
ending with the final </div>

MoritzCH · 2019-03-08 01:04:36

You're absolutely right!

This is the working phplugins Code:

function head(){
//echo'<link rel="stylesheet" type="text/css" href="../../Test/css/style.css">';
echo'<link rel="stylesheet" type="text/css" href="../../Test/mapplic/mapplic.css">';
}
	
function scripts() { 
echo'<script type="text/javascript" src="../../Test/js/jquery.mousewheel.js"></script>';
echo'<script type="text/javascript" src="../../Test/js/script.js"></script>';
echo'<script type="text/javascript" src="../../Test/mapplic/mapplic.js"></script>';
echo'<script type="text/javascript" src="../../Test/js/hammer.min.js"></script>';

echo <<<SCRIPT
	<script>
		$(document).ready(function() {
		$('#mapplic').mapplic({
		source: '../../Test/europe.json',
		height: 700,
		sidebar: true,
		minimap: false,
		zoomoutclose: true,
		developer: false,
		search: false,
		fullscreen: false,	
		alphabetic: true,
		maxscale: 7,
		mapfill: true,
		zoommargin: 0
		});
		});
	</script>

SCRIPT;
return false;
}

	
function main_top(){
echo'<div class="map-container">';
echo'<div id="mapplic" class="mapplic-transparent"></div>';
echo'</div>';
}

This is just a quick n dirty way to get an idea how the page could look like (all the files will be moved to a proper location when I'm done).
The next step is to minimize the necessary files (like combine css files ....) but this helped me a lot.

Thank you very much!!!

rod barbee · 2019-03-08 01:27:33

you don't need to echo each line if you don't want to. This works just as well:

function main_top(){
echo'
<div class="map-container">
<div id="mapplic" class="mapplic-transparent"></div>
</div>';
}

and

function scripts() { 
echo'
<script type="text/javascript" src="../../Test/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../Test/js/script.js"></script>
<script type="text/javascript" src="../../Test/mapplic/mapplic.js"></script>
<script type="text/javascript" src="../../Test/js/hammer.min.js"></script>
';

echo <<<SCRIPT....

......
SCRIPT;
return false;
}

Community @ The Turning Gate

#1 2019-03-07 23:33:47

Implement html page into "main_top"

#2 2019-03-08 00:21:50

Re: Implement html page into "main_top"

#3 2019-03-08 01:04:36

Re: Implement html page into "main_top"

#4 2019-03-08 01:27:33

Re: Implement html page into "main_top"

Board footer