let frameId = window.requestAnimationFrame(callback)

// 停止动画
window.cancelAnimationFrame()

import React, { Component } from 'react'

export default class NoticeBar extends Component {
  constructor (props) {
    super(props)
    this.state = {
      closed: false
    }
    this.marquee = null
    this.aFrameId = null
  }
  componentDidMount () {
    if (window.requestAnimationFrame && this.props.marqueeText) {
      let scrollWidth = this.marquee.parentElement.offsetWidth
      let textWidth = this.marquee.offsetWidth
      let right = 0
      let marquee = () => {
        right++
        if (right >= textWidth - scrollWidth + 30) {
          right = 0
        }
        this.marquee.style.right = right + 'px'
        this.aFrameId = window.requestAnimationFrame(marquee)
      }
      if(textWidth > scrollWidth) this.aFrameId = window.requestAnimationFrame(marquee)
    }
  }
  componentWillUnmount () {
    // 为了提高性能，组件卸载前，记得停止动画
    window.cancelAnimationFrame(this.aFrameId)
    this.aFrameId = null
  }
  onClose = () => {
    if (this.aFrameId) {
      window.cancelAnimationFrame(this.aFrameId)
      this.aFrameId = null
    }
    this.setState({ closed: true })
  }
  render () {
    const { mode, marqueeText, onClick, children } = this.props
    const { onClose } = this
    const { closed } = this.state
    if (closed) return null
    return (
      <div className="notice-bar">
        <div className="notice-bar-icon"/>
        <div className="notice-bar-content">
          {!!children && children}
          {
            !!marqueeText && !children && (
              <div className="notice-bar-marquee-wrap">
                <div className="notice-bar-marquee" ref={ele => this.marquee = ele}>
                  {marqueeText}
                </div>
              </div>
            )
          }
        </div>
        {
          mode === 'link' && (
            <div className="notice-bar-operation" onClick={onClick}>
              <i className="icon-link"/>
            </div>
          )
        }
        {
          mode === 'closable' && (
            <div className="notice-bar-operation" onClick={onClose}>
              <i className="icon-close"/>
            </div>
          )
        }
      </div>
    )
  }
}

function wrapper_function() {
  // 这就是thunk，因为它把一些任务推迟做
  return function thunk() {
    console.log('do stuff now');
  };
}

// 1. 普通对象
// 2. 有type属性
// 3. 其他任意内容
{
  type: 'USER_LOGGED_IN',
  username: 'dave'
}

function userLoggedIn() {
  return {
    type: 'USER_LOGGED_IN',
    username: 'dave'
  };
}

function getUser() {
  return function() {
    return axios.get('/current_user');
  };
}

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    // 触发每个action这里都会被调用
    // 如果是函数就调用它
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    
    // 否则继续按正常处理
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

// 你可以已经引入了createStore，还需要引入applyMiddleware
import { createStore, applyMiddleware } from 'redux';
// 引入`thunk` 中间件
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
// 使用applyMiddleware创建thunk中间件
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

var myApp = angular.module('myApp', []);
myApp.value('clientId', '12345678');

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
  this.clientId = clientId;
}]);

myApp.factory('clientId', function clientIdFactory() {
  return '12345678';
});

// 这里只是返回一个字符串，可能用value更好点。如果需要运算，可以这样写
myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) {
  var encrypt = function(data1, data2) {
    return (data1 + ':' + data2).toUpperCase();
  };

  var secret = window.localStorage.getItem('myApp.secret');
  var apiToken = encrpty(clientId, secret);

  return apiToken;
}]);

function UnicornLauncher(apiToken) {
  this.launchedCount = 0;
  this.launch = function() {
    this.lanuchedCount++;
  };
}

myApp.factory('unicornLauncher', ['apiToken', function(apiToken) {
  return new UnicornLauncher(apiToken);
}]);

myApp.service('unicornLauncher', ['apiToken', UnicornLauncher]);

myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
  var useTinfoilShielding = false;

  this.useTinfoilShielding = function(value) {
    useTinfoilShielding = !!value;
  };

  this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {

    // let's assume that the UnicornLauncher constructor was also changed to
    // accept and use the useTinfoilShielding argument
    return new UnicornLauncher(apiToken, useTinfoilShielding);
  }];
});

myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {
  unicornLauncherProvider.useTinfoilShielding(true);
}]);

