Widget: DevGuidelines: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
Line 4: Line 4:
     <script type="text/javascript" src="/resources/assets/tabulator.min.js"></script>
     <script type="text/javascript" src="/resources/assets/tabulator.min.js"></script>
     <style>
     <style>
         #guideline-list-wrapper { font-family: 'Open Sans'; margin-top: 4em; }
         #guideline-list-wrapper {
         #guideline-list-wrapper h1, #guideline-list-wrapper h2, #guideline-list-wrapper h3 {
            font-family: 'Open Sans';
            margin-top: 4em;
        }
 
         #guideline-list-wrapper h1,
        #guideline-list-wrapper h2,
        #guideline-list-wrapper h3 {
             font-family: 'Raleway';
             font-family: 'Raleway';
             font-weight: 300;
             font-weight: 300;
             letter-spacing: .06em;
             letter-spacing: .06em;
         }
         }
         #guideline-list-wrapper h1, #guideline-filters h2 {
 
         #guideline-list-wrapper h1,
        #guideline-filters h2 {
             color: var(--links-orange);
             color: var(--links-orange);
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
         }
         }
         #guideline-list-wrapper h1 svg {
         #guideline-list-wrapper h1 svg {
             height: 2.5em;
             height: 2.5em;
Line 21: Line 30:
             margin-right: .5em;
             margin-right: .5em;
         }
         }
         #guideline-intro {
         #guideline-intro {
             font-size: larger;
             font-size: larger;
             margin-bottom: 4em;
             margin-bottom: 4em;
         }
         }
         #guideline-intro ul { font-size: initial; }
 
         #guideline-intro ul {
            font-size: initial;
        }
     </style>
     </style>
     <script>
     <script>
    'use strict';
        'use strict';
    const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
 
        const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
 
        const PHASE_PROP = 'Disaster Management Phase new';
        const THEME_PROP = 'Covers Thematic';
        const LANG_PROP  = 'Language';
        const YEAR_PROP  = 'Year Published';
        const EX_PROP    = 'Audience Experience Level';
        const TA_PROP    = 'Target Audience';
 
        const guidelineQuery = '[[Category:Guideline]]'
                            + '|?' + PHASE_PROP
                            + '|?' + THEME_PROP
                            + '|?' + LANG_PROP
                            + '|?' + YEAR_PROP
                            + '|?' + EX_PROP
                            + '|?' + TA_PROP;


    const PHASE_PROP = 'Disaster Management Phase new';
        async function getGuidelines() {
    const THEME_PROP = 'Covers Thematic';
            const guidelinesResponse = await fetch(getQueryUrl(guidelineQuery)).then(response => response.json());
    const LANG_PROP  = 'Language';
    const YEAR_PROP  = 'Year Published';
    const EX_PROP    = 'Audience Experience Level';
    const TA_PROP    = 'Target Audience';


    const guidelineQuery = '[[Category:Guideline]]'
            return Object.keys(guidelinesResponse.query.results).map(title => {
                        + '|?' + PHASE_PROP
                const guidelineResult = guidelinesResponse.query.results[title];
                        + '|?' + THEME_PROP
                const guideline = {};
                        + '|?' + LANG_PROP
                guideline.title = title;
                        + '|?' + YEAR_PROP
                guideline[PHASE_PROP] = guidelineResult.printouts[PHASE_PROP].map(value => value.fulltext);
                        + '|?' + EX_PROP
                guideline[THEME_PROP] = guidelineResult.printouts[THEME_PROP].map(value => value.fulltext);
                        + '|?' + TA_PROP;
                guideline[LANG_PROP] = guidelineResult.printouts[LANG_PROP].map(value => value.fulltext);
                guideline[TA_PROP] = guidelineResult.printouts[TA_PROP].map(value => value.fulltext);
                guideline[EX_PROP] = guidelineResult.printouts[EX_PROP].map(value => value.fulltext);
                guideline[YEAR_PROP] = guidelineResult.printouts[YEAR_PROP][0] && guidelineResult.printouts[YEAR_PROP][0].raw.slice(-4);
                return guideline;
            });
        }


    async function getGuidelines() {
         Promise.all([ getGuidelines() ]).then(data => {
         const guidelinesResponse = await fetch(getQueryUrl(guidelineQuery)).then(response => response.json());
            const guidelines = data[0];


        const guidelines = Object.keys(guidelinesResponse.query.results).map(title => {
            console.log(guidelines);
             const guidelineResult = guidelinesResponse.query.results[title];
 
            const guideline = {};
             const table = new Tabulator("#guideline-tabulator", {
            guideline.title = title;
                data: guidelines,
             guideline[PHASE_PROP] = guidelineResult.printouts[PHASE_PROP].map(value => value.fulltext);
                autocolumns: true,
             guideline[THEME_PROP] = guidelineResult.printouts[THEME_PROP].map(value => value.fulltext);
             });
            guideline[LANG_PROP] = guidelineResult.printouts[LANG_PROP].map(value => value.fulltext);
   
            guideline[TA_PROP] = guidelineResult.printouts[TA_PROP].map(value => value.fulltext);
             table.on("tableBuilt", () => {
            guideline[EX_PROP] = guidelineResult.printouts[EX_PROP].map(value => value.fulltext);
                console.log('done')
             guideline[YEAR_PROP] = guidelineResult.printouts[YEAR_PROP][0] && guidelineResult.printouts[YEAR_PROP][0].raw.slice(-4);
             });
            return guideline;
         });
         });
        console.log(guidelines);
    }
    getGuidelines();
     </script>
     </script>
     <div id="guideline-list-wrapper">
     <div id="guideline-list-wrapper">
         <h1>
         <h1>
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="b"><path d="M65 455h96v96H65z"/></clipPath></defs><g clip-path="url(#b)" transform="translate(-65 -455)"><path d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z"/><path d="M104 489h28v2h-28ZM110 500h16v2h-16Z"/></g></svg>
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
                <defs>
                    <clipPath id="b">
                        <path d="M65 455h96v96H65z" />
                    </clipPath>
                </defs>
                <g clip-path="url(#b)" transform="translate(-65 -455)">
                    <path
                        d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z" />
                    <path d="M104 489h28v2h-28ZM110 500h16v2h-16Z" />
                </g>
            </svg>
             <span>Guidelines</span>
             <span>Guidelines</span>
         </h1>
         </h1>
Line 74: Line 111:
             <p>This page provides an overview of different Guidelines where guidance can be found for example on:</p>
             <p>This page provides an overview of different Guidelines where guidance can be found for example on:</p>
             <ul>
             <ul>
                 <li>Building a communication strategy for social media and consideration of the main elements (e.g. needed roles
                 <li>Building a communication strategy for social media and consideration of the main elements (e.g.
                    needed roles
                     for
                     for
                     the team)</li>
                     the team)</li>
Line 87: Line 125:
         </div>
         </div>
     </div>
     </div>
      
 
     <!-- FILTERS -->
 
    <div id="guideline-tabulator"></div>
 
</includeonly>
</includeonly>

Revision as of 12:17, 1 September 2022

Development version of the List of Guidelines.
Not ready for production!

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:DevGuidelines&oldid=6295"