browse.html

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Browse - British Library Manuscripts</title>
        <link rel="shortcut icon" href="/resources/images/fav-icons/mss-favicon.ico" />
        
        <!-- Bootstrap 3 -->
        <link rel="stylesheet" type="text/css" href="/resources/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/resources/css/sm-core-css.css" />
        
        <!-- Srophe styles -->
        <link rel="stylesheet" type="text/css" href="/resources/css/syr-icon-fonts.css" />
        <link rel="stylesheet" type="text/css" href="/resources/css/style.css" />
        
        <link rel="stylesheet" type="text/css" media="print" href="/resources/css/print.css" />
        <link rel="stylesheet" href="/resources/css/dateRangeSlider.css">
        
        <!-- JQuery -->
        <link href="/resources/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
        <script src="/resources/js/jquery.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-ui/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/resources/js/jquery.smartmenus.min.js"></script>
        <script type="text/javascript" src="/resources/js/clipboard.min.js"></script>
        
        <!-- Bootstrap -->
        <script type="text/javascript" src="/resources/bootstrap/js/bootstrap.min.js"></script>
        <script defer="defer" data-domain="bl.syriac.uk" src="https://plausible.io/js/script.js"></script>
        
        <!-- keyboard widget css & script -->
        <link href="/resources/keyboard/css/keyboard.min.css" rel="stylesheet" />
        <link href="/resources/keyboard/css/keyboard-previewkeyset.min.css" rel="stylesheet" />
        <link href="/resources/keyboard/syr/syr.css" rel="stylesheet" />
        <script type="text/javascript" src="/resources/keyboard/syr/jquery.keyboard.js"></script>
        <script type="text/javascript" src="/resources/keyboard/js/jquery.keyboard.extension-mobile.min.js"></script>
        <script type="text/javascript" src="/resources/keyboard/js/jquery.keyboard.extension-navigation.min.js"></script>
        <script type="text/javascript" src="/resources/keyboard/syr/jquery.keyboard.extension-autocomplete.js"></script>
        <script type="text/javascript" src="/resources/keyboard/syr/keyboardSupport.js"></script>
        <script type="text/javascript" src="/resources/keyboard/syr/syr.js"></script>
        <script type="text/javascript" src="/resources/keyboard/layouts/ms-Greek.min.js"></script>
        <script type="text/javascript" src="/resources/keyboard/layouts/ms-Russian.min.js"></script>
        <script type="text/javascript" src="/resources/keyboard/layouts/ms-Arabic.min.js"></script>
