mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
chore: remove demo.js
This commit is contained in:
Benjy Cui
parent
90a54507f5
commit
35ad4017dd
490
scripts/demo.js
490
scripts/demo.js
@ -1,490 +0,0 @@
|
||||
require('../style/index.less');
|
||||
require('../site/static/style.less');
|
||||
require('../site/static/tomorrow.less');
|
||||
|
||||
window['css-animation'] = require('css-animation');
|
||||
window['react-router'] = require('react-router');
|
||||
window['rc-form'] = require('rc-form');
|
||||
window.CopyToClipboard = require('react-copy-to-clipboard');
|
||||
var antd = require('../index');
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var semver = require('semver');
|
||||
window.antd = antd;
|
||||
window.React = React;
|
||||
window.ReactDOM = ReactDOM;
|
||||
window['object-assign'] = require('object-assign');
|
||||
window['classnames'] = require('classnames');
|
||||
window['reqwest'] = require('reqwest');
|
||||
window['jsonp'] = require('jsonp');
|
||||
window['querystring'] = require('querystring');
|
||||
window['Values'] = require('values.js');
|
||||
window['InstantClick'] = require('instantclick');
|
||||
require('./home')();
|
||||
|
||||
function camelize(str) {
|
||||
return str.replace(/(?:^|[-_])(\w)/g, function (_, c) {
|
||||
return c ? c.toUpperCase() : '';
|
||||
});
|
||||
}
|
||||
|
||||
window.require = function (path) {
|
||||
var result = window;
|
||||
var namespaces = path.split('/');
|
||||
namespaces.forEach(function (key, i) {
|
||||
if (i === 2) {
|
||||
key = camelize(key);
|
||||
}
|
||||
if (key !== 'lib') {
|
||||
if (result[key]) {
|
||||
result = result[key];
|
||||
} else {
|
||||
throw 'There should not have modules here: ' + path;
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
antd.DatePicker.locale = {
|
||||
en_US: require('../components/date-picker/locale/en_US'),
|
||||
zh_CN: require('../components/date-picker/locale/zh_CN'),
|
||||
};
|
||||
|
||||
antd.Calendar.locale = {
|
||||
en_US: require('../components/calendar/locale/en_US'),
|
||||
zh_CN: require('../components/calendar/locale/zh_CN'),
|
||||
};
|
||||
|
||||
antd.Pagination.locale = {
|
||||
en_US: require('../components/pagination/locale/en_US'),
|
||||
zh_CN: require('../components/pagination/locale/zh_CN'),
|
||||
};
|
||||
|
||||
antd.LocaleProvider['en_US'] = require('../components/locale-provider/en_US'),
|
||||
|
||||
InstantClickChangeFns.push(function () {
|
||||
// auto complete for components
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
// 获取搜索数据
|
||||
var searchData = window.ANT_COMPONENTS.sort(function (a, b) {
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
|
||||
var AutoComplete = React.createClass({
|
||||
getOptions() {
|
||||
return searchData.map(function (s) {
|
||||
return <Option sData={s} key={s.title} text={'跳转到 ' + s.title}>
|
||||
<strong>{s.title}</strong>
|
||||
|
||||
<span className="ant-component-decs">{s.desc}</span>
|
||||
</Option>;
|
||||
});
|
||||
},
|
||||
|
||||
handleSelect(value) {
|
||||
location.href = rootUrl + '/components/' + value.replace(/([a-z])([A-Z])/g, function (m, m1, m2) {
|
||||
return m1 + '-' + m2;
|
||||
}).toLowerCase() + '/';
|
||||
},
|
||||
|
||||
filterOption(input, option) {
|
||||
return option.props.sData.title.toLowerCase().indexOf(input.toLowerCase()) !== -1 || option.props.sData.desc.indexOf(input) !== -1;
|
||||
},
|
||||
|
||||
render() {
|
||||
return <Select combobox style={{width: '100%'}}
|
||||
onSelect={this.handleSelect}
|
||||
optionLabelProp="text"
|
||||
dropdownClassName="autoComplete"
|
||||
searchPlaceholder="搜索组件..."
|
||||
filterOption={this.filterOption}>{this.getOptions()}</Select>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<AutoComplete/>, document.getElementById('autoComplete'));
|
||||
});
|
||||
|
||||
InstantClickChangeFns.push(function () {
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
var versionsHistory = {
|
||||
'0.9.x': '09x.ant.design',
|
||||
'0.10.x': '010x.ant.design',
|
||||
'0.11.x': '011x.ant.design',
|
||||
};
|
||||
versionsHistory[antdVersion.latest] =
|
||||
versionsHistory[antdVersion.latest] || 'ant.design';
|
||||
var versions = Object.keys(versionsHistory).sort(function (a, b) {
|
||||
return semver.lt(a.replace('.x', '.0'), b.replace('.x', '.0'));
|
||||
});
|
||||
var options = versions.map(function (version) {
|
||||
var link = versionsHistory[version];
|
||||
return <Option key={version} value={version}>{version}</Option>;
|
||||
});
|
||||
|
||||
function onChange(value) {
|
||||
if (versionsHistory[value]) {
|
||||
location.href = location.href.replace(location.host, versionsHistory[value]);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Select defaultValue={antdVersion.latest} size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
onChange={onChange}>{options}</Select>
|
||||
, document.getElementById('versions-select'));
|
||||
});
|
||||
|
||||
window.BrowserDemo = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<article className="window-frame focus">
|
||||
<header className="top-bar">
|
||||
<div className="controls">
|
||||
<div className="control close"></div>
|
||||
<div className="control minify"></div>
|
||||
<div className="control expand"></div>
|
||||
</div>
|
||||
<input className="address-bar" defaultValue="http://www.example.com"/>
|
||||
</header>
|
||||
<section className="window-content">
|
||||
{this.props.children}
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const { Modal, Carousel } = antd;
|
||||
const PriviewImg = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
visible: false,
|
||||
current: 0,
|
||||
};
|
||||
},
|
||||
showImageModal() {
|
||||
this.setState({
|
||||
visible: true
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.setState({
|
||||
visible: false
|
||||
});
|
||||
},
|
||||
handleImgChange(current) {
|
||||
this.setState({current});
|
||||
},
|
||||
render() {
|
||||
const goodCls = this.props.good ? 'good' : '';
|
||||
const badCls = this.props.bad ? 'bad' : '';
|
||||
const imgsPack = this.props.imgsPack || [{
|
||||
src: this.props.src,
|
||||
alt: this.props.alt,
|
||||
}];
|
||||
const imgStyle = {};
|
||||
if (this.props.noPadding) {
|
||||
imgStyle.padding = '0';
|
||||
imgStyle.background = 'none';
|
||||
}
|
||||
const current = this.state.current;
|
||||
const arrows = imgsPack.length > 1;
|
||||
const createMarkup = () => {
|
||||
return {__html: this.props.description}
|
||||
};
|
||||
return (
|
||||
<div className="preview-image-box" style={{ width: this.props.width }}>
|
||||
<div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
|
||||
<img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture"/>
|
||||
</div>
|
||||
<div className="preview-image-title">{this.props.alt}</div>
|
||||
<div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()}/>
|
||||
<Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer=""
|
||||
title="">
|
||||
<Carousel afterChange={this.handleImgChange} adaptiveHeight arrows={arrows}>
|
||||
{
|
||||
imgsPack.map((img, i) =>
|
||||
<div key={i}>
|
||||
<div className="image-modal-container">
|
||||
<img src={img.src}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Carousel>
|
||||
<div className="preview-image-title">{imgsPack[current].alt}</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
InstantClickChangeFns.push(function () {
|
||||
const previewImageBoxes = $('.preview-img').parent();
|
||||
previewImageBoxes.each(function (i, box) {
|
||||
box = $(box);
|
||||
let priviewImgs = [];
|
||||
const priviewImgNodes = box.find('.preview-img');
|
||||
|
||||
// 判断是否要做成图片集合
|
||||
// 指定了封面图片就是
|
||||
let coverImg;
|
||||
priviewImgNodes.each(function (i, img) {
|
||||
if (img.hasAttribute('as-cover')) {
|
||||
coverImg = img;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (coverImg) {
|
||||
const imgs = [];
|
||||
priviewImgNodes.each((i, img) => imgs.push(img));
|
||||
priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs}/>;
|
||||
} else {
|
||||
priviewImgNodes.each(function (i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
|
||||
noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
|
||||
good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')}/>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 计算宽度
|
||||
let width = '';
|
||||
if (priviewImgs.length === 1) {
|
||||
width = priviewImgNodes[0].getAttribute('width') || '';
|
||||
} else if (coverImg) {
|
||||
width = coverImg.getAttribute('width');
|
||||
}
|
||||
if (width && width.indexOf('%') < 0 && width !== 'auto') {
|
||||
width += 'px';
|
||||
}
|
||||
|
||||
let mountNode = $('<div class="preview-image-boxes cleafix ' + (coverImg ? 'pack' : '') + '" style="width: ' + width + '"></div>')[0];
|
||||
box.replaceWith(mountNode);
|
||||
ReactDOM.render(<span>{priviewImgs}</span>, mountNode);
|
||||
});
|
||||
});
|
||||
|
||||
InstantClickChangeFns.push(function() {
|
||||
// fix hash id link
|
||||
if (window.location.href.indexOf('#') > 0) {
|
||||
setTimeout(function() {
|
||||
window.location.href = window.location.href;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
$('.component-demos .icon-all').off('click');
|
||||
$('.component-demos .icon-all').on('click', function() {
|
||||
if ($(this).hasClass('expand')) {
|
||||
$(this).removeClass('expand');
|
||||
$('.code-box .highlight').animate({
|
||||
height: 'hide',
|
||||
opacity: 0
|
||||
}, 150);
|
||||
} else {
|
||||
$(this).addClass('expand');
|
||||
$('.code-box .highlight').animate({
|
||||
height: 'show',
|
||||
opacity: 1
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
|
||||
$('.code-box').each(function(i, item) {
|
||||
item = $(item);
|
||||
item.find('.highlight').appendTo(item);
|
||||
});
|
||||
|
||||
$('.code-boxes').off('click');
|
||||
$('.code-boxes').on('click', '.collapse', function() {
|
||||
var highlightBox = $(this).parent().parent().find('.highlight');
|
||||
var codeVisible = highlightBox.is(':visible');
|
||||
highlightBox.animate({
|
||||
height: codeVisible ? 'hide' : 'show',
|
||||
opacity: codeVisible ? 0 : 1
|
||||
}, 150);
|
||||
if (codeVisible) {
|
||||
$(this).parent().parent().removeClass('expand');
|
||||
} else {
|
||||
$(this).parent().parent().addClass('expand');
|
||||
}
|
||||
});
|
||||
|
||||
function hashChange() {
|
||||
$('.demos-anchor a').removeClass('current');
|
||||
$('.demos-anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current');
|
||||
}
|
||||
|
||||
hashChange();
|
||||
|
||||
// 高亮侧边演示菜单
|
||||
$(window).off('hashchange');
|
||||
$(window).on('hashchange', hashChange);
|
||||
|
||||
// 移动 API 文档到演示下方
|
||||
$('.markdown #api').nextAll().andSelf().appendTo('.api-container');
|
||||
|
||||
// 滚动时固定锚点、高亮当前项
|
||||
if ($('.demos-anchor')[0]) {
|
||||
var doc = $(document);
|
||||
var tocTop = $('.toc').offset().top;
|
||||
function onScroll() {
|
||||
var top = doc.scrollTop();
|
||||
if (top >= tocTop) {
|
||||
$('.toc').addClass('sticky');
|
||||
} else {
|
||||
$('.toc').removeClass('sticky');
|
||||
}
|
||||
}
|
||||
onScroll();
|
||||
$(window).off('scroll');
|
||||
$(window).on('scroll', onScroll);
|
||||
}
|
||||
|
||||
// 添加上一页下一页
|
||||
if ($('.aside-container li > a').length > 0) {
|
||||
var links = $('.aside-container li > a');
|
||||
var currentLinkIndex = -1;
|
||||
links.each(function(i, item) {
|
||||
if ($(item).parent().hasClass('current')) {
|
||||
currentLinkIndex = i;
|
||||
}
|
||||
});
|
||||
var prevNextNavNode = $('<div class="prev-next-nav"></div>');
|
||||
var prevLink = links[currentLinkIndex - 1];
|
||||
var nextLink = links[currentLinkIndex + 1];
|
||||
if (prevLink) {
|
||||
var prevLinkNavNode = $('<a class="prev-page" href="' + prevLink.href + '">' + prevLink.innerHTML + '</a>');
|
||||
if (prevLink.className.indexOf('nav-link-disabled') >= 0) {
|
||||
prevLinkNavNode.attr('disabled', true);
|
||||
}
|
||||
prevNextNavNode.append(prevLinkNavNode);
|
||||
} else {
|
||||
prevNextNavNode.append('<span class="prev-page"></span>');
|
||||
}
|
||||
if (nextLink) {
|
||||
var nextLinkNavNode = $('<a class="next-page" href="' + nextLink.href + '">' + nextLink.innerHTML + '</a>');
|
||||
if (nextLink.className.indexOf('nav-link-disabled') >= 0) {
|
||||
nextLinkNavNode.attr('disabled', true);
|
||||
}
|
||||
prevNextNavNode.append(nextLinkNavNode);
|
||||
} else {
|
||||
prevNextNavNode.append('<span class="next-page"></span>');
|
||||
}
|
||||
prevNextNavNode.appendTo('.main-container');
|
||||
}
|
||||
|
||||
$('.nav-phone-icon').click(function() {
|
||||
var navMenu = $(this).prev();
|
||||
navMenu.removeClass('nav-hide').addClass('nav-show').focus();
|
||||
navMenu.one('blur', function() {
|
||||
navMenu.removeClass('nav-show').addClass('nav-hide');
|
||||
});
|
||||
});
|
||||
|
||||
$.easing['jswing'] = $.easing['swing'];
|
||||
$.extend($.easing,{
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
}
|
||||
});
|
||||
|
||||
var navFunc = {
|
||||
navStrArr: [],
|
||||
init: function() {
|
||||
if (this.navBar) {
|
||||
return;
|
||||
}
|
||||
this.navBox = $(".nav");
|
||||
this.navBar = this.navBox.find(".bar");
|
||||
this.navList = this.navBox.find("ul li");
|
||||
this.navNum = $(".current").index();
|
||||
this.navBarAnim();
|
||||
this.highlightCurrentNav();
|
||||
$(window).bind("resize", this.highlightCurrentNav);
|
||||
this.navBar.show();
|
||||
},
|
||||
highlightCurrentNav: function(target) {
|
||||
target = target || this.navList.eq(this.navNum);
|
||||
this.navBar && this.navBar.css({
|
||||
left: target.position().left,
|
||||
width: target.outerWidth()
|
||||
});
|
||||
},
|
||||
navBarAnim: function() {
|
||||
var self = this, delay;
|
||||
self.navList.bind("mouseenter", function(e) {
|
||||
clearTimeout(delay);
|
||||
self.highlightCurrentNav($(e.currentTarget));
|
||||
});
|
||||
self.navList.bind("mouseleave", function(e) {
|
||||
delay = setTimeout(function() {
|
||||
self.highlightCurrentNav();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
};
|
||||
navFunc.init();
|
||||
var listFunc = {
|
||||
num: 0,
|
||||
init: function() {
|
||||
this.listBox = $(".aside-container>ul");
|
||||
if (!this.listBox.length) {
|
||||
return;
|
||||
}
|
||||
this.getUrlNum();
|
||||
this.addTitleEvent();
|
||||
},
|
||||
getUrlNum: function() {
|
||||
var self = this,
|
||||
url = location.href,
|
||||
str = "";
|
||||
for (var i = 0; i < self.listBox.find("a").length; i++) {
|
||||
var m = self.listBox.find("a").eq(i);
|
||||
if (m.attr("href") == "./" || url.indexOf(m.attr("href")) >= 0) {
|
||||
self.num = m.parent().parent().parent().index();
|
||||
}
|
||||
}
|
||||
},
|
||||
addTitleEvent: function() {
|
||||
var self = this;
|
||||
var title = self.listBox.find("h4");
|
||||
title.bind("click", function(e) {
|
||||
var parent = $(this).parent(),
|
||||
list=parent.find("ul");
|
||||
if (parent.attr("open")) {
|
||||
parent.removeAttr("open");
|
||||
if (parent.index() == self.num) {
|
||||
$(this).addClass("current");
|
||||
}
|
||||
list.animate({marginTop:-list.height()},400,"easeInOutCirc",function (){
|
||||
list.css({"display":"none"})
|
||||
})
|
||||
} else {
|
||||
parent.attr("open", true);
|
||||
if (parent.index() == self.num) {
|
||||
$(this).removeClass("current");
|
||||
}
|
||||
list.css({"display":"block","margin-top":-list.height()});
|
||||
list.animate({marginTop:0},400,"easeInOutCirc")
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
listFunc.init();
|
||||
});
|
||||
|
||||
antd.version = require('../package.json').version;
|
||||
module.exports = antd;
|
||||
Loading…
Reference in New Issue
Block a user