apollo-nico/theme/static/js/site.js

对 nico 及 apollo-theme 的封装，方便跨平台使用

seajs.use(['jquery', 'js/6v/lib/gallery/zeroclipboard/zeroclipboard'], function ($, ZeroClipboard) {
    $(function () {
        $('h4 em, h3 em, h3 code, h4 code').parent().addClass('doc-api')
        // 给 iframe 加链接
        $('.nico-iframe').each(function (i, item) {
            var src = $(item).find('iframe').attr('src')
            var html = '<a class="new-window" target="_blank" href="' + src + '?io">新窗口打开</a>'
            $(item).append(html)
        });
        // 给 code 加收起和展开
        $('.highlight').each(function (i, item) {
            var $item = $(item)
            if ($item.height() > 400) {
                $item.append('<a class="code-toggle" href="#">展开</a>')
                $item.addClass('collapse')
            }
        });
    });

    $('.highlight').on('click', '.code-toggle', function () {
        var pre = $(this).parents('.highlight')
        if (pre.hasClass('collapse')) {
            pre.removeClass('collapse')
            $(this).text('收起')
        } else {
            pre.addClass('collapse')
            $(this).text('展开')
        }
        return false
    });

//    var clip = new ZeroClipboard.Client();
//    clip.setHandCursor(true);
//    clip.glue('J_copy_clipboard_data');
//    clip.addEventListener('mouseDown',function() {
//        clip.setText(ZeroClipboard.$('#J_share_text').val());
//    });

    /* 查看代码、复制代码 */
    //复制、查看代码template
    var demoOptionEl = $('<div id="demo-option" class="demo-option"><a href="javascript:;" id="demo-show-code" class="demo-show-code">查看代码</a><a href="javascript:;" id="demo-copy-code" class="demo-copy-code">复制代码</a></div>');
    $(document.body).append(demoOptionEl);
    demoOptionEl.hide();


    //clipBoard实例
    var clipBoard = new ZeroClipboard($('#demo-copy-code'), {
//        trustedDomains: ['localhost','127.0.0.1'], //不靠谱
//        allowScriptAccess:'always', // 不靠谱
        trustedOrigins: [window.location.protocol + "//" + window.location.host] //靠谱，给力，高大上！
    });
    clipBoard.setHandCursor(true);

    clipBoard.on("load", function (client) {
        client.on("complete", function (client, args) {
            alert("代码已复制: " + args.text);
        });
    });

    clipBoard.on("mousedown", function (client, args) {
        clipBoard.setText(operatingEls.demoShow.html());
//        $('#demo-show-code').attr('data-clipboard-text',operatingEls.demoShow.html());
    });
    clipBoard.on("mouseover", function (client, args) {
        demoOptionEl
            .stop(true)
            .show();
    });

	
    //复制、查看代码的显示隐藏
    demoOptionEl.on('mouseenter',function (){
        $(this).stop(true).show();
    }).on('mouseleave',function(){
        //hide(1):jquery的stop不将hide()放入动画队列，所以无法stop。
        $(this).delay(3000).hide(1);
    });

    $('#demo-show-code').live('click', function (){
	console.log(operatingEls.demoCode[0])
        operatingEls.demoCode.toggle();
    });

    var operatingEls = {
        demoShow: '',
        demoCode: ''
    };

	$('.apollo-demo').each(function (index, element) {
			var $this =  $(this)
			var code = $this.nextAll('.highlight').eq(0);
			//var h = code.next('.highlight');
			code.appendTo($this.find('.demo-code'))
		});
	
    $('.demo-show').on('mouseenter',function () {
        var demoShow = operatingEls.demoShow,
            demoCode = operatingEls.demoCode;
        demoShow = operatingEls.demoShow = $(this);

        operatingEls.demoCode = $(this).next('.demo-code');
        var demoShowOffset = demoShow.offset();
        demoOptionEl
            .stop(true)
            .show()
            .offset({left: demoShowOffset.left, top: demoShowOffset.top - 30});
    }).delegate('.demo-show','mouseleave',function(){
        demoOptionEl.delay(3000).hide(1);
    });


    //若组件高度大于组件容器高度，则将组件的容器demo-show高度设置为组件高度
    $('.demo-show').each(function(){
        var thisHeight = $(this).height(),
            childHeight = $(this).find(':first-child').outerHeight();

        thisHeight < childHeight ? $(this).height(childHeight) : 0 ;
    });

    //鼠标页面单击时，隐藏已展开的代码和操作tip
    $(document).live('click',function(e){
        if($(e.target).parents("#content").length ==0 && $(e.target).parents("#demo-option").length ==0 ){
            demoOptionEl.stop().hide();
            operatingEls.demoCode.stop().hide();
        }
    });

    //grids选择栅格筛选功能
    var $rows = $('[class^="row"]'),
        filters = [],
        showingDemos;
    $('#grids-builder').live('click',function(e){
        var $target = $(e.target).prop('tagName').toLowerCase() === "label" ? $(e.target).find('input') :$(e.target);

        if($(e.target).attr('id') == 'rows-reset'){
            filters = [];
        }
        switch($target.attr('id')){
            case 'rows-1':
                $target.prop("checked") == true
                    ? filters.push('.row-c1')
                    : filters = $.grep(filters,function(n){return n != '.row-c1'}) ;break;

            case 'rows-2-s-m':
                $target.prop("checked") == true
                    ? filters.push(function(){return /row-c2-s\d/.test($(this).attr('class'))})
                    : filters = $.grep(filters,function(n){return n != (function(){return /row-c2-s\d/.test($(this).attr('class'))}).toString()}) ;break;

            case 'rows-2-m-e':
                $target.prop("checked") == true
                    ? filters.push(function(){return /row-c2-2\d/.test($(this).attr('class'))})
                    : filters = $.grep(filters,function(n){return n != (function(){return /row-c2-2\d/.test($(this).attr('class'))}).toString()}) ;break;

            case 'rows-3':
                $target.prop("checked") == true
                    ? filters.push(function(){return /row-c3-/.test($(this).attr('class'))})
                    : filters = $.grep(filters,function(n){return n != (function(){return /row-c3-/.test($(this).attr('class'))}).toString()}) ;break;

            case 'rows-width-990':
                $target.prop("checked") == true
                    ? filters.push('.row-990')
                    : filters = $.grep(filters,function(n){return n != '.row-990'}) ;break;

            case 'rows-width-1200':
                $target.prop("checked") == true
                    ? filters.push('.row-1200')
                    : filters = $.grep(filters,function(n){return n != '.row-1200'}) ;break;

            case 'rows-fluid':
                $target.prop("checked") == true
                    ? filters.push('.row-1200')
                    : filters = $.grep(filters,function(n){return n != '.row-fluid'}) ;break;
        }

        $rows.parents('.apollo-demo').hide();

        $showingDemos = $rows;
        $.each(filters,function(i,n){
            $showingDemos = $showingDemos.filter(n);
        });
        $showingDemos.parents('.apollo-demo').show();
    });



//    d.delegate('#rows-1','click',function(){
//        var selector = '.row-c1';
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//    }).delegate('#rows-2-s-m','click',function(){
//        var selector = function(){return /row-c2-s\d/.test($(this).attr('class'))};
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//
//    }).delegate('#rows-2-m-e','click',function(){
//        var selector = function(){return /row-c2-2\d/.test($(this).attr('class'))};
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//
//    }).delegate('#rows-3','click',function(){
//        var selector = function(){return /row-c3-/.test($(this).attr('class'))};
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//
//    }).delegate('#rows-width-990','click',function(){
//        var selector = '.row-990';
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//
//    }).delegate('#rows-width-1200','click',function(){
//        var selector = '.row-1200';
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//
//    }).delegate('#row-fluid','click',function(){
//        var selector = '.row-fluid';
//        $(this).prop("checked") == true ? filterGrids('show',selector) : filterGrids('hide',selector);
//
//    });

//    function filterGrids(type,showSelector){
//        console.log($rows.filter(showSelector).parents('.apollo-demo'));
//        $rows.filter(showSelector).parents('.apollo-demo')[type]();
//    }

});

(function () {
    var temp = document.domain.split('.');
    if (!isNaN(temp[temp.length - 1])) {
        return;
    }
    seajs.use(['$', 'http://static.alipayobjects.com/arale/popup/0.9.11/popup'], function ($, Popup) {
        // spm install message
        var root = $('#sidebar-wrapper h1 sup a').html();
        if (root && Popup) {
            var name = $('#sidebar-wrapper h1 > a').html().toLowerCase();
            var version = $('#sidebar-wrapper .version a').html();
            new Popup({
                trigger: '#sidebar-wrapper h1 > a',
                template: '<div class="popup-install">spm install '
                    + root + '.' + name + '@' + version + '</div>',
                align: {
                    baseXY: [0, '100%+5']
                }
            });
        }

        // output card
        if ($('#module-output')[0] && Popup) {
            new Popup({
                trigger: '#module-output li a',
                element: '#output-card',
                effect: 'fade',
                beforeShow: function () {
                    var file = this.activeTrigger.data('file');
                    file = file.replace('./', '').replace('.js', '');
                    this.element.find('#output-file').html(file)
                        .attr('href', this.activeTrigger.attr('href'));
                }
            });
        }
    });
})();