WIP
This commit is contained in:
		| @@ -3,27 +3,23 @@ | ||||
|   <head> | ||||
|     <meta charset="utf-8" /> | ||||
|     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||
|     <link rel="stylesheet" href="https://cantorgymnasium.de/plugins/fontawesome/css/all.css"> | ||||
|     <title>Content Manager</title> | ||||
|     <link rel="stylesheet" href="https://cantorgymnasium.de/plugins/fontawesome/css/all.min.css"> | ||||
|     <title>Static CMS</title> | ||||
|   </head> | ||||
|   <body> | ||||
|     <style> | ||||
|       body { | ||||
|         font-family: sans-serif; | ||||
|       } | ||||
|     </style> | ||||
|     <!-- Include the script that builds the page and powers Static CMS --> | ||||
|     <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@latest/dist/static-cms-app.js"></script> | ||||
|     <script> | ||||
|       window.CMS.init(); | ||||
|       CMS.registerIcon('home', ({}) => { return(h('i', {"className": "fa fa-house"})); }); | ||||
|       CMS.registerIcon('settings', ({}) => { return(h('i', {"className": "fa fa-gear"})); }); | ||||
|       CMS.registerIcon('user', ({}) => { return(h('i', {"className": "fa fa-user"})); }); | ||||
|       CMS.registerIcon('page', ({}) => { return(h('i', {"className": "fa fa-file"})); }); | ||||
|       CMS.registerIcon('document', ({}) => { return(h('i', {"className": "fa fa-file-lines"})); }); | ||||
|       CMS.registerIcon('news', ({}) => { return(h('i', {"className": "fa fa-newspaper"})); }); | ||||
|       CMS.registerIcon('award', ({}) => { return(h('i', {"className": "fa fa-award"})); }); | ||||
|       CMS.registerIcon('group', ({}) => { return(h('i', {"className": "fa fa-people-group"})); }); | ||||
|       CMS.registerIcon('trophy', ({}) => { return(h('i', {"className": "fa fa-trophy"})); }); | ||||
|       CMS.registerIcon('book', ({}) => { return(h('i', {"className": "fa fa-book"})); }); | ||||
|       CMS.registerIcon('timeline', ({}) => { return(h('i', {"className": "fa fa-timeline"})); }); | ||||
|       CMS.registerIcon('graduation-cap', ({}) => { return(h('i', {"className": "fa fa-graduation-cap"})); }); | ||||
|       CMS.registerIcon('info', ({}) => { return(h('i', {"className": "fa fa-circle-info"})); }); | ||||
|       CMS.init(); | ||||
|       var icons = [['home', 'fa fa-house'], ['settings', 'fa fa-gear'], ['user', 'fa fa-user'], ['page', 'fa fa-file'], ['document', 'fa fa-file-lines'], ['news', 'fa fa-newspaper'], ['award', 'fa fa-award'], ['group', 'fa fa-people-group'], ['trophy', 'fa fa-trophy'], ['book', 'fa fa-book'], ['timeline', 'fa fa-timeline'], ['graduation-cap', 'fa fa-graduation-cap'], ['info', 'fa fa-circle-info']]; | ||||
|       icons.forEach(icon => { | ||||
|         CMS.registerIcon(icon[0], ({}) => { return(h('i', {"className": icon[1]})); }); | ||||
|       }); | ||||
|       const CustomPage = () => { | ||||
|         return h('div', {}, 'I am a custom page!'); | ||||
|       }; | ||||
| @@ -54,40 +50,228 @@ | ||||
|           return [`dir=\"${dir}\"`]; | ||||
|         }, | ||||
|         control: ({ dir, onChange }) => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }}, | ||||
|           h('b', {}, "Gallerie-Ordner: "), | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, | ||||
|           h('b', {"style": {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Gallerie-Ordner: "), | ||||
|           h('input', { | ||||
|             key: 'control-input', | ||||
|             value: dir, | ||||
|             "style": { | ||||
|               border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%" | ||||
|             }, | ||||
|             onChange: event => { | ||||
|               onChange({ dir: event.target.value }); | ||||
|             }, | ||||
|           })); | ||||
|         }, | ||||
|         preview: ({ dir }) => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }}, | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, | ||||
|           h('b', {"style": { marginRight: "5px" }}, "Gallerie-Ordner:"), | ||||
|           h('code', {}, dir)); | ||||
|         }, | ||||
|       }); | ||||
|       CMS.registerShortcode('figure', { | ||||
|         label: 'Bild', | ||||
|         openTag: '{{< ', | ||||
|         closeTag: ' >}}', | ||||
|         separator: ' ', | ||||
|         toProps: args => { | ||||
|           if (args.length > 0) { | ||||
|             var src = args.find(arg => arg.startsWith('src='))?.split('=')[1].replaceAll("\"","") ?? ''; | ||||
|             console.log(src); | ||||
|             return { src }; | ||||
|           } | ||||
|        | ||||
|           return { dir: '' }; | ||||
|         }, | ||||
|         toArgs: ({ src }) => { | ||||
|           return [`src=\"${src}\"`]; | ||||
|         }, | ||||
|         /* control: ({ src, onChange, controlProps: { field, collection, entry } }) => { | ||||
|           const controlID = useUUID(); | ||||
|           const handleOnChange = (newSrc) => { | ||||
|             onChange(newSrc); | ||||
|           } | ||||
|           const handleOpenMediaLibrary = useMediaInsert( | ||||
|             src, | ||||
|             { field, controlID }, | ||||
|             handleOnChange, | ||||
|           ); | ||||
|           const assetSource = useMediaAsset(src, collection, field, entry); | ||||
|  | ||||
|           return h('span', {}, [ | ||||
|             h('button', { | ||||
|               key: 'control-button', | ||||
|               onClick: handleOpenMediaLibrary, | ||||
|             }, 'Click to open media library'), | ||||
|             h( | ||||
|               'img', | ||||
|               { | ||||
|                 key: 'control-preview', | ||||
|                 src: assetSource, | ||||
|               }, | ||||
|               '', | ||||
|             ), | ||||
|           ]); | ||||
|         },*/ | ||||
|         control: ({ src, onChange }) => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #868686", borderRadius: "16px", padding: "10px" }}, | ||||
|           h('b', {"style": {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Bild-Pfad:"), | ||||
|           h('input', { | ||||
|             key: 'control-input', | ||||
|             value: src, | ||||
|             "style": { | ||||
|               border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%" | ||||
|             }, | ||||
|             onChange: event => { | ||||
|               onChange({ src: event.target.value }); | ||||
|             }, | ||||
|           })); | ||||
|         }, | ||||
|         preview: ({ src }) => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }}, | ||||
|           h('b', {"style": { marginRight: "5px" }}, "Gallerie-Ordner:"), | ||||
|           h('code', {}, src)); | ||||
|         }, | ||||
|       }); | ||||
|       CMS.registerShortcode('card', { | ||||
|         label: 'Link-Karte', | ||||
|         openTag: '{{< ', | ||||
|         closeTag: ' >}}', | ||||
|         separator: ' ', | ||||
|         toProps: args => { | ||||
|           if (args.length > 0) { | ||||
|             var title = ""; | ||||
|             var link = ""; | ||||
|             console.log(args); | ||||
|             var linkIndex = args.findIndex(arg => arg.startsWith('link="')); | ||||
|             var titleIndex = args.findIndex(arg => arg.startsWith('title="')); | ||||
|             if (titleIndex + 1 < linkIndex) { | ||||
|               title += args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? ''; | ||||
|               for (let i = titleIndex + 1; i < linkIndex; i++) { | ||||
|                 title += " " + args[i].replaceAll("\"","") ; | ||||
|               }  | ||||
|             } else { | ||||
|               title = args.find(arg => arg.startsWith('title='))?.split('=')[1].replaceAll("\"","") ?? '' | ||||
|             } | ||||
|             if (linkIndex + 1 < args.length) { | ||||
|               link += args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? ''; | ||||
|               for (let i = linkIndex + 1; i < args.length; i++) { | ||||
|                 link += " " + args[i].replaceAll("\"",""); | ||||
|               }                  | ||||
|             } else { | ||||
|               link = args.find(arg => arg.startsWith('link='))?.split('=')[1].replaceAll("\"","") ?? '' | ||||
|             } | ||||
|             title.trim(); | ||||
|             link.trim(); | ||||
|             return { title: title, link: link }; | ||||
|           } | ||||
|  | ||||
|           return { title: '', link: '' }; | ||||
|         }, | ||||
|         toArgs: ({ title, link }) => { | ||||
|           return [`title=\"${title}\"`, `link=\"${link}\"`]; | ||||
|         }, | ||||
|         control: ({ title, link, onChange }) => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, | ||||
|           h('b', {"style": {width: "30%", fontFamily: "sans-serif", margin: "10px"}}, "Link-Karte:"), | ||||
|           h('input', { | ||||
|             key: 'control-input', | ||||
|             value: title, | ||||
|             "style": { | ||||
|               border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px" | ||||
|             }, | ||||
|             onChange: event => { | ||||
|               onChange({ title: event.target.value, link: link }); | ||||
|             }, | ||||
|           }), | ||||
|           h('input', { | ||||
|             key: 'control-input', | ||||
|             value: link, | ||||
|             "style": { | ||||
|               border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "40%", marginLeft: "5px", marginRight: "5px" | ||||
|             }, | ||||
|             onChange: event => { | ||||
|               onChange({ title: title, link: event.target.value }); | ||||
|             }, | ||||
|           }) | ||||
|           ); | ||||
|         }, | ||||
|         preview: ({ title, link }) => { | ||||
|           return h('div', {"className": "container mb-0"}, | ||||
|           h('div', {"className": "card border-primary rounded-0 hover-shadow mb-5"},  | ||||
|             h('div', {"className": "card-body mb-0"}, | ||||
|               h('h4', {"className": "card-title"}, | ||||
|                 h('a', {"className": "text-decoration-none", "href": link}, title), | ||||
|               ), | ||||
|               h('a', {"className": "mb-0 btn btn-primary btn-sm text-decoration-none", "href": link}, "Mehr anzeigen") | ||||
|             )))}, | ||||
|       }); | ||||
|       CMS.registerShortcode('youtube', { | ||||
|         label: 'YouTube-Video', | ||||
|         openTag: '{{< ', | ||||
|         closeTag: ' >}}', | ||||
|         separator: ' ', | ||||
|         toProps: args => { | ||||
|           if (args.length > 0) { | ||||
|             return { src: args[0] }; | ||||
|           } | ||||
|        | ||||
|           return { src: '' }; | ||||
|         }, | ||||
|         toArgs: ({ src }) => { return [src] }, | ||||
|         control: ({ src, onChange }) => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, | ||||
|           h('b', {"style": {fontFamily: "sans-serif", margin: "10px"}}, "YoutTube-Video:"), | ||||
|           h('input', { | ||||
|             key: 'control-input', | ||||
|             value: src, | ||||
|             "style": { | ||||
|               border: "1px solid #ced4da", borderRadius: "8px", padding: "10px", width: "80%" | ||||
|             }, | ||||
|             onChange: event => { | ||||
|               onChange({ src: event.target.value }); | ||||
|             }, | ||||
|           }), | ||||
|           h('div', {"className": "row", "style": {"marginTop": "10px"}},  | ||||
|             h( | ||||
|                 'iframe', | ||||
|                 { | ||||
|                   key: 'control-preview', | ||||
|                   width: '100%', | ||||
|                   height: '360', | ||||
|                   src: `https://piped.kavin.rocks/embed/${src}`, | ||||
|                   style: { borderRadius: "8px" } | ||||
|                 }, | ||||
|                 '', | ||||
|             ) | ||||
|           )); | ||||
|         }, | ||||
|         preview: ({ src }) => { | ||||
|           return h( | ||||
|             'span', | ||||
|             {}, | ||||
|             h( | ||||
|               'iframe', | ||||
|               { | ||||
|                 width: '420', | ||||
|                 height: '315', | ||||
|                 src: `https://piped.kavin.rocks/embed/${src}`, | ||||
|               }, | ||||
|               '', | ||||
|             ), | ||||
|           ); | ||||
|         }, | ||||
|       });       | ||||
|       CMS.registerShortcode('load-photoswipe', { | ||||
|         label: 'Gallerie-Servicemodul', | ||||
|         openTag: '{{< ', | ||||
|         closeTag: ' >}}', | ||||
|         separator: '', | ||||
|         toProps: args => { | ||||
|         }, | ||||
|         toArgs: () => { | ||||
|         }, | ||||
|         control: () => { | ||||
|           return h('div', {"className": "row", "style": { border: "1px solid #ccc", borderRadius: "16px", padding: "10px" }}, | ||||
|           h('b', {}, "Gallerie-Servicemodul")); | ||||
|         }, | ||||
|         preview: () => { | ||||
|            | ||||
|           return h('div', {"style": { border: "1px solid #868686", borderRadius: "8px", padding: "10px" }}, | ||||
|           h('b', {"style": {fontFamily: "sans-serif", margin: "10px"}}, "Gallerie-Servicemodul")); | ||||
|         }, | ||||
|       }); | ||||
|        | ||||
|     </script> | ||||
|     <script> | ||||
|       const CategoriesControl = ({ label, value, field, onChange }) => { | ||||
| @@ -127,302 +311,355 @@ | ||||
|       CMS.registerWidget('categories', CategoriesControl, CategoriesPreview, schema); | ||||
|     </script> | ||||
|     <script> | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/bootstrap/bootstrap.min.css"); | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/slick/slick.css"); | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/animate/animate.css"); | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/venobox/venobox.css"); | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/fontawesome/css/all.css"); | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/fira/fira.css"); | ||||
| CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css"); | ||||
| </script> | ||||
| <script> | ||||
| var ChronikPreview = ({widgetFor, entry }) => { | ||||
|     const divStyle = { | ||||
|       backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|     }; | ||||
|     return h('div', {}, | ||||
|               h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "col-md-8"}, | ||||
|                     h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                       h('li', {"className": "list-inline-item h2"}, | ||||
|                         h('a', {"className": "text-primary font-secondary", href: ""}, "Schulchronik")), | ||||
|                       h('li', {"className": "list-inline-item h2"}, | ||||
|                         h("i", {"className": "fa-solid fa-angle-right text-white"})), | ||||
|                       h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ), | ||||
|               h('section', {"className": "section-sm"}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "row"}, | ||||
|                     h('div', {"className": "col-12 mb-4 content"}, widgetFor('body')) | ||||
|                   ) | ||||
|                 ) | ||||
|               ) | ||||
|     ); | ||||
|   }; | ||||
|  | ||||
| CMS.registerPreviewTemplate("schulchronik", ChronikPreview); | ||||
|  | ||||
| </script> | ||||
| <script> | ||||
| var PostPreviewContent = ({widgetFor, entry}) => { | ||||
|     const divStyle = { | ||||
|       backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|     }; | ||||
|     return h('div', {}, | ||||
|               h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "col-md-8"}, | ||||
|                     h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                       h('li', {"className": "list-inline-item h2"}, | ||||
|                         h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite")), | ||||
|                       h('li', {"className": "list-inline-item h2"}, | ||||
|                         h("i", {"className": "fa-solid fa-angle-right text-white"})), | ||||
|                       h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title) | ||||
|                     ), | ||||
|                     h('p', {"className": "text-lighten"}, entry.data.description | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ), | ||||
|               h('section', {"className": "section-sm"}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "row"}, | ||||
|                     h('div', {"className": "col-12 mb-4"}, | ||||
|                       h('div', {"className": "content"}, widgetFor('body')) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ) | ||||
|             ); | ||||
|   }; | ||||
|  | ||||
| CMS.registerPreviewTemplate("impressum", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("datenschutz", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("schuelerrat-geschaeftsordnung", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("schuelervertretung-index", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("elternvertretung-index", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("jia-index", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("bibo", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("abiturienten", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("cantorfora", PostPreviewContent); | ||||
| CMS.registerPreviewTemplate("contact-index", PostPreviewContent); | ||||
|  | ||||
| </script> | ||||
| <script> | ||||
|   var AnmeldungPreviewContent = ({widgetsFor, widgetFor, entry}) => { | ||||
|     const divStyle = { | ||||
|       backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|     }; | ||||
|     return h('div', {}, | ||||
|               h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "col-md-8"}, | ||||
|                     h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                       h('li', {"className": "list-inline-item h2"}, | ||||
|                         h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite")), | ||||
|                       h('li', {"className": "list-inline-item h2"}, | ||||
|                         h("i", {"className": "fa-solid fa-angle-right text-white"})), | ||||
|                       h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title) | ||||
|                     ), | ||||
|                     h('p', {"className": "text-lighten"}, entry.data.description | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ), | ||||
|               h('section', {"className": "section-sm"}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "row mb-5"}, | ||||
|                     h('div', {"className": "col-md-6 content"}, | ||||
|                       widgetFor('body') | ||||
|                     ) | ||||
|                   ), | ||||
|                   h('div', {"className": "row"}, | ||||
|                     widgetsFor('elements').map(function(element, index) { | ||||
|                       return h('div', {"className": "col-lg-4 col-sm-6 mb-4"}, | ||||
|                         h('div', {"className": "card rounded-0 hover-shadow border-top-0 border-left-0 border-right-0"}, | ||||
|                           h('div', {"className": "card-body"}, | ||||
|                             h('h4', {"className": "card-title mb-3"}, | ||||
|                               element.data.title | ||||
|                             ), | ||||
|                             h('div', {"className": "content"}, | ||||
|                               element.widgets.content | ||||
|                             ) | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/bootstrap/bootstrap.min.css"); | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/slick/slick.css"); | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/animate/animate.min.css"); | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/venobox/venobox.css"); | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/fontawesome/css/all.css"); | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/plugins/fira/fira.css"); | ||||
|       CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css"); | ||||
|     </script> | ||||
|     <script> | ||||
|       var ChronikPreview = ({widgetFor, widgetsFor, entry, document, window }) => { | ||||
|           const divStyle = { | ||||
|             backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|           }; | ||||
|           return h('div', {"id": "sc-root"}, | ||||
|                     h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                       h('div', {"className": "container"}, | ||||
|                         h('div', {"className": "col-md-8"}, | ||||
|                           h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h('a', {"className": "text-primary font-secondary", href: ""}, "Schulchronik")), | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h("i", {"className": "fa-solid fa-angle-right text-white"})), | ||||
|                             h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title) | ||||
|                           ) | ||||
|                         ) | ||||
|                       ); | ||||
|                     }) | ||||
|                   ) | ||||
|                 ) | ||||
|               ), | ||||
|             ); | ||||
|   }; | ||||
|  | ||||
|  | ||||
| CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreviewContent); | ||||
|  | ||||
|  | ||||
| </script> | ||||
| <script> | ||||
| var EventPreview = ({widgetsFor, entry}) => { | ||||
|     const divStyle = { | ||||
|       backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|     }; | ||||
|     return h('div', {}, | ||||
|               h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                 h('div', {"className": "row"}, | ||||
|                   h('div', {"className": "container"}, | ||||
|                     h('div', {"className": "col-md-8"}, | ||||
|                       h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                         h('li', {"className": "list-inline-item h2"}, | ||||
|                           h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite") | ||||
|                         ), | ||||
|                         h('li', {"className": "list-inline-item h2"}, | ||||
|                           h("i", {"className": "fa-solid fa-angle-right text-white"}) | ||||
|                         ), | ||||
|                         h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title | ||||
|                       ) | ||||
|                     ), | ||||
|                     h('section', {"className": "section-sm"}, | ||||
|                       h('div', {"className": "container"}, | ||||
|                         h('div', {"className": "row"}, | ||||
|                           h('div', {"className": "col-12 mb-4 content"}, | ||||
|                           widgetsFor('topics').map(function(i, index) { | ||||
|                               return h('div', {"id": i.data.id, "className": "modal"}, | ||||
|                                 h('div', {"className": "modal-dialog modal-lg", "role": "document"}, | ||||
|                                   h('div', {"className": "modal-content"}, | ||||
|                                     h('div', {"className": "modal-header"}, | ||||
|                                       h('h5', {"className": "modal-title"}, i.data.title), | ||||
|                                       h('button', {"className": "close", "type": "button", "dataDismiss": "modal", "ariaLabel": "Close"}, | ||||
|                                         h('span', {"ariaHidden": "true"}, '\u{00d7}') | ||||
|                                       ) | ||||
|                                     ), | ||||
|                                     h('div', {"className": "modal-body"}, | ||||
|                                       h('div', {"className": "content"}, i.content) | ||||
|                                     ) | ||||
|                                   ) | ||||
|                                 ) | ||||
|                               ); | ||||
|                           }), | ||||
|                           entry.data.pretext != "" && entry.data.pretext != null ? h('div', {"id": "pretext", "className": "modal"}, | ||||
|                           h('div', {"className": "modal-dialog modal-lg", "role": "document"}, | ||||
|                             h('div', {"className": "modal-content"}, | ||||
|                               h('div', {"className": "modal-header"}, | ||||
|                                 h('h5', {"className": "modal-title"}, entry.data.title), | ||||
|                                 h('button', {"className": "close", "type": "button", "dataDismiss": "modal", "ariaLabel": "Close"}, | ||||
|                                   h('span', {"ariaHidden": "true"}, '\u{00d7}') | ||||
|                                 ) | ||||
|                               ), | ||||
|                               h('div', {"className": "modal-body"}, | ||||
|                                 h('div', {"className": "content"}, widgetFor('pretext')) | ||||
|                               ) | ||||
|                             ) | ||||
|                           ) | ||||
|                           ) : null, | ||||
|                           h('div', {"id": "wc-canvas"}), | ||||
|                           () => { | ||||
|                             var topics = [[entry.data.title, 100, "pretext"]]; | ||||
|                             widgetsFor('topics').map(function(i, index) { | ||||
|                               topics.push([i.data.title, 40, i.data.id]); | ||||
|                             }); | ||||
|                             var script = document.createElement('script'); | ||||
|                             script.src = "https://cantorgymnasium.de/plugins/wordcloud/wordcloud2.min.js"; | ||||
|                             var div = document.getElementById('sc-root'); | ||||
|                             div.appendChild(script); | ||||
|                             WordCloud( | ||||
|                               document.getElementById('wc-canvas'), | ||||
|                               { | ||||
|                                 click: function (item) { | ||||
|                                   if (item[1] != 100 || (item[1] == 100 && item[2] == "pretext")) { | ||||
|                                     $('#' + item[2]).modal('show'); | ||||
|                                   } | ||||
|                                 }, | ||||
|                                 color: function (word, weight) { | ||||
|                                   return (weight === 100) ? '#ffbc3b' : '#1a1a37'; | ||||
|                                 }, | ||||
|                                 fontFamily: 'Fira Sans, serif', | ||||
|                                 fontWeight: 800, | ||||
|                                 list: topics, | ||||
|                                 shrinkToFit: true, | ||||
|                                 gridSize: 25, | ||||
|                                 rotateRatio: 0, | ||||
|                               }  | ||||
|                             ); | ||||
|                           }, | ||||
|                           widgetFor('body') | ||||
|                           ) | ||||
|                         ) | ||||
|                       ), | ||||
|                       h('p', {"className": "text-lighten"}, entry.data.description) | ||||
|                       ) | ||||
|                     ) | ||||
|           ); | ||||
|         }; | ||||
|  | ||||
|       CMS.registerPreviewTemplate("schulchronik", ChronikPreview); | ||||
|  | ||||
|     </script> | ||||
|     <script> | ||||
|     var PostPreviewContent = ({widgetFor, entry}) => { | ||||
|         const divStyle = { | ||||
|           backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|         }; | ||||
|         return h('div', {}, | ||||
|                   h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                     h('div', {"className": "container"}, | ||||
|                       h('div', {"className": "col-md-8"}, | ||||
|                         h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                           h('li', {"className": "list-inline-item h2"}, | ||||
|                             h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite")), | ||||
|                           h('li', {"className": "list-inline-item h2"}, | ||||
|                             h("i", {"className": "fa-solid fa-angle-right text-white"})), | ||||
|                           h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title) | ||||
|                         ), | ||||
|                         h('p', {"className": "text-lighten"}, entry.data.description | ||||
|                         ) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ), | ||||
|                   h('section', {"className": "section-sm"}, | ||||
|                     h('div', {"className": "container"}, | ||||
|                       h('div', {"className": "row"}, | ||||
|                         h('div', {"className": "col-12 mb-4"}, | ||||
|                           h('div', {"className": "content"}, widgetFor('body')) | ||||
|                         ) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ), | ||||
|               h('section', {"className": "section"}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "row"}, | ||||
|                     h('div', {"className": "col-12 "}, | ||||
|                       h('ul', {"className": "list-unstyled"}, | ||||
|                         widgetsFor('events').map(function(event, index) { | ||||
|                           console.log(event.data.date); | ||||
|                           return h('li', {"className": "d-md-table mb-4 w-100 border-bottom hover-shadow"}, | ||||
|                             h('div', {"className": "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc"}, | ||||
|                                 h('span', {"className": "h2 d-block"}, new Intl.DateTimeFormat('de-De', { day: 'numeric'}).format(new Date(event.data.date))), | ||||
|                                 new Intl.DateTimeFormat('de-De', { month: 'short', year: 'numeric' }).format(new Date(event.data.date)) | ||||
|                             ), | ||||
|                             h('div', {"className": "d-md-table-cell px-4 vertical-alighn-middle mb-4 mb-md-0"}, | ||||
|                               h('p', {"className": "h4 mb-3 d-block"}, event.data.title), | ||||
|                               h('p', {"className": "mb-0"}, event.data.summary) | ||||
|                             ), | ||||
|                             h('div', {"className": "d-md-table-cell text-right pr-0 pr-md-4"}, | ||||
|                               h('p', {}, | ||||
|                                 h('i', {"className": "fa-solid fa-location-dot text-primary mr-2"}), | ||||
|                                 event.data.location | ||||
|                 ); | ||||
|       }; | ||||
|  | ||||
|     CMS.registerPreviewTemplate("impressum", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("datenschutz", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("schuelerrat-geschaeftsordnung", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("schuelervertretung-index", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("elternvertretung-index", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("jia-index", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("bibo", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("abiturienten", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("cantorfora", PostPreviewContent); | ||||
|     CMS.registerPreviewTemplate("contact-index", PostPreviewContent); | ||||
|  | ||||
|     </script> | ||||
|     <script> | ||||
|       var AnmeldungPreviewContent = ({widgetsFor, widgetFor, entry}) => { | ||||
|         const divStyle = { | ||||
|           backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|         }; | ||||
|         return h('div', {}, | ||||
|                   h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                     h('div', {"className": "container"}, | ||||
|                       h('div', {"className": "col-md-8"}, | ||||
|                         h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                           h('li', {"className": "list-inline-item h2"}, | ||||
|                             h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite")), | ||||
|                           h('li', {"className": "list-inline-item h2"}, | ||||
|                             h("i", {"className": "fa-solid fa-angle-right text-white"})), | ||||
|                           h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title) | ||||
|                         ), | ||||
|                         h('p', {"className": "text-lighten"}, entry.data.description | ||||
|                         ) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ), | ||||
|                   h('section', {"className": "section-sm"}, | ||||
|                     h('div', {"className": "container"}, | ||||
|                       h('div', {"className": "row mb-5"}, | ||||
|                         h('div', {"className": "col-md-6 content"}, | ||||
|                           widgetFor('body') | ||||
|                         ) | ||||
|                       ), | ||||
|                       h('div', {"className": "row"}, | ||||
|                         widgetsFor('elements').map(function(element, index) { | ||||
|                           return h('div', {"className": "col-lg-4 col-sm-6 mb-4"}, | ||||
|                             h('div', {"className": "card rounded-0 hover-shadow border-top-0 border-left-0 border-right-0"}, | ||||
|                               h('div', {"className": "card-body"}, | ||||
|                                 h('h4', {"className": "card-title mb-3"}, | ||||
|                                   element.data.title | ||||
|                                 ), | ||||
|                                 h('div', {"className": "content"}, | ||||
|                                   element.widgets.content | ||||
|                                 ) | ||||
|                               ) | ||||
|                             ) | ||||
|                           ); | ||||
|                         }) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ) | ||||
|             ); | ||||
|   }; | ||||
|  | ||||
| CMS.registerPreviewTemplate("event-index", EventPreview); | ||||
|  | ||||
| </script> | ||||
| <script> | ||||
| var PagePreview = ({widgetFor, entry}) => { | ||||
|     const divStyle = { | ||||
|       backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|     }; | ||||
|     return h('div', {}, | ||||
|               h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                 h('div', {"className": "row"}, | ||||
|                   h('div', {"className": "container"}, | ||||
|                     h('div', {"className": "col-md-8"}, | ||||
|                       h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                         h('li', {"className": "list-inline-item h2"}, | ||||
|                           h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite") | ||||
|                         ), | ||||
|                         h('li', {"className": "list-inline-item h2"}, | ||||
|                           h("i", {"className": "fa-solid fa-angle-right text-white"}) | ||||
|                         ), | ||||
|                         h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title | ||||
|                   ), | ||||
|                 ); | ||||
|       }; | ||||
|     CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreviewContent); | ||||
|     </script> | ||||
|     <script> | ||||
|     var EventPreview = ({widgetsFor, entry}) => { | ||||
|         const divStyle = { | ||||
|           backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|         }; | ||||
|         return h('div', {}, | ||||
|                   h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                     h('div', {"className": "row"}, | ||||
|                       h('div', {"className": "container"}, | ||||
|                         h('div', {"className": "col-md-8"}, | ||||
|                           h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite") | ||||
|                             ), | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h("i", {"className": "fa-solid fa-angle-right text-white"}) | ||||
|                             ), | ||||
|                             h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title | ||||
|                             ) | ||||
|                           ), | ||||
|                           h('p', {"className": "text-lighten"}, entry.data.description) | ||||
|                         ) | ||||
|                       ), | ||||
|                       h('p', {"className": "text-lighten"}, entry.data.description) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ), | ||||
|                   h('section', {"className": "section"}, | ||||
|                     h('div', {"className": "container"}, | ||||
|                       h('div', {"className": "row"}, | ||||
|                         h('div', {"className": "col-12 "}, | ||||
|                           h('ul', {"className": "list-unstyled"}, | ||||
|                             widgetsFor('events').map(function(event, index) { | ||||
|                               console.log(event.data.date); | ||||
|                               return h('li', {"className": "d-md-table mb-4 w-100 border-bottom hover-shadow"}, | ||||
|                                 h('div', {"className": "d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc"}, | ||||
|                                     h('span', {"className": "h2 d-block"}, new Intl.DateTimeFormat('de-De', { day: 'numeric'}).format(new Date(event.data.date))), | ||||
|                                     new Intl.DateTimeFormat('de-De', { month: 'short', year: 'numeric' }).format(new Date(event.data.date)) | ||||
|                                 ), | ||||
|                                 h('div', {"className": "d-md-table-cell px-4 vertical-alighn-middle mb-4 mb-md-0"}, | ||||
|                                   h('p', {"className": "h4 mb-3 d-block"}, event.data.title), | ||||
|                                   h('p', {"className": "mb-0"}, event.data.summary) | ||||
|                                 ), | ||||
|                                 h('div', {"className": "d-md-table-cell text-right pr-0 pr-md-4"}, | ||||
|                                   h('p', {}, | ||||
|                                     h('i', {"className": "fa-solid fa-location-dot text-primary mr-2"}), | ||||
|                                     event.data.location | ||||
|                                   ) | ||||
|                                 ) | ||||
|                               ); | ||||
|                             }) | ||||
|                           ) | ||||
|                         ) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ) | ||||
|             ); | ||||
|   }; | ||||
|  | ||||
| CMS.registerPreviewTemplate("blog-index", PagePreview); | ||||
| CMS.registerPreviewTemplate("cantorpreis-index", PagePreview); | ||||
| CMS.registerPreviewTemplate("forms-index", PagePreview); | ||||
| CMS.registerPreviewTemplate("ganztagsangebote-index", PagePreview); | ||||
| CMS.registerPreviewTemplate("wettbewerbe-index", PagePreview); | ||||
| CMS.registerPreviewTemplate("begabtenfoerderung-index", PagePreview); | ||||
|  | ||||
| </script> | ||||
| <script> | ||||
| var PagePreviewImage = ({ widgetFor, getAsset, entry}) => { | ||||
|     const [imageUrl, setImageUrl] = useState(''); | ||||
|     const image = useMemo(() => entry.data.image, [entry.data.image]); | ||||
|  | ||||
|     useEffect(() => { | ||||
|       let alive = true; | ||||
|  | ||||
|       const loadImage = async () => { | ||||
|         const imageAsset = await getAsset(image); | ||||
|         if (alive) { | ||||
|           setImageUrl(imageAsset.toString()); | ||||
|         } | ||||
|                 ); | ||||
|       }; | ||||
|  | ||||
|       loadImage(); | ||||
|  | ||||
|       return () => { | ||||
|         alive = false; | ||||
|       }; | ||||
|     }, [image]); | ||||
|  | ||||
|     const divStyle = { | ||||
|       backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|     }; | ||||
|     return h('div', {}, | ||||
|               h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                 h('div', {"className": "row"}, | ||||
|                   h('div', {"className": "container"}, | ||||
|                     h('div', {"className": "col-md-8"}, | ||||
|                       h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                         h('li', {"className": "list-inline-item h2"}, | ||||
|                           h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite") | ||||
|                         ), | ||||
|                         h('li', {"className": "list-inline-item h2"}, | ||||
|                           h("i", {"className": "fa-solid fa-angle-right text-white"}) | ||||
|                         ), | ||||
|                         h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title | ||||
|     CMS.registerPreviewTemplate("event-index", EventPreview); | ||||
|     </script> | ||||
|     <script> | ||||
|     var PagePreview = ({widgetFor, entry}) => { | ||||
|         const divStyle = { | ||||
|           backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|         }; | ||||
|         return h('div', {}, | ||||
|                   h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                     h('div', {"className": "row"}, | ||||
|                       h('div', {"className": "container"}, | ||||
|                         h('div', {"className": "col-md-8"}, | ||||
|                           h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite") | ||||
|                             ), | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h("i", {"className": "fa-solid fa-angle-right text-white"}) | ||||
|                             ), | ||||
|                             h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title | ||||
|                             ) | ||||
|                           ), | ||||
|                           h('p', {"className": "text-lighten"}, entry.data.description) | ||||
|                         ) | ||||
|                       ), | ||||
|                       h('p', {"className": "text-lighten"}, entry.data.description | ||||
|                     )) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ), | ||||
|               h('section', {"className": "section-sm"}, | ||||
|                 h('div', {"className": "container"}, | ||||
|                   h('div', {"className": "row"}, | ||||
|                     h('div', {"className": "col-12 mb-4"}, | ||||
|                     h('img', {"className": "img-fluid w-100 mb-4", src: imageUrl}), | ||||
|                     widgetFor('body')) | ||||
|                 ); | ||||
|       }; | ||||
|     CMS.registerPreviewTemplate("blog-index", PagePreview); | ||||
|     CMS.registerPreviewTemplate("cantorpreis-index", PagePreview); | ||||
|     CMS.registerPreviewTemplate("forms-index", PagePreview); | ||||
|     CMS.registerPreviewTemplate("ganztagsangebote-index", PagePreview); | ||||
|     CMS.registerPreviewTemplate("wettbewerbe-index", PagePreview); | ||||
|     CMS.registerPreviewTemplate("begabtenfoerderung-index", PagePreview); | ||||
|     </script> | ||||
|     <script> | ||||
|     var PagePreviewImage = ({ widgetFor, getAsset, entry}) => { | ||||
|         const [imageUrl, setImageUrl] = useState(''); | ||||
|         const image = useMemo(() => entry.data.image, [entry.data.image]); | ||||
|  | ||||
|         useEffect(() => { | ||||
|           let alive = true; | ||||
|  | ||||
|           const loadImage = async () => { | ||||
|             const imageAsset = await getAsset(image); | ||||
|             if (alive) { | ||||
|               setImageUrl(imageAsset.toString()); | ||||
|             } | ||||
|           }; | ||||
|  | ||||
|           loadImage(); | ||||
|  | ||||
|           return () => { | ||||
|             alive = false; | ||||
|           }; | ||||
|         }, [image]); | ||||
|  | ||||
|         const divStyle = { | ||||
|           backgroundImage: 'url("/media/backgrounds/page-title.png"),url("/media/backgrounds/page-title.png")', | ||||
|         }; | ||||
|         return h('div', {}, | ||||
|                   h('section', {"className": "page-title-section overlay", "style": divStyle}, | ||||
|                     h('div', {"className": "row"}, | ||||
|                       h('div', {"className": "container"}, | ||||
|                         h('div', {"className": "col-md-8"}, | ||||
|                           h('ul', {"className": "list-inline custom-breadcrumb"}, | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h('a', {"className": "text-primary font-secondary", href: ""}, "Startseite") | ||||
|                             ), | ||||
|                             h('li', {"className": "list-inline-item h2"}, | ||||
|                               h("i", {"className": "fa-solid fa-angle-right text-white"}) | ||||
|                             ), | ||||
|                             h('li', {"className": "list-inline-item text-white h2 font-secondary"}, entry.data.title | ||||
|                             ) | ||||
|                           ), | ||||
|                           h('p', {"className": "text-lighten"}, entry.data.description | ||||
|                         )) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ), | ||||
|                   h('section', {"className": "section-sm"}, | ||||
|                     h('div', {"className": "container"}, | ||||
|                       h('div', {"className": "row"}, | ||||
|                         h('div', {"className": "col-12 mb-4"}, | ||||
|                         h('img', {"className": "img-fluid w-100 mb-4", src: imageUrl}), | ||||
|                         widgetFor('body')) | ||||
|                       ) | ||||
|                     ) | ||||
|                   ) | ||||
|                 ) | ||||
|               ) | ||||
|             ); | ||||
|   }; | ||||
|  | ||||
| CMS.registerPreviewTemplate("about-index", PagePreviewImage); | ||||
| CMS.registerPreviewTemplate("blog", PagePreviewImage); | ||||
|  | ||||
| </script> | ||||
|  | ||||
|                 ); | ||||
|       }; | ||||
|     CMS.registerPreviewTemplate("about-index", PagePreviewImage); | ||||
|     CMS.registerPreviewTemplate("blog", PagePreviewImage); | ||||
|     </script> | ||||
|   </body> | ||||
| </html> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user