mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

update code template

Browse Source
This commit is contained in:
afc163 2015-05-18 17:33:42 +08:00
parent ace6cfb75b
commit 2d1187c9ac
7 changed files with 61 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/button/demo/disabled.md
View File

@ -5,6 +5,17 @@
---
````html
<button disabled>不可点按钮</button>
<div id="example"></div>
````
````js
/** @jsx React.DOM */
var Button = React.createClass({
render: function() {
return <button disabled>{this.props.children}</button>;
}
});
React.render(<Button>失效的按钮</Button>, document.getElementById('example'));
````

3
package.json
View File

@ -13,7 +13,8 @@
"dependencies": {
"gh-pages-cli": "~0.2.0",
"lodash": "~3.8.0",
"nico": "*"
"nico": "*",
"react-tools": "~0.13.3"
},
"scripts": {
"build": "npm run clean && nico build",

43
static/code.jsx
View File

@ -1,43 +0,0 @@
/*jshint ignore:start */
var CodeBox = React.createClass({
getInitialState: function() {
return {
html: ''
};
},
componentDidMount: function() {
this.props.src = this.props.src.replace(/\.md$/, '.html');
$.get('/' + this.props.src).then(function(data) {
var item = $(data);
item.find('.highlight').appendTo(item);
this.setState({
html: item.html()
});
}.bind(this));
},
handleClick: function(e) {
if (!$(e.target).hasClass('collapse')) {
return;
}
$(e.target).parent().parent().find('.highlight').slideToggle(150);
},
render: function() {
var html = this.state.html;
return (
<div className="code-box"
onClick={this.handleClick}
dangerouslySetInnerHTML={{__html: html}}>
</div>
);
}
});
var CodeBoxes = React.createClass({
render: function() {
return (
<div className="code-boxes">
{this.props.children}
</div>
);
}
});

15
static/script.js
View File

@ -1,7 +1,18 @@
$(function() {
$('.component-demos .icon-all').on('click', function() {
$('.code-box').find('.highlight').slideToggle(150);
slideToggleCode('.code-box');
});
$('.code-box').each(function(i, item) {
item = $(item);
item.find('.highlight').appendTo(item);
});
$('.code-boxes').on('click', '.collapse', function() {
slideToggleCode($(this).parent().parent());
});
function slideToggleCode(item) {
$(item).find('.highlight').slideToggle(150);
}
});

4
theme/templates/code.html
View File

@ -1,5 +1,5 @@
<div class="code-box-container">
{{ post.html }}
<div class="code-box">
{{ post.html|jsx }}
<div class="code-box-meta">
<div class="code-box-title">{{ post.title }}</div>
<p class="code-box-description">

24
theme/templates/layout.html
View File

@ -16,11 +16,6 @@
<script src="/static/script.js"></script>
<!-- react -->
<script src="https://t.alipayobjects.com/images/T12TdfXlpbXXXXXXXX.js"></script>
<!-- JSXTransformer -->
<script src="https://t.alipayobjects.com/images/T1jCFfXdNiXXXXXXXX.js"></script>
{%- if post.meta.template === 'component' %}
<script type="text/jsx" src="/static/code.jsx"></script>
{%- endif %}
</head>
<body class="{%- if post.filepath === 'README.md' %}index-page{%- endif %}">
<header id="header">
@ -107,20 +102,13 @@
组件演示
<i class="iconfont icon-all" title="展开全部代码"></i>
</h2>
<div id="code-boxes">
代码加载中...
<div class="code-boxes">
{%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
{%- for item in items %}
{%- set post = item.meta.filepath|parsePost %}
{%- include "code.html" %}
{%- endfor %}
</div>
<script type="text/jsx">
React.render(
<CodeBoxes>
{%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
{%- for item in items %}
<CodeBox src="{{item.meta.filepath}}"></CodeBox>
{%- endfor %}
</CodeBoxes>,
document.getElementById('code-boxes')
);
</script>
{%- endif %}
</article>
</section>

26
theme/theme.js
View File

@ -1,4 +1,5 @@
var _ = require('lodash');
var ReactTools = require('react-tools');
module.exports = function(nico) {
var exports = {};
@ -58,6 +59,31 @@ module.exports = function(nico) {
}
});
return ret;
},
// For Debug
console: function(target) {
console.log(target);
},
parsePost: function(filepath) {
return nico.sdk.post.read(filepath);
},
jsx: function(content) {
// 替换 js 代码
var scriptExp = /(<script>)([\s\S]*?)(<\/script>)/gi;
var scriptExp2 = /(<script>)([\s\S]*?)(<\/script>)/i;
content = content.replace(scriptExp, function(replacement) {
var match = scriptExp2.exec(replacement);
if (!match) {
return replacement;
}
var code = match[2];
// 转换 jsx 代码
if (code.indexOf('/** @jsx React.DOM */') > -1) {
code = ReactTools.transform(code);
}
return match[1] + code + match[3];
});
return content;
}
};