neft
Version:
Universal Platform
121 lines (104 loc) • 2.87 kB
HTML
<!doctype html>
<meta charset="utf-8" />
<title>${context.app.config.title}</title>
<style>
`
const NativeItems = require('extensions/native-items');
`
Flow {
document.query: 'header';
alignment: 'center';
layout.fillWidth: true;
padding: 8;
for ('#text') {
color: 'text';
font.pixelSize: 20;
}
}
Rectangle {
id: horizontalLine;
layout.enabled: false;
anchors.fillWidth: parent;
height: 1;
color: 'rgba(0, 0, 0, .2)';
}
Row {
id: form;
signal $.onSend
document.query: 'form';
layout.fillWidth: true;
height: 50;
alignment: 'center';
padding: 10;
spacing: 10;
background.color: 'neftGreen';
NativeItems.TextInput {
id: input;
layout.fillWidth: true;
}
NativeItems.Button {
text: 'Random';
pointer.onClick: function () {
Device.keyboard.hide();
form.$.onSend.emit(input.text);
};
}
exports.horizontalLine {
anchors.top: parent.top;
color: 'rgba(0, 0, 0, .4)';
}
exports.horizontalLine {
anchors.bottom: parent.bottom;
color: 'rgba(0, 0, 0, .2)';
}
}
Rectangle {
id: image;
property $.source: '';
document.query: 'image';
layout.fillWidth: true;
layout.fillHeight: true;
color: 'rgba(0, 0, 0, .05)';
Text {
text: 'Randomizing giphy...';
anchors.centerIn: parent;
opacity: 0.5;
}
Text {
text: 'Powered By Giphy';
anchors.horizontalCenter: parent.horizontalCenter;
anchors.bottom: parent.bottom;
margin.bottom: 10;
opacity: 0.5;
}
NativeItems.Video {
source: image.$.source;
loop: true;
anchors.centerIn: parent;
anchors.fill: parent;
onReady: function () {
this.start();
}
}
}
</style>
<script>
this.onCreate(function () {
this.randomGiphyForTag = (tag) => {
const url = "http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag="
+ encodeURIComponent(tag);
this.context.app.networking.get(url, (err, resp) => {
if (err) return;
this.refs.image.style.$.source = resp.data.image_mp4_url;
});
};
});
this.onRender(function () {
this.randomGiphyForTag('minions');
});
</script>
<body>
<header>GIPHY</header>
<form ref="form" n-style:$:onSend="${this.randomGiphyForTag}" />
<image ref="image" />
</body>