Skip to content

Commit

Permalink
Widget: Weather background image choose from library (#2153)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenberttpingol
rubenberttpingol authored Oct 16, 2023
1 parent d99aacc commit 3893f4d
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 152 deletions.
59 changes: 59 additions & 0 deletions modules/src/handlebars-helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,62 @@ Handlebars.registerHelper('neq', function(v1, v2, opts) {
return opts.inverse(this);
}
});

Handlebars.registerHelper('set', function(varName, varValue, opts) {
if (!opts.data.root) {
opts.data.root = {};
}

opts.data.root[varName] = varValue;
});

Handlebars.registerHelper('weatherBackgroundImage', function(
icon,
cloudyImage,
dayCloudyImage,
dayClearImage,
fogImage,
hailImage,
nightClearImage,
nightPartlyCloudyImage,
rainImage,
snowImage,
windImage,
opts,
) {
let bgImage = false;

if ((typeof cloudyImage !== 'undefined' && cloudyImage !== '') &&
icon === 'cloudy') {
bgImage = cloudyImage;
} else if ((typeof dayCloudyImage !== 'undefined' && dayCloudyImage !== '') &&
icon === 'partly-cloudy-day') {
bgImage = dayCloudyImage;
} else if ((typeof dayClearImage !== 'undefined' && dayClearImage !== '') &&
icon === 'clear-day') {
bgImage = dayClearImage;
} else if ((typeof fogImage !== 'undefined' && fogImage !== '') &&
icon === 'fog') {
bgImage = fogImage;
} else if ((typeof hailImage !== 'undefined' && hailImage !== '') &&
icon === 'sleet') {
bgImage = hailImage;
} else if ((typeof nightClearImage !== 'undefined' &&
nightClearImage !== '') && icon === 'clear-night') {
bgImage = nightClearImage;
} else if ((typeof nightPartlyCloudyImage !== 'undefined' &&
nightPartlyCloudyImage !== '') && icon === 'partly-cloudy-night') {
bgImage = nightPartlyCloudyImage;
} else if ((typeof rainImage !== 'undefined' && rainImage !== '') &&
icon === 'rain') {
bgImage = rainImage;
} else if ((typeof snowImage !== 'undefined' && snowImage !== '') &&
icon === 'snow') {
bgImage = snowImage;
} else if ((typeof windImage !== 'undefined' && windImage !== '') &&
icon === 'wind') {
bgImage = windImage;
}

return bgImage;
});
169 changes: 17 additions & 152 deletions modules/templates/forecast-elements.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ if (meta && meta.hasOwnProperty('Attribution')) {
<property id="objectFit" type="dropdown" mode="single">
<title>Scale type</title>
<helpText>How should this image be scaled?</helpText>
<default>contain</default>
<default>cover</default>
<options>
<option name="fill">Fill</option>
<option name="contain">Contain</option>
Expand Down Expand Up @@ -291,17 +291,6 @@ if (meta && meta.hasOwnProperty('Attribution')) {
</test>
</visibility>
</property>
<property id="backgroundImage" type="dropdown" mode="single">
<title>Background Image</title>
<helpText>The background image to use</helpText>
<default>none</default>
<options>
<option name="none">None</option>
<option name="fit">Fit</option>
<option name="stretch">Stretch</option>
<option name="center">Center</option>
</options>
</property>
<property type="header" variant="main">
<title>Backgrounds</title>
<visibility>
Expand All @@ -312,180 +301,56 @@ if (meta && meta.hasOwnProperty('Attribution')) {
</property>
<property type="message">
<title>Select images from the media library to replace the default weather backgrounds.</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="cloudyImage" type="mediaSelector">
<title>Cloudy</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="dayCloudyImage" type="mediaSelector">
<title>Cloudy day</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="daySunnyImage" type="mediaSelector">
<property id="dayClearImage" type="mediaSelector">
<title>Clear</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="fogImage" type="mediaSelector">
<title>Fog</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="hailImage" type="mediaSelector">
<title>Hail</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="nightClearImage" type="mediaSelector">
<title>Clear night</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="nightPartlyCloudyImage" type="mediaSelector">
<title>Cloudy night</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="rainImage" type="mediaSelector">
<title>Raining</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="snowImage" type="mediaSelector">
<title>Snowing</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property id="windyImage" type="mediaSelector">
<title>Windy</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
</properties>
<stencil>
<hbs><![CDATA[
{{#if backgroundImage}}
{{#eq backgroundImage 'none'}}
<div class="forecast-elements-background-image
{{#if data.icon}}has-bg{{/if}}
{{#if data.icon}}{{data.icon}}{{/if}}"
style="background-image: url('[[assetId=bg-{{data.icon}}]]');
{{#if data.icon}}
{{#if roundBorder}}
{{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
{{/if}}
{{/if}}"></div>
{{else}}
<div class="global-elements-image img-container forecast-elements-background-image {{data.icon}}"
style="width:100%; height: 100%; overflow: hidden; position: relative;">
<img src="
{{#neq cloudyImage ''}}
{{#eq data.icon 'cloudy'}}/library/download/{{cloudyImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq dayCloudyImage ''}}
{{#eq data.icon 'partly-cloudy-day'}}/library/download/{{dayCloudyImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq daySunnyImage ''}}
{{#eq data.icon 'clear-day'}}/library/download/{{daySunnyImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq fogImage ''}}
{{#eq data.icon 'fog'}}/library/download/{{fogImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq hailImage ''}}
{{#eq data.icon 'sleet'}}/library/download/{{hailImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq nightClearImage ''}}
{{#eq data.icon 'clear-night'}}/library/download/{{nightClearImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq nightPartlyCloudyImage ''}}
{{#eq data.icon 'partly-cloudy-night'}}/library/download/{{nightPartlyCloudyImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq rainImage ''}}
{{#eq data.icon 'rain'}}/library/download/{{rainImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq snowImage ''}}
{{#eq data.icon 'snow'}}/library/download/{{snowImage}}?preview=1{{/eq}}
{{/neq}}
{{#neq windImage ''}}
{{#eq data.icon 'wind'}}/library/download/{{windImage}}?preview=1{{/eq}}
{{/neq}}"
style="width:100%; height: 100%;
object-fit: {{objectFit}};
object-position: {{alignId}} {{valignId}};
position: absolute; top: 0; left: 0;
{{#if data.icon}}
{{#if roundBorder}}
{{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
{{/if}}
{{/if}}"
/>
</div>
{{/eq}}
{{else}}
<div class="forecast-elements-background-image {{#if data.icon}}has-bg {{data.icon}}{{/if}}"
style="background-image: url('[[assetId=bg-{{data.icon}}]]');
{{#if data.icon}}
{{#if roundBorder}}
{{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
{{/if}}
{{/if}}"></div>
{{/if}}
<div class="global-elements-image img-container forecast-elements-background-image weather-bg--{{data.icon}}"
style="width:100%; height: 100%; overflow: hidden; position: relative;">
{{set 'bgImg' (weatherBackgroundImage data.icon cloudyImage dayCloudyImage dayClearImage fogImage hailImage nightClearImage nightPartlyCloudyImage rainImage snowImage windImage)}}
<img src="{{#if @root.bgImg}}/library/download/{{@root.bgImg}}?preview=1{{else}}[[assetId=bg-{{data.icon}}]]{{/if}}"
style="width:100%; height: 100%;
object-fit: {{objectFit}};
object-position: {{alignId}} {{valignId}};
position: absolute; top: 0; left: 0;
{{#if data.icon}}
{{#if roundBorder}}
{{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
{{/if}}
{{/if}}"
/>
</div>
]]></hbs>
<style><![CDATA[
.forecast-elements-background-image:not(.has-bg) {
background-image: none !important;
}
.forecast-elements-background-image.has-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
]]></style>
</stencil>
<assets>
<asset id="bg-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-cloudy.jpg"></asset>
Expand Down
3 changes: 3 additions & 0 deletions ui/src/layout-editor/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
// Include public path for webpack
require('../../public_path');

window.Handlebars = require('handlebars/dist/handlebars.min.js');
require('../../../modules/src/handlebars-helpers.js');

// Include handlebars templates
const designerMainTemplate = require('../templates/layout-editor.hbs');
const messageTemplate = require('../templates/message.hbs');
Expand Down

0 comments on commit 3893f4d

Please sign in to comment.