Create a gist now

Instantly share code, notes, and snippets.

@daiz713 /app.js Secret
Last active Aug 29, 2015

What would you like to do?
Program List: Apricot-0.0.4-pkgA
// User script
var a = apricot.api; // Apricotの最新APIセット
function setCardStyle() {
var stage_width = a.Dom('base_5').clientWidth; // スクロールバーを含まない領域幅
var sty = a.GetFlexibleWidth(2, [5, 5], stage_width, 200, 300);
a.Dom('card_0').style.width = sty[0] + "px";
a.Dom('card_0').style.height = sty[0] + "px";
a.Dom('card_0').style.marginLeft = sty[1] + "px";
a.Dom('card_0').style.marginRight = sty[2] + "px";
a.Dom('base_5').style.paddingLeft = sty[1] + "px";
}
window.addEventListener('apricot-ready', function(e) {
setCardStyle();
var new_id = a.CopyBrickInParts('base_5', 'card_0');
a.Dom(new_id).innerHTML = a.FormatDom("<div style='padding-top:72px'><center><h1>Hello, Apricot!</h1></center></div>", new_id);
a.ApplayAnimation("scaleShow", null, null, new_id);
// 画像のプリロード
a.PreloadImgs('init', [
"pie.jpg"
]);
}, false);
window.addEventListener('apricot-click', function(e) {
var info = e.detail;
console.log(info);
var id = info.brick.id;
if(a.IsId(id, 'base_1')) {
a.ToggleDrawerFromLeft('panel', '0.5');
}
if(a.IsId(id, 'base_6')) {
var new_id = a.CopyBrickInParts('base_5', 'card_0');
a.Dom(new_id).innerHTML = a.FormatDom("<img src='apricot.png' style='width: 50px'>", new_id);
a.ApplayAnimation("scaleShow", null, null, new_id);
}
if(a.IsId(id, 'card_0')) {
a.ApplayAnimation("closeElement", null, null, id);
}
if(a.IsId(id, 'base_7')) {
// 画像のプリロード
a.PreloadImgs('init', [
"pie.jpg",
"waffle.jpg",
"bread.jpg"
]);
}
}, false);
window.addEventListener('apricot-preloadImgs-ready', function(e) {
var info = e.detail;
// 新しくロードされた画像をすべて表示するサンプル
var imgs = info.blobs[info.preloadName];
for(var i = 0; i < imgs.length; i++) {
var src = imgs[i].blob;
var new_id = a.CopyBrickInParts('base_5', 'card_0');
a.Dom(new_id).innerHTML = a.FormatDom("<img src='"+src+"' style='width: 100%'>", new_id);
a.ApplayAnimation("scaleShow", null, null, new_id);
}
})
; セミコロンで始まる行は注釈です。
; ビルド対象のパーツ名を記述します。
; アプリUIのベースとなるパーツには`*`マークを付けてください。
base *
card
panel
apricot.manifest = {
/* base.png */
"base": {
"brick_0": {
"design": {
"zIndex": 10,
"backgroundColor": "#3F51B5",
"FullWidth": true
}
},
"brick_1": {
"role": "html-img",
"property": {
},
"design": {
"zIndex": 11,
"cursor": "pointer",
"Src": "apricot.png"
}
},
"brick_2": {
"role": "html-div",
"property": {},
"design": {
"backgroundColor": "rgba(0, 0, 0, 0)",
"zIndex": 11,
"width": "200px",
"color": "#fff",
"fontWeight": 200,
"fontFamily": "Roboto",
"Content": "Apricot Brick",
"Top": "+8px",
"FontScale": "L"
}
},
"brick_3": {
"design": {
"FullWidth": true
}
},
"brick_4": {
"role": "html-input",
"property": {
"placeholder": "ここに入力"
},
"design": {
"backgroundColor": "#fff",
"left": "10px",
"height": "auto",
"Visible": true,
}
},
"brick_5": {
"role": "html-div",
"property": {},
"design": {
"ShadowLevel": 0,
"backgroundColor": "#e9e7e4",
"overflow-y": "scroll",
"padding": "10px",
"boxSizing": "border-box",
"display": "flex",
"flex-wrap": "wrap",
"align-content": "flex-start",
"FullWidth": true
}
},
"brick_6": {
"role": "html-button",
"property": {},
"design": {
"Content": "Hello,Apricot!",
"width": "auto",
"height": "auto",
"backgroundColor": ""
}
},
"brick_7": {
"role": "html-img",
"property": {
"src": "gudebook.jpg"
},
"design": {
"backgroundColor": "#FFC107",
"FullWidth": true,
"position": "fixed",
"top": "",
"bottom": "0px"
}
}
},
/* panel.png */
"panel": {
"brick_1": {
"design": {
"backgroundColor": "#5B8DE5"
}
}
},
/* card.png */
"card": {
"brick_0": {
"design": {
"borderRadius": "2px",
"Cardboard": "c",
"width": "220px",
"height": "220px",
"marginBottom": "10px",
"marginRight": "5px",
"marginLeft": "5px",
"backgroundColor": "#fff"
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment