Excursiopedia Widgets API
===
Excuriopedia widgets are iFrame based widgets with built in real-time customization system in "debug" mode.
type: 'box1' Required
Define widget type as box1, box2, category, boxcustom
akey: '****' Required
Partner affiliate code
lang: 'en' Default: en
Two-letter language code
query: 'Munich' Default: page title
Search query, city name or country name
theme: 'default' Default: default
Widget theme. Value must be on of: default, grey, custom.
width: 242 Default: depends on widget type
iFrame width
height: 400 Default: depends on widget type
iFrame height
currency: 'CZK' Default: Excursion currency
Three-letter currency code supported by Excursiopedia
parent: 'id' Optional
DOM node id, where widget must be rendered
debug: true Default: false
Debug mode.
styles: {}
Object with widget custom styles. Required style is type: custom.
Widget`s style processor works only with Hex color format. List of available elements:
icons
border
background
button
button_text
inbutton
inbutton_text
Excursiopedia widget exports various objects EX, depending on whether a debug or normal mode of the widget. In normal mode EX is DOM node with widget iframe. In debug mode it's an object with getters, setters, config, frame etc... Unfortunately EX do not store updated state of config, so you have to keep actual settings outside EX.
EX.set({width: 200, height: 300...})
Default setter which pushes object in to the frame. You can push there any option from Option list. NOTE: if you want to update custom styles you should push all styles at once. EX.set({styles: {...}}).
EX.ready(callback)
This function executes callback function after DOM inside iframe is ready
EX.reload(obj)
This function reinitialize EX with given options. You may need it if you change language or type, because it reloads everything inside iframe. NOTE: you must pass the whole configuration object to this function.
Set value:
$('#width').on('change', function(e){
window.EX.set({width: e.currentTarget.value})
});
Change widget type:
$('#type).on('change', function(e){
var config = EX.config;
config.type = e.currentTarget.value;
EX.reload(config).ready(function(){
console.log('Widget reloaded!');
})
});
Render output example
renderOutput = =>
renderConfig = (data = (if widget_config? then widget_config.defaults else exc_config), tab = ' ')=>
out = ''
i = _.keys(data).length
for index, value of data
if typeof value is 'object'
out += tab+index + ': {\n'+ renderConfig(value, "\t")+"#{if tab == "\t" then "}\n" else tab+'}'}"
else
record = @model.get(index)
if index is 'with_excursions'
record = !!record
if index is 'height' and record is 199
record = $('#ExcBox').height()
out += """#{tab}#{index}: #{
if isNaN(parseInt(record))
then "'"+record+"'"
else record}#{if i is 1 then '' else ','}\n"""
i--
return out
return """var exc_config = {#{renderConfig()}};"""
P.S.: Please don`t render "debug:true" in production mode, it's not necessary, but recommended.