jow- · November 30, 2023 13:36
diff --git a/toh-embedding.html b/toh-embedding.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <title>OpenWrt Devices</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />

 <script src="./toh.js"></script>

 </head>

 <body>
    <h1>Embedding Test</h1>
    <p>Some text blah blah</p>

    <div class="wrap_toh wrap_toh_brand_tp-link plugin_wrap">
        <p>
            ToH data is loading...
        </p>
    </div>

    <p>Some more text blah blah</p>
 </body>

 </body>

 </html>
diff --git a/toh.js b/toh.js
 function loadStyle(url) {
    return new Promise(function(acceptFn, rejectFn) {
        var link = document.createElement('link');

        link.onload = acceptFn;
        link.onerror = rejectFn;

        document.querySelector('head').appendChild(link);

        link.rel = 'stylesheet';
        link.href = url;
    });
 }

 function loadScript(url) {
    return new Promise(function(acceptFn, rejectFn) {
        var script = document.createElement('script');

        script.onload = acceptFn;
        script.onerror = rejectFn;

        document.querySelector('head').appendChild(script);

        script.src = url;
    });
 }


 const TOH_BASE_URL = 'https://aparcar.org/openwrt-devices/inject/';

 function initToH() {
    Promise.all([
        loadStyle('https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css'),
        loadStyle('https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.dataTables.min.css'),
        loadScript('https://code.jquery.com/jquery-3.7.0.js')
    ]).then(function() {
        return loadScript('https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js');
    }).then(function() {
        return Promise.all([
            fetch(TOH_BASE_URL),
            loadScript('https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js'),
        ]);
    }).then(function(promises) {
        return promises[0].text();
    }).then(function(toh_table) {
        var parse = new DOMParser();
        var html = parse.parseFromString(toh_table, 'text/html');

        document.querySelectorAll('div.wrap_toh').forEach(function(wrapper) {
            $(wrapper).empty().append(html.querySelector('#devices').cloneNode(true));

            // Setup - add a text input to each footer cell
            $(wrapper).find('thead tr')
                .clone(true)
                .addClass('filters')
                .appendTo('#devices thead');

            // Obtain filter presets
            var filterValues = [];

            $(wrapper).find('thead tr th').each(function(i, th) {
                var classNamePrefix = `wrap_toh_${th.innerText.trim().toLowerCase().replace(/[^a-z0-9_.-]+/g, '_')}_`;

                wrapper.classList.forEach(function(className) {
                    if (className.indexOf(classNamePrefix) === 0) {
                        var val = className.substring(classNamePrefix.length);

                        if (filterValues[i])
                            filterValues[i] += '|' + val;
                        else
                            filterValues[i] = val;
                    }
                });
            });

            // Init datatable
            var table = $(wrapper).children('table');
            var unorderable = [];
            var ordering = [];

            table.find('.filters th').each(function(colIdx, th) {
                var title = th.innerText.trim();

                // Disable sort and filter input for fixed columns
                if (title == 'Device Page' || title == '' || filterValues[colIdx] != null) {
                    $(th).html('&nbsp;');
                    unorderable.push(colIdx);
                }
                // User filters for remaining columns
                else {
                    $(th).html('<input style="width:100%" type="text" placeholder="' + title + '" />');
                    ordering.push([ colIdx, 'asc' ]);
                }
            });

            table.find('tr th').each(function(colIdx, th) {
                th.style.maxWidth = 0;
                th.style.whiteSpace = 'nowrap';
                th.style.overflow = 'hidden';
                th.style.textOverflow = 'ellipsis';
            });

            var xtable = $(wrapper).children('table').DataTable({
                pageLength: 50,
                orderCellsTop: true,
                fixedHeader: true,
                order: ordering,
                columnDefs: [ { orderable: false, targets: unorderable } ],
                initComplete: function () {
                    var api = this.api();
                    var datatable = this;

                    // For each column
                    api
                        .columns()
                        .eq(0)
                        .each(function (colIdx) {
                            var column = api.column(colIdx);

                            if (filterValues[colIdx] != null)
                                column.search(filterValues[colIdx], true, false).draw();

                            // On every keypress in this input
                            $(
                                'input',
                                $('.filters th').eq($(column.header()).index())
                            )
                                .off('keyup change')
                                .on('change', function (e) {
                                    // Get the search value
                                    $(this).attr('title', $(this).val());
                                    var regexr = '({search})'; //$(this).parents('th').find('select').val();

                                    var cursorPosition = this.selectionStart;
                                    // Search the column for that value
                                    api
                                        .column(colIdx)
                                        .search(
                                            this.value != ''
                                                ? regexr.replace('{search}', '(((' + this.value + ')))')
                                                : '',
                                            this.value != '',
                                            this.value == ''
                                        )
                                        .draw();
                                })
                                .on('keyup', function (e) {
                                    e.stopPropagation();

                                    $(this).trigger('change');
                                    $(this)
                                        .focus()[0]
                                        .setSelectionRange(cursorPosition, cursorPosition);
                                });
                        });
                },
            });
        });
    });
 }

 document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('div.wrap_toh'))
        initToH();
 });
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>OpenWrt Devices</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />

	<script src="./toh.js"></script>

	</head>

	<body>
	<h1>Embedding Test</h1>
	<p>Some text blah blah</p>

	<div class="wrap_toh wrap_toh_brand_tp-link plugin_wrap">
	<p>
	ToH data is loading...
	</p>
	</div>

	<p>Some more text blah blah</p>
	</body>

	</body>

	</html>
	function loadStyle(url) {
	return new Promise(function(acceptFn, rejectFn) {
	var link = document.createElement('link');

	link.onload = acceptFn;
	link.onerror = rejectFn;

	document.querySelector('head').appendChild(link);

	link.rel = 'stylesheet';
	link.href = url;
	});
	}

	function loadScript(url) {
	return new Promise(function(acceptFn, rejectFn) {
	var script = document.createElement('script');

	script.onload = acceptFn;
	script.onerror = rejectFn;

	document.querySelector('head').appendChild(script);

	script.src = url;
	});
	}


	const TOH_BASE_URL = 'https://aparcar.org/openwrt-devices/inject/';

	function initToH() {
	Promise.all([
	loadStyle('https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css'),
	loadStyle('https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.dataTables.min.css'),
	loadScript('https://code.jquery.com/jquery-3.7.0.js')
	]).then(function() {
	return loadScript('https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js');
	}).then(function() {
	return Promise.all([
	fetch(TOH_BASE_URL),
	loadScript('https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js'),
	]);
	}).then(function(promises) {
	return promises[0].text();
	}).then(function(toh_table) {
	var parse = new DOMParser();
	var html = parse.parseFromString(toh_table, 'text/html');

	document.querySelectorAll('div.wrap_toh').forEach(function(wrapper) {
	$(wrapper).empty().append(html.querySelector('#devices').cloneNode(true));

	// Setup - add a text input to each footer cell
	$(wrapper).find('thead tr')
	.clone(true)
	.addClass('filters')
	.appendTo('#devices thead');

	// Obtain filter presets
	var filterValues = [];

	$(wrapper).find('thead tr th').each(function(i, th) {
	var classNamePrefix = `wrap_toh_${th.innerText.trim().toLowerCase().replace(/[^a-z0-9_.-]+/g, '_')}_`;

	wrapper.classList.forEach(function(className) {
	if (className.indexOf(classNamePrefix) === 0) {
	var val = className.substring(classNamePrefix.length);

	if (filterValues[i])
	filterValues[i] += '\|' + val;
	else
	filterValues[i] = val;
	}
	});
	});

	// Init datatable
	var table = $(wrapper).children('table');
	var unorderable = [];
	var ordering = [];

	table.find('.filters th').each(function(colIdx, th) {
	var title = th.innerText.trim();

	// Disable sort and filter input for fixed columns
	if (title == 'Device Page' \|\| title == '' \|\| filterValues[colIdx] != null) {
	$(th).html(' ');
	unorderable.push(colIdx);
	}
	// User filters for remaining columns
	else {
	$(th).html('<input style="width:100%" type="text" placeholder="' + title + '" />');
	ordering.push([ colIdx, 'asc' ]);
	}
	});

	table.find('tr th').each(function(colIdx, th) {
	th.style.maxWidth = 0;
	th.style.whiteSpace = 'nowrap';
	th.style.overflow = 'hidden';
	th.style.textOverflow = 'ellipsis';
	});

	var xtable = $(wrapper).children('table').DataTable({
	pageLength: 50,
	orderCellsTop: true,
	fixedHeader: true,
	order: ordering,
	columnDefs: [ { orderable: false, targets: unorderable } ],
	initComplete: function () {
	var api = this.api();
	var datatable = this;

	// For each column
	api
	.columns()
	.eq(0)
	.each(function (colIdx) {
	var column = api.column(colIdx);

	if (filterValues[colIdx] != null)
	column.search(filterValues[colIdx], true, false).draw();

	// On every keypress in this input
	$(
	'input',
	$('.filters th').eq($(column.header()).index())
	)
	.off('keyup change')
	.on('change', function (e) {
	// Get the search value
	$(this).attr('title', $(this).val());
	var regexr = '({search})'; //$(this).parents('th').find('select').val();

	var cursorPosition = this.selectionStart;
	// Search the column for that value
	api
	.column(colIdx)
	.search(
	this.value != ''
	? regexr.replace('{search}', '(((' + this.value + ')))')
	: '',
	this.value != '',
	this.value == ''
	)
	.draw();
	})
	.on('keyup', function (e) {
	e.stopPropagation();

	$(this).trigger('change');
	$(this)
	.focus()[0]
	.setSelectionRange(cursorPosition, cursorPosition);
	});
	});
	},
	});
	});
	});
	}

	document.addEventListener('DOMContentLoaded', function() {
	if (document.querySelector('div.wrap_toh'))
	initToH();
	});