{
  "name": "example",
  "version": "0.1.0",
  "description": "apiDoc basic example",
  "title": "Custom apiDoc browser title",
  "url" : "https://api.github.com/v1"
}

{
  "name": "example",
  "version": "0.1.0",
  "description": "apiDoc basic example",
  "apidoc": {
    "title": "Custom apiDoc browser title",
    "url" : "https://api.github.com/v1"
  }
}

{
  "header": {
    "title": "My own header title",
    "filename": "header.md"
  },
  "footer": {
    "title": "My own footer title",
    "filename": "footer.md"
  }
}

/**
 * @apiDefine UserNotFoundError
 *
 * @apiError UserNotFound The id of the User was not found.
 *
 * @apiErrorExample Error-Response:
 *     HTTP/1.1 404 Not Found
 *     {
 *       "error": "UserNotFound"
 *     }
 */

/**
 * @api {get} /user/:id Request User information
 * @apiName GetUser
 * @apiGroup User
 *
 * @apiParam {Number} id Users unique ID.
 *
 * @apiSuccess {String} firstname Firstname of the User.
 * @apiSuccess {String} lastname  Lastname of the User.
 *
 * @apiSuccessExample Success-Response:
 *     HTTP/1.1 200 OK
 *     {
 *       "firstname": "John",
 *       "lastname": "Doe"
 *     }
 *
 * @apiUse UserNotFoundError
 */

/**
 * @api {put} /user/ Modify User information
 * @apiName PutUser
 * @apiGroup User
 *
 * @apiParam {Number} id          Users unique ID.
 * @apiParam {String} [firstname] Firstname of the User.
 * @apiParam {String} [lastname]  Lastname of the User.
 *
 * @apiSuccessExample Success-Response:
 *     HTTP/1.1 200 OK
 *
 * @apiUse UserNotFoundError
 */

/**
 * @api {get} /user/:id
 */

/**
 * @apiDefine MyError
 * @apiError UserNotFound The <code>id</code> of the User was not found.
 */

/**
 * @api {get} /user/:id
 * @apiUse MyError
 */

/**
 * @apiDefine admin User access only
 * This optional description belong to to the group admin.
 */

/**
 * @api {get} /user/:id
 * @apiPermission admin
 */

/**
 * @apiDeprecated */

/**
 * @apiDeprecated use now (#Group:Name).
 *
 * Example: to set a link to the GetDetails method of your group User
 * write (#User:GetDetails)
 */

/**
 * @apiDescription This is the Description.
 * It is multiline capable.
 *
 * Last line of Description.
 */

/**
 * @api {get} /user/:id
 * @apiError UserNotFound The <code>id</code> of the User was not found.
 */

/**
 * @api {get} /user/:id
 * @apiErrorExample {json} Error-Response:
 * HTTP/1.1 404 Not Found
 * {
 *   "error": "UserNotFound"
 * }
 */

/**
 * @api {get} /user/:id
 * @apiExample {curl} Example usage:
 * curl -i http://localhost/user/4711
 */

/**
 * @api {get} /user/:id
 * @apiGroup User
 */

/**
 * @api {get} /user/:id
 * @apiHeader {String} access-key Users unique access-key.
 */

/**
 * @api {get} /user/:id
 * @apiHeaderExample {json} Header-Example:
 * {
 *   "Accept-Encoding": "Accept-Encoding: gzip, deflate"
 * }
 */

/**
 * @apiIgnore Not finished Method
 * @api {get} /user/:id
 */

/**
 * @api {get} /user/:id
 * @apiName GetUser
 */

/**
 * @api {get} /user/:id
 * @apiParam {Number} id Users unique ID.
 */

/**
 * @api {post} /user/
 * @apiParam {String} [firstname] Optional Firstname of the User.
 * @apiParam {String} lastname Mandatory Lastname.
 * @apiParam {String} country="DE" Mandatory with default value "DE".
 * @apiParam {Number} [age=18] Optional Age with default 18.
 *
 * @apiParam (Login) {String} pass Only logged in users can post this.
 *        In generated documentation a separate
 *        "Login" Block will be generated.
 */

/**
 * @api {get} /user/:id
 * @apiParamExample {json} Request-Example:
 * {
 *   "id": 4711
 * }
 */

/**
 * @api {get} /user/:id
 * @apiPermission none
 */

// Configuration parameter sampleUrl: "http://api.github.com"
/**
 * @api {get} /user/:id
 */

