ns-lap.notes.md

"color_scheme": "Packages/Seti.tmTheme",
"theme": "Seti.sublime-theme",

1

<Page loaded="loaded">
	<ListView items="{{ reddit }}">
		<ListView.itemTemplate>
			<Label text="{{ title }}" textWrap="true" />
		</ListView.itemTemplate>
	</ListView>
</Page>

2

var frameModule = require("ui/frame");
var observableModule = require("data/observable");
var observableArrayModule = require("data/observable-array");

var model = new observableModule.Observable();
model.reddit = new observableArrayModule.ObservableArray([]);
var url = "http://www.reddit.com/r/aww.json?after=";

exports.loaded = function(args) {
    page = args.object;
    page.bindingContext = model;
    // 7
    loadItems();
};

function loadItems() {
    fetch(url)
        .then(function(response) {
            return response.json();
        })
        .then(function(response) {
            response.data.children.forEach(function(item) {
                if (item.data.url.match(/.jpg/)) {
                    model.reddit.push({
                        title: item.data.title,
                        url: item.data.url
                    });
                }
            });
        });
};

3

page {
	background-color: white;
}
.reddit-item {
	margin: 10;
}
/* 6 */

Next

cssClass="reddit-item"

Next

var after;

url + after

4

after = response.data.after;

loadMoreItems="loadMoreItems"

exports.loadMoreItems = function() {
    loadItems();
}

5

<StackLayout>
	<Label text="{{ title }}" textWrap="true" cssClass="reddit-item" />
	<Image src="{{ url }}" />
</StackLayout>

6

image {
	margin: 0 10 10 10;
	height: 300;
}

18

<Page.actionBar>
	<ActionBar title="Cute Memes" />
</Page.actionBar>

19

action-bar {
	background-color: #000080;
	color: white;
}

7

if (page.ios) {
	var navBar = page.ios.navigationController.navigationBar;
	navBar.barStyle = UIBarStyle.UIBarStyleBlack;
}

Next

create meme.xml, meme.css, meme.js

itemTap="itemTap"

8

exports.itemTap = function(args) {
	var item = model.reddit.getItem(args.index);
	frameModule.topmost().navigate({
		moduleName: "meme",
		context: item
	});
};

9

<Page loaded="loaded" navigatedTo="navigatedTo">
	<Page.actionBar>
		<ActionBar title="Create Meme" />
	</Page.actionBar>
	<Image src="{{ url }}" />
</Page>

11

var observable = require("data/observable");
var meme = new observable.Observable();

exports.loaded = function(args) {
	var page = args.object;
	page.bindingContext = meme;
};

exports.navigatedTo = function(args) {
	var page = args.object;
	var context = page.navigationContext;
	meme.set("url", context.url);
};

10

Image {
	height: 300;
	margin: 25;
}

Next

npm install --save nativescript-social-share

14

<ActionBar.actionItems>
	<ActionItem text="Share" tap="share" ios.position="right" />
</ActionBar.actionItems>

15

var socialShare = require("nativescript-social-share");

16

Add id="image" to image first.

exports.share = function() {
	socialShare.shareImage(meme.get("image"));
};

Next

$ npm install moment --save

20

<label text="{{ time }}" class="timestamp" />

21

var moment = require("moment");

22

time: moment(item.data.created_utc * 1000).fromNow()

23

.timestamp {
	margin: 10;
	color: gray;
	font-size: 10;
	font-style: italic;
	text-align: center;
}