update directory structure, include her-runtime and her-website example

- update directory structure
- include her-runtime
- include her-website example
- add npm scripts for dev
- update version to v0.2.0

.gitignore

@@ -3,9 +3,8 @@
 /.project
 /.tmp
 /node_modules
-/tests/output
-/tests/pc-demo
-/bin/her-test
+/test/output
+/test/pc-demo
 tmp
 
 ~*

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 hao123-fe
+Copyright (c) 2018 hao123-fe
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

dist/js_helper/README.md

@@ -0,0 +1,76 @@
+# js_helper
+基于 her 基本方法封装的一些插件
+
+## append.js
+
+结合 `BigPipe.fetch()` 实现无限追加，实现无限滚动加载等功能
+
+其原理是利用 pagelet id 的动态特性，在前端对 pagelet id 做自增计数，同时预先插入与 id 对应的空的 pagelet 占位容器作为 quickling 渲染的容器，并将 id 通过 query 参数传到 smarty，将 smarty 端的 pagelet id 与前端对应上，即可实现 append 的效果。
+
+支持方法：
+
+```javascript
+// 初始化配置
+// pageletPrefix 为需要 append 的 pagelet id 前缀
+// conf 为对应的配置
+append.init(<string> pageletPrefix, <object {
+  <string> key,       // pagelet 自增 id 参数名, 可同时作为分页参数
+  <string> wrapId     // 父容器节点 id
+}> conf)
+
+// 调用 append
+// pageletPrefix 同上
+// 其中 url, cb 同 BigPipe.fetch(pagelets, url, cb)
+append(<string> pageletPrefix, <string> url, <function> cb)
+
+```
+
+使用实例：
+
+```smarty
+{* 声明全局 $_p_id_ 变量, 即 pagelet 的自增 id, 通过 intval() 转换防止 xss *}
+{* 注意: 一定要放在全局, 即 {html} 标签之外或 {html} 内 {head} 和 {body} 外, 否则 quickling 会跳过  *}
+{block name="global_vars"}
+{$_p_id_ = intval($smarty.get._p_id_)}
+{/block}
+
+
+{* 在 content 之前完成初始化配置 *}
+<script runat="server">
+require.defer(['/lib/js_helper/append.js'], function(append) {
+  append.init('p_feed_', {
+    key: '_p_id_',
+    wrapId: 'feed_wrap'
+  });
+});
+</script>
+
+{* 将 pagelet 防止父容器 #feed_wrap 中 *}
+<div id="feed_wrap">
+
+{* 将 pagelet 的 id 设置为 "前缀_{自增id}" *}
+{pagelet id="p_feed_{$_p_id_}"}
+
+    这是 pagelet 的内容, 可以使用 $_p_id_ 进行相应的分页取数据操作……
+
+    {* 下面是结合 lazy 实现的自动加载, 结束条件是 $_p_id_ >= 3 *}
+    {* 当然也可以不使用自动加载, 根据需求手动调用 append() *}
+    {if $_p_id_ < 3}
+
+    {* 在 pagelet 底部创建空 div 用于 lazy 的触发 hook, 然后在 js 中绑定 lazy 和 append() 回调 *}
+    <div data-hook="feed-bottom"></div>
+    <script runat="server">
+        var pagelet = this;
+        require.defer(['/widget/js/jquery-1.10.1.js', '/lib/js_helper/lazy.js', '/lib/js_helper/append.js'], function($, lazy, append) {
+            var $pagelet = $('#' + pagelet.id);
+            var $feedBottom = $('[data-hook=feed-bottom]', $pagelet);
+            lazy.add($feedBottom[0], function() {
+                append('p_feed_', '/');
+            });
+        });
+    </script>
+    {/if}
+{/pagelet}
+</div>
+```
+

dist/js_helper/append.js

@@ -0,0 +1,63 @@
+/**
+ *  一个简单的 append
+ *  可以结合 BigPipe.fetch 实现无限追加, 使用方法见 README.md
+ *  @file append.js
+ *  @author zhangwentao <[email protected]>
+ */
+
+var config = {};
+
+function initConf(key, conf) {
+    config[key] = conf;
+}
+
+function getConf(key, defaultValue) {
+    return config.hasOwnProperty(key) ? config[key] : defaultValue;
+}
+
+
+function append(prefix, url, cb) {
+    var conf = getConf(prefix);
+
+    if (conf) {
+        var wrapId = conf.wrapId;
+        var key = conf.key;
+
+
+        if (!wrapId || !key) {
+            throw new Error('wrapId or key missing');
+        }
+
+        if (!conf.id) {
+            conf.id = 0;
+        }
+
+        var id = ++conf.id;
+
+        var pageletId = prefix + id;
+        var paramStr = [key, id].join('=');
+
+        var $wrap = document.getElementById(wrapId);
+
+        if (!$wrap) {
+            throw new Error('Wrap node does not exist ' + wrapId);
+        }
+
+        var $div = document.createElement('div');
+        $div.id = pageletId;
+
+        $wrap.appendChild($div);
+
+        url += url.indexOf('?') > -1 ? ('&' + paramStr) : ('?' + paramStr);
+
+        /* globals BigPipe */
+        BigPipe.fetch([pageletId], url, cb);
+
+    } else {
+        throw new Error('There is no config for ' + prefix);
+    }
+}
+
+append.init = initConf;
+
+module.exports = append;