<!--        <script type="text/javascript" src="/resources/js/keyboard.js"></script>-->
        <style>
        .facet-panel { background: #f8f9fa; padding: 15px; border-radius: 5px; }
        .facet-group { margin-bottom: 20px; }
        .facet-group label { font-weight: bold; display: block; margin-bottom: 5px; }
        .result-item { padding: 15px; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; }
        .result-item:hover { background: #f8f9fa; }
        .result-count { color: #666; margin-bottom: 15px; }
        .clear-filters { margin-top: 10px; }
        .main-content-block { padding-top: 70px; }
        footer { text-align: center; }
    </style>
    </head>
    <body style="background-color:white;">
    <script src="/resources/js/navbar-search.js"></script>
    <div id="navbar-container"></div>
    <div class="main-content-block">
        <div class="container-fluid">
            <div class="row">
                <!-- Left Sidebar - Facets -->
                <div class="col-md-3">
                    <div class="facet-panel">
                        <h4>Filter Results</h4>
                        <div id="facets"></div>
                        <button class="btn btn-sm btn-warning clear-filters" onclick="clearFilters()">Clear All Filters</button>
                    </div>
                </div>
                <!-- Right Content - Results -->
                <div class="col-md-9">
                    <h2>Browse Manuscripts</h2>
                    <div class="result-count" id="resultCount"></div>
                    <div id="results"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer-container"></div>   
    <script src="resources/js/dateRangeSlider.js"></script>
    <script>
        // Determine base URL based on environment
        const getBaseUrl = () => {
            const hostname = window.location.hostname;
            if (hostname === 'localhost' || hostname === '127.0.0.1') {
                return 'http://127.0.0.1:5500/exampleData';
            } else if (hostname.includes('dev') || hostname.includes('d2tcgfyrf82nxz')) {
                return 'https://d2tcgfyrf82nxz.cloudfront.net';
            } else {
                return '';
            }
        };
        const BASE_URL = getBaseUrl();

        let allData = [];
        let filteredData = [];
        let activeFilters = {};
        


        // Load JSON data
        async function loadData() {
            try {
                const response = await fetch('manuscripts.json');
                allData = await response.json();
                filteredData = [...allData];
                buildFacets();
                displayResults();
            } catch (error) {
                console.error('Error loading data:', error);
                $('#results').html('<div class="alert alert-danger">Error loading data</div>');
            }
        }

        // Build facet dropdowns from data
        function buildFacets() {
            const facetKeys = ['material', 'scriptLanguage', 'classification'];
            const facetsHtml = facetKeys.map(key => {
                // Get all unique values from allData, flattening arrays
                const allValues = new Set();
                allData.forEach(item => {
                    const val = item[key];
                    if (Array.isArray(val)) {
                        val.forEach(v => {
                            if (!v) return;
                            if (key === 'classification' && (v.includes('Add') || v.includes('manuscript consists'))) return;
                            if (key === 'material' && v.includes('Fol.')) return;
                            // Split scriptLanguage by comma to get individual languages
                            if (key === 'scriptLanguage' && v.includes(',')) {
                                v.split(',').forEach(lang => allValues.add(lang.trim()));
                            } else {
                                allValues.add(v);
                            }
                        });
                    } else if (val) {
                        if (key === 'classification' && (val.includes('Add') || val.includes('manuscript consists'))) return;
                        if (key === 'material' && val.includes('Fol.')) return;
                        // Split scriptLanguage by comma to get individual languages
                        if (key === 'scriptLanguage' && val.includes(',')) {
                            val.split(',').forEach(lang => allValues.add(lang.trim()));
                        } else {
                            allValues.add(val);
                        }
                    }
                });
                
                // Deduplicate by normalized value, keeping first occurrence
                const seen = new Set();
                const values = [...allValues].filter(v => {
                    const norm = normalize(v);
                    if (seen.has(norm)) return false;
                    seen.add(norm);
                    return true;
                }).sort();
                
                if (values.length === 0) return '';
                
                return `
                    <div class="facet-group">
                        <label>${key === 'scriptLanguage' ? 'Primary Script' : key.charAt(0).toUpperCase() + key.slice(1)}</label>
                        <select class="form-control" onchange="applyFilter('${key}', this.value)">
                            <option value="">All</option>
                            ${values.map(v => `<option value="${v}" ${activeFilters[key] === v ? 'selected' : ''}>${v}</option>`).join('')}
                        </select>
                    </div>
                `;
            }).join('');
            
            $('#facets').html(facetsHtml + buildDateSlider());
        }

        let dateSlider = null;

        // Build date range slider
        function buildDateSlider() {
            const dates = [];
            allData.forEach(item => {
                ['dateNotBefore','dateNotAfter','dateWhen'].forEach(key => {
                    if (item[key]) {
                        const d = Array.isArray(item[key]) ? item[key][0] : item[key];
                        dates.push(parseInt(d));
                    }
                });
            });
            if (dates.length === 0) return '';

            const minDate = Math.min(...dates);
            const maxDate = Math.max(...dates);

            setTimeout(() => {
                const el = document.getElementById('dateSliderContainer');
                if (!el) return;
                dateSlider = new DateRangeSlider(el, {
                    min: minDate, max: maxDate,
                    onChange: function (s, e) {
                        activeFilters.dateMin = s;
                        activeFilters.dateMax = e;
                        filterData();
                    },
                    onReset: function () {
                        delete activeFilters.dateMin;
                        delete activeFilters.dateMax;
                        filterData();
                    }
                });
            }, 0);

            return '<div class="facet-group" id="dateSliderContainer"></div>';
        }

        // Apply filter
        function applyFilter(key, value) {
            if (value) {
                activeFilters[key] = value;
            } else {
                delete activeFilters[key];
            }
            filterData();
        }

        // Normalize for comparison
        function normalize(str) {
            if (!str) return '';
            return str.toLowerCase().replace(/[^a-z0-9]/g, '');
        }

        // Filter data based on active filters
        function filterData() {
            filteredData = allData.filter(item => {
                // Check date range
                if (activeFilters.dateMin || activeFilters.dateMax) {
                    const itemDates = [];
                    if (item.dateNotBefore) {
                        const d = Array.isArray(item.dateNotBefore) ? item.dateNotBefore : [item.dateNotBefore];
                        itemDates.push(...d.map(v => parseInt(v)));
                    }
                    if (item.dateNotAfter) {
                        const d = Array.isArray(item.dateNotAfter) ? item.dateNotAfter : [item.dateNotAfter];
                        itemDates.push(...d.map(v => parseInt(v)));
                    }
                    if (item.dateWhen) {
                        const d = Array.isArray(item.dateWhen) ? item.dateWhen : [item.dateWhen];
                        itemDates.push(...d.map(v => parseInt(v)));
                    }
                    
                    if (itemDates.length === 0) return false;
                    
                    const itemMin = Math.min(...itemDates);
                    const itemMax = Math.max(...itemDates);
                    
                    if (activeFilters.dateMin && itemMax < activeFilters.dateMin) return false;
                    if (activeFilters.dateMax && itemMin > activeFilters.dateMax) return false;
                }
                
                return Object.keys(activeFilters).every(key => {
                    if (key === 'dateMin' || key === 'dateMax') return true;
                    
                    const itemValue = item[key];
                    const filterValue = activeFilters[key];
                    
                    if (Array.isArray(itemValue)) {
                        return itemValue.some(v => {
                            // For scriptLanguage, check if filter value is contained in comma-separated list
                            if (key === 'scriptLanguage' && v.includes(',')) {
                                return v.split(',').some(lang => normalize(lang.trim()) === normalize(filterValue));
                            }
                            return normalize(v) === normalize(filterValue);
                        });
                    }
                    // For scriptLanguage, check if filter value is contained in comma-separated list
                    if (key === 'scriptLanguage' && itemValue && itemValue.includes(',')) {
                        return itemValue.split(',').some(lang => normalize(lang.trim()) === normalize(filterValue));
                    }
                    return normalize(itemValue) === normalize(filterValue);
                });
            });
            displayResults();
        }

        // Display results
        function displayResults() {
            $('#resultCount').text(`Showing ${filteredData.length} results`);
            
            const resultsHtml = filteredData.map((item, index) => {
                const formatValue = (val, key) => {
                    if (!Array.isArray(val)) return val;
                    const periodFields = ['title', 'displayTitleEnglish'];
                    return periodFields.includes(key) ? val.join('. ') : val.join(', ');
                };
                
                // Create syriac content summary from all title fields
                const titleFields = ['syrTitle','rubric','incipit','explicit','finalRubric']; 
                const allTitles = [];
                titleFields.forEach(field => {
                    if (item[field]) {
                        if (Array.isArray(item[field])) {
                            allTitles.push(...item[field]);
                        } else {
                            allTitles.push(item[field]);
                        }
                    }
                });
                let contentSummary = allTitles.join(' ');
                // Strip HTML tags
                contentSummary = contentSummary.replace(/<[^>]*>/g, '');
                const truncated = contentSummary.length > 100;
                const displayContent = truncated ? contentSummary.substring(0, 100) : contentSummary;

                const contentsNote = item.contentsNote ? item.contentsNote : 'No contents description given';
                const truncatedContentsNote = item.contentsNote && item.contentsNote.length > 150;
                const displayContentsNote = truncatedContentsNote ? item.contentsNote.substring(0, 150) : item.contentsNote;
                const itemTitle = formatValue(item.msItemTitle, 'msItemTitle') || '';
                const trucatedItemTitle = itemTitle.length > 100;
                const displayItemTitle = trucatedItemTitle ? itemTitle.substring(0, 100) : itemTitle;
                let msUrl = item.id ? `${BASE_URL}/ms/${item.id.replace('ms-', '').replace(/-part\d+$/, '')}.html` : '#';
                if (item.partNum) {
                    msUrl = `${msUrl}#msPart${item.partNum}`;
                }
                

                return `
                    <div class="result-item" style="padding:15px; border:1px solid #ddd; margin-bottom:10px; border-radius:5px;">
                        <p><strong></strong> ${formatValue(item.shelfmark, 'shelfmark') || ''} 
                         ${item.wrightNum ? `${formatValue(item.wrightNum, 'wrightNum')} ` : ''} 
                        </p>      
                        <p>URI: <a href="${msUrl}" target="_blank">${item.idno}</a></p>
                        <p>${item.origDate ? `${formatValue(item.origDate, 'origDate')}` : ''}${item.origPlace ? ` | ${formatValue(item.origPlace, 'origPlace')}` : ''}</p>
                        <p class="text-muted">
                            ${item.scriptLanguage ? `Primary Script: ${item.scriptLanguage} ` : ''}
                            ${item.material ? `| ${formatValue(item.material, 'material')} ` : ''}
                            ${item.form ? ` ${formatValue(item.form, 'material')} ` : ''}
                            ${item.extent ? `| ${formatValue(item.extent, 'extent')} ` : ''}
                        </p>
                    <p id="title-${index}">Contents Summary: <em>${displayContentsNote}</em>${truncatedContentsNote ? ` <a href="#" class="toggle-more" data-index="${index}" data-type="title" data-full="${contentsNote.replace(/"/g, '&quot;')}" data-short="${displayContentsNote.replace(/"/g, '&quot;')}">...</a>` : ''}</p> 
                     <p> ${item.classification ? `Classification: ${formatValue(item.classification, 'classification')}` : ''}</p>
                    </div>
                `}).join('');
            
            $('#results').html(resultsHtml || '<div class="alert alert-info">No results found</div>');
            
            // Add click handler for toggle more links
            $(document).on('click', '.toggle-more', function(e) {
                e.preventDefault();
                const index = $(this).data('index');
                const type = $(this).data('type');
                const full = $(this).data('full');
                const short = $(this).data('short');
                const isExpanded = $(this).text() === '...';
                
                if (type === 'title') {
                    if (isExpanded) {
                        $(`#title-${index}`).html(`<em>${full}</em> <a href="#" class="toggle-more" data-index="${index}" data-type="title" data-full="${full}" data-short="${short}">collapse</a>`);
                    } else {
                        $(`#title-${index}`).html(`<em>${short}</em> <a href="#" class="toggle-more" data-index="${index}" data-type="title" data-full="${full}" data-short="${short}">...</a>`);
                    }
                } else if (type === 'content') {
                    if (isExpanded) {
                        $(`#content-${index}`).html(`<span class="syriac">${full}</span> <a href="#" class="toggle-more" data-index="${index}" data-type="content" data-full="${full}" data-short="${short}">collapse</a>`);
                    } else {
                        $(`#content-${index}`).html(`<span class="syriac tei-quote" lang="syr">Syriac Content: ${short}</span><a href="#" class="toggle-more" data-index="${index}" data-type="content" data-full="${full}" data-short="${short}">...</a>`);
                    }
                }
            });
        }

        // Clear all filters
        function clearFilters() {
            activeFilters = {};
            filteredData = [...allData];
            buildFacets();
            displayResults();
        }


        // Initialize
        $(document).ready(() => {
            loadData();
        });
    </script>
</body>
</html>