INTEGRATION GUIDELINE FOR
FELDHAUS KLINKER WEB MODULES Rev. 2, August 2018, MFB/Cadesign form as
INTRODUCTION This document contains technical guidelines for integration of the following Feldhaus Klinker web modules developed by Cadesign form as:
Customizer – wall and house designer
Both modules integrate by injecting content into an existing HTML page by the means of loading external JavaScript files that in return retrieve data from a central data source (server). This method of integration yields these immediate advantages:
Very easy and lightweight integration with just a few lines of HTML code Webserver/Language independent integration using standard client-side JavaScript Fully automated updates; nothing to deploy locally when things are changed
CUSTOMIZER The customizer module is designed to use the maximum available space in a given context. The minimum useable area is approximately 900 x 700 pixels (will fit on a de facto standard tablet screen size in landscape mode).
Example of embedded customizer module in a fixed sized container. Background texture is part of the body styling, the white outline is part of the container styling.
Embedding the module on a page is a matter of adding just a few HTML elements: 1) 2) 3) 4)
Designate an area in the page for the module to load into Add a single HTML-element for the module Add an HTML script block and define relevant parameters (e.g. language settings) Add a few lines of HTML code to initiate the loading procedure of style sheet files and JavaScripts
In the following, each of the above steps will be detailed. Step 1: Prepare the module containing area on your page Add to your page a container element to hold the module, e.g. a <div>-element, and style it according to your preferences and website layout. The container element can either be of fixed size (e.g. 1100 x 800 pixels) or flexible/dynamic (e.g. to fill up a percentage of â&#x20AC;&#x201C; or the full â&#x20AC;&#x201C; browser window).
The illustrations below outline the two common scenarios:
LOGO <div class=”fixed-size-container”>
<div class=”customizer”>
Example CSS width: 900px; height: 700px;
A fixed size container. The customizer element will adapt to the fixed container size.
LOGO <div class=”fluid-container”>
<div class=”customizer”>
Example CSS top: 100px; bottom: 0px; left: 0px; right: 300px;
A fluid container, for example having corner anchor points fixed according to the browser dimensions. The customizer element will adapt to the dynamic container size. In the most bare-bone page you can use the <body>-element as the container and have the customizer module fill up the entire browser window.
Step 2: Add the customizer module Inside you HTML container element you must now place a single additional element like this: <div class="customizer"></div>
This element will be automatically sized to 100 % in both dimensions (height and width), and thus will fill up your container element entirely.
Step 3: Define customizer settings Add to your page, preferably in the page <head>-section, a script element like this: <script type="text/javascript"> var customizerSettings = { language: "de" } </script>
The available language value codes are (as of writing):
de = German en = English pl = Polish fr = French ru = Russian dk = Danish
Step 4: Add external resource links Finally, add these lines of code to your page header: <script type="text/javascript" src="https://yui.customizer.cadesignform.dk/3.18.1/yui/yuimin.js"></script> <link type="text/css" rel="stylesheet" href="https://feldhaus.customizer.cadesignform.dk/assets/feldhaus.css" /> <script type="text/javascript" src="https://feldhaus.customizer.cadesignform.dk/assets/customizer-v2.min.js"></script>
Assuming you have added both code blocks from step 3 and 4 to your page header, you should now have a complete HTML page looking similar to this (example with a fixed size container), excluding your own page elements:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Your Page Title</title> ... <script type="text/javascript"> var customizerSettings = { language: "de" } </script> <script type="text/javascript" src="https://yui.customizer.cadesignform.dk/3.18.1/yui/yui-min.js"></script> <link type="text/css" rel="stylesheet" href="https://feldhaus.customizer.cadesignform.dk/assets/feldhaus.css" /> <script type="text/javascript" src="https://feldhaus.customizer.cadesignform.dk/assets/customizer-v2.min.js"></script> ... </head> <body> ... <div class="fixed-size-container" style="width: 900px; height: 700px"> <div class="customizer"></div> </div> ... </body> </html>