component.html

<style>
  @font-face {
    font-family: 'FontAwesome';
    src: url('vendor/fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('vendor/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('vendor/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('vendor/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('vendor/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
</style>
<script src="vendor/markdown/markdown.min.js"></script>

<polymer-element name="ceci-notebook" extends="ceci-element"
                 attributes="backgroundcolor textcolor nameAttrb"
                 backgroundcolor="#000000"
                 textcolor="#ffffff"
                 nameAttrb="my notes">
  <template>
    <link href="font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="component.css">
    <div id="header" class="header">
      <div class="name">note {{currentPage}}/{{pageCount}}</div>
      <div class="prev headerbutton" on-click="{{prevPage}}"><i class="fa fa-angle-left"></i></div>
      <div class="next headerbutton" on-click="{{nextPage}}"><i class="fa fa-angle-right"></i></div>
      <div class="trash headerbutton" on-click="{{deletePage}}"><i class="fa fa-trash-o"></i></div>
      <div class="add headerbutton" on-click="{{newPage}}"><i class="fa fa-plus"></i></div>
      <div class="text headerbutton" on-click="{{wantsText}}"><i class="fa fa-header"></i></div>
      <div class="camera headerbutton" on-click="{{wantsImage}}"><i class="fa fa-camera"></i></div>
    </div>
    <div id="pages" class="pages pt-perspective pt-main"></div>
    <shadow></shadow>
  </template>
  <ceci-definition>
    {
      "tags": ["data", "words", "text", "note"],
      "thumbnail": "./thumbnail.png",
      "name": "Notebook",
      "description": "Stores your notes.",
      "broadcasts": {
        "wantsPicture": {
          "label": "User wants picture",
          "description": "The user clicked on the picture icon"
        },
        "wantsText": {
          "label": "User wants text",
          "description": "The user clicked on the plus icon"
        }
      },
      "listeners": {
        "newPage": {
          "description": "Create a new page",
          "label": "New Page",
          "default" : false
        },
        "nextPage": {
          "description": "Go to next page",
          "label": "Next Page",
          "default" : false
        },
        "prevPage": {
          "description": "Go to previous",
          "label": "Previous Page",
          "default" : false
        },
        "deletePage": {
          "description": "Delete current page",
          "label": "Delete Page",
          "default" : false
        },
        "addImage": {
          "description": "Add image to current page",
          "label": "Add image",
          "default": false
        },
        "addText": {
          "description": "Add markdown text to current page",
          "label": "Add text",
          "default": false
        },
        "addHTML": {
          "description": "Add an HTML fragment to current page",
          "label": "Add HTML",
          "default": false
        }
      },
      "attributes": {
        "backgroundcolor": {
          "label": "Background Color",
          "editable": "color"
        },
        "textcolor": {
          "label": "Text Color",
          "editable": "color"
        },
        "nameAttrb": {
          "label": "Notebook Name",
          "editable": "text"
        }
      }
    }
  </ceci-definition>
  <script>
    Polymer('ceci-notebook', {
      currentPage: 1,
      pageCount:4,
      ready: function() {
        this.super();
        if (localStorage['hack-collection-pages'] == undefined) {
          localStorage['hack-collection-pages'] = JSON.stringify(
            { pages: [
                ['<h1>First page</h1>', '<p>Notebooks can store text</p>'],
                ['<h1>Page 2</h1>', '<p>even with markdown <strong>markup</strong></p>'],
                ['<h1>Page 3</h1>', '<p>and even...</p>', "<img class='kitten'></img>", "kittens!"],
              ],
              'currentPage': 1
          });
        }
        var data = this.getData();
        this.currentPage = data['currentPage'] || 1;
        this.pageCount = data['pages'].length;
        this.updateDisplay();
      },
      attached : function(){
        this.super();
      },
      getData: function() {
        return JSON.parse(localStorage['hack-collection-pages']);
      },
      setData: function(data) {
        localStorage['hack-collection-pages'] = JSON.stringify(data);
      },
      updateDisplay: function() {
        // XXX this is now called way too many times. Navigation should just be via CSS
        this.$.pages.innerHTML = "";
        var data = this.getData();
        var page, list, item;
        var currentPage = this.$.pages.querySelector('.page.current');
        if (currentPage) {
          currentPage.classList.remove('current');
        }
        for (var pageNo=0; pageNo < data.pages.length; pageNo++) {
          page = document.createElement('div');
          page.className = 'page';
          page.classList.add('pt-page');
          if (pageNo == this.currentPage-1) {
            page.classList.add('pt-page-current');
          }
          list = document.createElement('ul');
          var pageData = data['pages'][pageNo];
          if (pageData) {
            for (var i=0; i<pageData.length; i++) {
              item = document.createElement("li");
              item.innerHTML = pageData[i];
              list.appendChild(item);
            }
          }
          page.appendChild(list);
          this.$.pages.appendChild(page);
        }
      },
      addImage: function(imgsrc) {
        this.addHTML("<img src='" + imgsrc + "'></img>");
      },
      addText: function(stuff) {
        this.addHTML(markdown.toHTML(stuff));
      },
      addHTML: function(snippet) {
        var pagesElt = this.$.pages.querySelectorAll('.page');
        var pageElt = pagesElt.item(this.currentPage-1);
        var item = document.createElement("li");
        item.innerHTML = snippet
        pageElt.querySelector('ul').appendChild(item);
        var data = this.getData();
        data.pages[this.currentPage-1].push(snippet);
        this.setData(data);
      },
      newPage: function() {
        var data = this.getData();
        var pages = data['pages']
        pages.splice(this.currentPage, 0, []);
        data['pages'] = pages;
        this.pageCount++;
        this.currentPage++;
        this.setData(data);
        this.updateDisplay();
      },
      nextPage: function() {
        var data = this.getData();
        var pagesElt = this.$.pages.querySelectorAll('.page');
        if (this.currentPage == data.pages.length) return;
        var outPage = pagesElt.item(this.currentPage-1);
        var inPage = pagesElt.item(this.currentPage);
        function animationDone() {
          outPage.classList.remove('pt-page-current');
          outPage.classList.remove('pt-page-moveToLeftFade');
          inPage.classList.remove('pt-page-moveFromRightFade');
          inPage.removeEventListener('animationend', animationDone);
          inPage.removeEventListener('webkitAnimationEnd', animationDone);
        }
        inPage.addEventListener('animationend', animationDone);
        inPage.addEventListener('webkitAnimationEnd', animationDone);
        outPage.classList.add('pt-page-moveToLeftFade');
        inPage.classList.add('pt-page-current');
        inPage.classList.add('pt-page-moveFromRightFade');
        this.currentPage++;
        data['currentPage'] = this.currentPage;
        this.setData(data);
      },
      prevPage: function() {
        var pagesElt = this.$.pages.querySelectorAll('.page');
        if (this.currentPage <= 1) return;
        var outPage = pagesElt.item(this.currentPage-1);
        var inPage = pagesElt.item(this.currentPage-2);
        function animationDone() {
          outPage.classList.remove('pt-page-current');
          outPage.classList.remove('pt-page-moveToRightFade');
          inPage.classList.remove('pt-page-moveFromLeftFade');
          inPage.removeEventListener('animationend', animationDone);
          inPage.removeEventListener('webkitAnimationEnd', animationDone);
        }
        inPage.addEventListener('animationend', animationDone);
        inPage.addEventListener('webkitAnimationEnd', animationDone);
        outPage.classList.add('pt-page-moveToRightFade');
        inPage.classList.add('pt-page-current');
        inPage.classList.add('pt-page-moveFromLeftFade');
        var pagesElt = this.$.pages.querySelectorAll('.page');
        this.currentPage--;
        var data = this.getData();
        data['currentPage'] = this.currentPage;
        this.setData(data);
      },
      deletePage: function() {
        var data = this.getData();
        data['pages'].splice(this.currentPage-1, 1);
        this.pageCount = data['pages'].length;
        if (this.currentPage > this.pageCount) {
          this.currentPage = this.pageCount;
        }
        this.setData(data);
        if (this.pageCount == 0) {
          this.newPage();
          this.currentPage = 1;
        }
        this.updateDisplay();
      },
      wantsPicture: function() {
        this.broadcast("getpicture", "wantpicture");
      },
      wantsText: function() {
        this.broadcast("gettext", "wanttext");
      },
      backgroundcolorChanged: function (oldValue, newValue) {
        this.style.backgroundColor = newValue;
      },
      textcolorChanged: function (oldValue, newValue) {
        this.style.color = newValue;
      }
    });
  </script>
</polymer-element>