Difference between revisions of "Widget:DevGuidelines"

From LINKS Community Center
Jump to: navigation, search
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 13: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"