// Configuration parameter sampleUrl: "http://api.github.com"
/**
 * @api {get} /user/:id
 * @apiSampleRequest http://test.github.com/some_path/
 */

// Configuration parameter sampleUrl: "http://api.github.com"
/**
 * @api {get} /user/:id
 * @apiSampleRequest /test
 */

// Configuration parameter sampleUrl: "http://api.github.com"
/**
 * @api {get} /user/:id
 * @apiSampleRequest off
 */

// Configuration parameter sampleUrl is not set
/**
 * @api {get} /user/:id
 * @apiSampleRequest http://api.github.com/some_path/
 */

/**
 * @api {get} /user/:id
 * @apiSuccess {String} firstname Firstname of the User.
 * @apiSuccess {String} lastname Lastname of the User.
 */

// 带(group)示例
/**
 * @api {get} /user/:id
 * @apiSuccess (200) {String} firstname Firstname of the User.
 * @apiSuccess (200) {String} lastname Lastname of the User.
 */

// 带对象示例
/**
 * @api {get} /user/:id
 * @apiSuccess {Boolean} active Specify if the account is active.
 * @apiSuccess {Object} profile User profile information.
 * @apiSuccess {Number} profile.age Users age.
 * @apiSuccess {String} profile.image Avatar-Image.
 */

// 带数组示例
/**
 * @api {get} /users
 * @apiSuccess {Object[]} profiles List of user profiles.
 * @apiSuccess {Number} profiles.age Users age.
 * @apiSuccess {String} profiles.image Avatar-Image.
 */

/**
 * @api {get} /user/:id
 * @apiSuccessExample {json} Success-Response:
 * HTTP/1.1 200 OK
 * {
 *   "firstname": "John",
 *   "lastname": "Doe"
 * }
 */

/**
 * @apiDefine MySuccess
 * @apiSuccess {string} firstname The users firstname.
 * @apiSuccess {number} age The users age.
 */

/**
 * @api {get} /user/:id
 * @apiUse MySuccess
 */

/**
 * @api {get} /user/:id
 * @apiVersion 1.6.2
 */

getImgBase64: function(imgFile, cb){
  if(!window.FileReader){
    alert('系统暂不支持针对你的浏览器的文件上传功能，建议使用最新版的Chrome！');
    return false;
  }
  var reader = new FileReader();
  reader.onload = function(){
    cb && cb(reader.result);
  };
  reader.readAsDataURL(imgFile);
  return true;
}

$(document).on('mousemove', function(e){
  e.preventDefault();
  var $thumb = $('.slider-thumb');
  if($thumb.hasClass('moving')){
    // 调整大小
    var left = parseFloat($thumb.css('left'));
    if(self.lastPosition){
      var max = $thumb.siblings('.line').width() - $thumb.width();
      (e.pageX >= self.lastPosition.x)
      ? (left >= max ? left = max : left += (e.pageX - self.lastPosition.x))
      : (left <= 0 ? left = 0 : left += (e.pageX - self.lastPosition.x));
      $thumb.css('left', left);
    }
    self.currentRadio = left / $thumb.siblings('.line').width() + 1;
    self.resizeImg(self.currentRadio);
  }
  var $imgs = $('#avatarEditorDialog').find('img');
  if($imgs.hasClass('moving')){
    // 移动图片位置
    var left = parseFloat($imgs.css('left'));
    var top = parseFloat($imgs.css('top'));
    var width = parseFloat($imgs.css('width'));
    var height = parseFloat($imgs.css('height'));
    if(self.lastPosition){
      var leftMin = -(width - BASE - 30);
      var topMin = -(height - BASE - 30);
      (e.pageX < self.lastPosition.x)
      ? (left <= leftMin ? left = leftMin : left += (e.pageX - self.lastPosition.x))
      : (left >= 30 ? left = 30 : left += (e.pageX - self.lastPosition.x));
      (e.pageY < self.lastPosition.y)
      ? (top <= topMin ? top = topMin : top += (e.pageY - self.lastPosition.y))
      : (top >= 30 ? top = 30 : top += (e.pageY - self.lastPosition.y));
      $imgs.css({
        left: left,
        top: top
      });
    }
  }
  self.lastPosition = {
    x: e.pageX,
    y: e.pageY
  };
});

