#daiizメモ

ときどきいいことを書きます

【メモ】griddles-ui-card のコピペ用テンプレート

メモ tech

griddles-ui-cardコンポーネントの最小限の要素を組み込んだテンプレート。version 0.1.0, 0.2.0 に対応。これらに chrome apps 用の manifest.json を加えるだけで chromeアプリとして動作する。

index.html

<!doctype html>
<html>
<head>
  <title>griddles-ui-card demo page</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <script src="../../bower_components/platform/platform.js"></script>
  <link rel="import" href="../griddles-ui-card.html">
  <link href="myApp.css" rel="stylesheet" type="text/css">
</head>
<body unresolved>
  <h1>griddles-ui-card demo page</h1>

  <griddles-ui-card wrappedBy="document"></griddles-ui-card>
  
  <script src="myApp.js"></script>
</body>
</html>

myApp.css

html {
  background-color: #E5E5E5;
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  margin: 0px;
}

myApp.js

  function griddlesAppInit() {
    document.querySelector("griddles-ui-card").layout = {
       'cardWidth': 190,
       'cardMarginBottom': 4,
       'streamMarginLeft': 2,
       'streamMarginRight': 2,
       'streamPaddingTop': 10,
       'numberReadAtOnce': 20,
       'displayFromTopLeftToBottomRight': 0.01
    };
    show_cards(6); // カードを6枚表示する。
  }

  function griddlesAppCardClicked(card) {
  }

  function show_cards(n) {
     var cards = [];
     for(var i = 0; i < n; i++) {
         var card = {
           'griddles_type': 'card', // または'photo_grid'
           'shadow_depth': 1,
           'src': '',
           'contents': '<div>Hello!</div>',
           'className': '',
           'height': Math.floor(Math.random()*200) + 50,
           'stream_index': false,
           'insert_type': 'append',
           'border_radius': 2,
           'dataset': {'name': 'bar'}
         };
         cards.push(card);
     }
     document.querySelector("griddles-ui-card").cards = {'myCard': cards};
     document.querySelector("griddles-ui-card").query = 'myCard';
  }

もう少しシンプルになるといいのにな