dist/js_helper/bigRender.js

@@ -0,0 +1,79 @@
+/*
+ *           File:  bigRender.js
+ *           Path:  commmon/js/bigRender.js
+ *         Author:  HuangYi
+ *       Modifier:  HuangYi
+ *       Modified:  2013-7-16
+ *    Description:  延迟渲染js
+ */
+var lazy = require("./lazy.js");
+
+function add(pagelet) {
+
+  var lazyKey, ele, cssText;
+  try {
+    // if(pagelet.parent){
+    //     pagelet.parent.on("load",function(){
+    //         bindBigRender(pagelet);
+    //     });
+    // }else{
+    bindBigRender(pagelet);
+    //}
+    return true;
+  } catch (e) {
+    setTimeout(function() {
+      throw e;
+    }, 0);
+    return false;
+  }
+}
+
+function bindBigRender(pagelet) {
+  var ele = document.getElementById(pagelet.id);
+  addClass(ele, "g-bigrender");
+
+  var lazyKey = lazy.add(ele, function() {
+
+    pagelet.on("load", function() {
+      removeClass(ele, "g-bigrender");
+    });
+    pagelet.load();
+
+  });
+
+  pagelet.on("unload", function() {
+    lazy.remove(lazyKey);
+  });
+}
+
+function addClass(element, className) {
+  if (!element)
+    return;
+  var elementClassName = element.className;
+  if (elementClassName.length == 0) {
+    element.className = className;
+    return;
+  }
+  if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
+    return;
+  element.className = elementClassName + " " + className;
+}
+
+function removeClass(element, className) {
+  if (!element)
+    return;
+  var elementClassName = element.className;
+  if (elementClassName.length == 0)
+    return;
+  if (elementClassName == className) {
+    element.className = "";
+    return;
+  }
+  if (elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
+    element.className = elementClassName.replace((new RegExp("(^|\\s)" + className + "(\\s|$)")), " ");
+}
+
+
+module.exports = {
+  add: add
+};

dist/js_helper/lazy.js

@@ -0,0 +1,88 @@
+/**
+ *  一个简单的lazy模块实现，基于getBoundingClientRect
+ *  提供add和remove方法
+ */
+
+function getViewportSize() {
+  if (window.innerHeight != null) {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+  if (document.compatMode == 'CSS1Compat') { //标准模式
+    return {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    };
+  }
+  return {
+    width: document.body.clientWidth,
+    height: document.body.clientHeight
+  };
+}
+
+function getElementOffset(element) {
+  return {
+    left: element.getBoundingClientRect().left,
+    top: element.getBoundingClientRect().top
+  };
+}
+
+function addHandler(element, type, handler) {
+  if (element.addEventListener) {
+    element.addEventListener(type, handler, false);
+  } else if (element.attachEvent) {
+    element.attachEvent("on" + type, handler);
+  } else {
+    element["on" + type] = handler;
+  }
+}
+
+var data = {};
+var uniqueId = 0;
+var offsetBuffer = 50;
+
+function bind() {
+  addHandler(window, 'resize', excute);
+  addHandler(window, 'scroll', excute);
+}
+
+function excute() {
+  var viewport = getViewportSize();
+
+  for (var i in data) {
+    var item = data[i];
+    var ele = item[0];
+    var callback = item[1];
+    if (!ele || !ele.getBoundingClientRect) {
+      return;
+    }
+
+    if (getElementOffset(ele).top < viewport.height + offsetBuffer) {
+      callback && callback();
+      remove(i);
+    }
+  }
+}
+
+function add(element, callback) {
+  data[uniqueId++] = [element, callback];
+}
+
+function remove(id) {
+  try {
+    delete data[id];
+    return true;
+  } catch (e) {
+    //return false;
+    throw new Error('Remove unknow lazy element by id:' + id);
+  }
+}
+
+bind();
+
+module.exports = {
+  add: add,
+  remove: remove
+};