resizeImg: function(radio){
  var $imgs = $('#avatarEditorDialog').find('img');
  var height = $imgs.height();
  var width = $imgs.width();
  if(height > width){
    $imgs.css({
      width: BASE * radio,
      height: (BASE * height / width) * radio,
      top: -((BASE * height / width) * radio - 310) / 2,
      left: -(BASE * radio - 310) / 2
    });
  }else{
    $imgs.css({
      height: BASE * radio,
      width: (BASE * width / height) * radio,
      top: -(BASE * radio - 310) / 2,
      left : -((BASE * width / height) * radio - 310) / 2
    });
  }
}

var canvas = document.createElement('canvas');
canvas.id = 'avatarCanvas';
var ctx = canvas.getContext('2d');
var $img = $('.avatar-editor-window-inner img');
var originalWidth = parseFloat($img.attr('data-original-width'));
var originalHeight = parseFloat($img.attr('data-original-height'));
var nWidth = $img.width();
var nHeight = $img.height();
var x = (30 - parseFloat($img.css('left'))) * originalWidth / nWidth;
var y = (30 - parseFloat($img.css('top'))) * originalHeight / nHeight;
canvas.width = BASE * originalWidth / nWidth;
canvas.style.width = canvas.width;
canvas.height = BASE * originalHeight / nHeight;
canvas.style.height = canvas.height;
ctx.drawImage($img[0], x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
var avatar = canvas.toDataURL($img.attr('src').match(/data:(.*);base64/)[1] || 'image/jpg');

{
	"title": "SVG教程（中文翻译版）",
	"author": "brucewar <wjl891014@gmail.com>",
	"description": "SVG教程中文翻译版，也是本人第一次翻译英文教程。",
	"links": {
		"sidebar": {
			"博客": "http://brucewar.me",
			"打赏": "http://brucewar.me/donate/",
			"View on GitHub": "https://github.com/brucewar/svg-tutorial"
		}
	},
	"plugins": [
		"duoshuo",	// 多说评论
		"github",	// 展示github图标
		"ga",	// google analytics
		"ba"	// 百度统计
	],
	"pluginsConfig": {
		"duoshuo": {
			"short_name": "brucewar",
			"theme": "default"
		},
		"github": {
			"url": "https://github.com/brucewar"
		},
		"ga": {
			"token": "UA-87259783-2"
		},
		"ba": {
			"token": "80f89a3fe34a9f8e22c53f85908e2d6"
		}
	}
}

{
	"root": {
		"name": "中国"
	},
	"中国": {
		"name": "中国",
		"children": [
			{"name": "浙江"},
			{"name": "广西"},
			{"name": "黑龙江"},
			{"name": "新疆"}
		]
	},
	"浙江": {
		"name": "浙江",
		"children": [
			{"name": "杭州"},
			{"name": "宁波"},
			{"name":"温州" },
			{"name":"绍兴" }
		]
	},
	"广西": {
		"name": "广西",
		"children": [
			{"name": "桂林"},
			{"name": "南宁"},
			{"name": "柳州"},
			{"name": "防城港"}
		]
	},
	"桂林": {
		"name": "桂林",
		"children": [
			{"name":"秀峰区"},
			{"name":"叠彩区"},
			{"name":"象山区"},
			{"name":"七星区"}
		]
	},
	"黑龙江": {
			"name":"黑龙江",
			"children":
			[
					{"name":"哈尔滨"},
					{"name":"齐齐哈尔"},
					{"name":"牡丹江"},
					{"name":"大庆"}
			]
	},
	"新疆" : {
			"name":"新疆" ,
			"children":
			[
					{"name":"乌鲁木齐"},
					{"name":"克拉玛依"},
					{"name":"吐鲁番"},
					{"name":"哈密"}
			]
	}
}

var margin = {
	top: 20,
	left: 50,
	right: 50,
	bottom: 20
};
var width = $(document).width(),
	height = $(document).height(),
	i = 0,
	limit = 2,
	root;

	// draggable and scalable
	var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on('zoom', zoom);
	function zoom(){
		d3.select('svg').select('g').attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
	}

	var svg = d3.select("#treeContainer").append("svg")
			.attr("width", width - margin.left - margin.right)
			.attr("height", height - margin.top - margin.bottom)
			.call(zoomListener)
		.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 异步获取数据
function getData(sd, cb){
	d3.json('data/async_city.json', function(err, json){
		// 通过callback返回部分数据
		cb && cb(json[sd.name]);
	});
}

// 获取树的root
getData({name: 'root'}, function(json){
	root = json;
	root.x0 = height / 2;
	root.y0 = width / 2;

	// 初始化树根
	update(root);
});