winlin

remove the wizard control, too complex

.wizard {
display:none;
}
.wizard-modal form {
margin:0;
padding:0;
}
.wizard-modal.modal {
width:750px;
margin-left:-375px;
top:50%;
}
.wizard-modal-footer {
padding:0;
}
.wizard-modal-header.modal-header h3 {
line-height:35px;
display:inline
}
.wizard-modal-header.modal-header {
border-bottom:0;
}
.wizard-subtitle {
font-weight:bold;
color:#AFAFAF;
padding-left:20px;
}
.wizard-error,
.wizard-failure,
.wizard-success,
.wizard-loading,
.wizard-card {
position:relative;
padding:35px;
padding-top:20px;
overflow-y:auto;
height:300px;
display:none;
border-top: 1px solid #EEE;
margin-right: 5px;
}
.wizard-nav-link .icon-chevron-right {
float:right;
margin-top:12px;
margin-right:-6px;
opacity:.25;
}
li.wizard-nav-item.active .icon-chevron-right {
opacity:1;
}
li.wizard-nav-item {
line-height:40px;
}
.wizard-no-modal .nav-list > li > a,
.wizard-modal.modal .nav-list > li > a {
background-color:#f5f5f5;
padding:3px 15px 3px 20px;
cursor:default;
color:#B4B4B4;
}
.wizard-no-modal .nav-list li.active > a,
.wizard-modal.modal .nav-list li.active > a {
background-color:#08C;
}
.wizard-no-modal .nav-list > li.already-visited > a.wizard-nav-link,
.wizard-modal.modal .nav-list > li.already-visited > a.wizard-nav-link {
color:#08C;
cursor:pointer;
}
.wizard-no-modal .nav-list > li.active > a.wizard-nav-link,
.wizard-modal.modal .nav-list > li.active > a.wizard-nav-link {
color:white;
}
.already-visited > a.wizard-nav-link:hover {
background-color:#E4E4E4;
}
.wizard-card > h3 {
margin-top:0;
margin-bottom:20px;
font-size:21px;
line-height:40px;
font-weight:normal;
}
.wizard-progress {
padding:15px;
bottom:0;
}
.wizard-progress-container {
padding:20px;
}
.wizard-steps {
width:28%;
height:425px;
background-color:#f5f5f5;
}
.wizard-nav-container {
height:360px;
}
.nav > li > a.wizard-step-error {
background-color:#F2DEDE;
color:#B94A48;
font-weight:bold;
}
.wizard-step-error .icon-chevron-right {
opacity:0;
}
.wizard-input-section {
margin-bottom:20px;
}
.wizard-buttons-container {
padding:20px;
}
.wizard-cancel {
display:none;
margin-left:20px;
}
.wizard-close {
display: none;
}
.wizard-no-modal .popover.error-popover,
.wizard-modal .popover.error-popover {
background-color:#F2DEDE;
color:#B94A48;
border-color:#953B39;
}
.wizard-no-modal .popover.error-popover .arrow::after,
.wizard-modal .popover.error-popover .arrow::after {
border-right-color:#F2DEDE;
}
.wizard-no-modal .popover.error-popover .popover-title,
.wizard-modal .popover.error-popover .popover-title {
display:none;
}
.wizard-no-modal .popover.error-popover .arrow,
.wizard-modal .popover.error-popover .arrow {
border-right-color:#953B39;
}
!function(a){a.fn.wizard=function(a){return new Wizard(this,a)},a.fn.wizard.logging=!1;var b=function(a,b,c,d,e){this.wizard=a,this.index=c,this.prev=d,this.next=e,this.el=b,this.title=b.find("h3").first().text(),this.name=b.data("cardname")||this.title,this.nav=this._createNavElement(this.title,c),this._disabled=!1,this._loaded=!1,this._events={}};b.prototype={select:function(){this.log("selecting"),this.isSelected()||(this.nav.addClass("active"),this.el.show(),this._loaded||(this.trigger("loaded"),this.reload()),this.trigger("selected"));var a=this.wizard;return a.backButton.toggleClass("disabled",0==this.index),this.index>=a._cards.length-1?(this.log("on last card, changing next button to submit"),a.changeNextButton(a.args.buttons.submitText,"btn-success"),a._readyToSubmit=!0,a.trigger("readySubmit")):(a._readyToSubmit=!1,a.changeNextButton(a.args.buttons.nextText,"btn-primary")),this},_createNavElement:function(b,c){var d=a('<li class="wizard-nav-item"></li>'),e=a('<a class="wizard-nav-link"></a>');return e.data("navindex",c),d.append(e),e.append('<i class="icon-chevron-right"></i>'),e.append(b),d},markVisited:function(){return this.log("marking as visited"),this.nav.addClass("already-visited"),this.trigger("markVisited"),this},unmarkVisited:function(){return this.log("unmarking as visited"),this.nav.removeClass("already-visited"),this.trigger("unmarkVisited"),this},deselect:function(){return this.nav.removeClass("active"),this.el.hide(),this.trigger("deselect"),this},enable:function(){return this.log("enabling"),this.nav.addClass("active"),this._disabled=!1,this.trigger("enabled"),this},disable:function(a){return this.log("disabling"),this._disabled=!0,this.nav.removeClass("active already-visited"),a&&this.el.hide(),this.trigger("disabled"),this},isDisabled:function(){return this._disabled},alreadyVisited:function(){return this.nav.hasClass("already-visited")},isSelected:function(){return this.nav.hasClass("active")},reload:function(){return this._loaded=!0,this.trigger("reload"),this},on:function(){return this.wizard.on.apply(this,arguments)},trigger:function(){return this.callListener("on"+arguments[0]),this.wizard.trigger.apply(this,arguments)},toggleAlert:function(b,c){this.log("toggling alert to: "+c),c="undefined"==typeof c?!0:c,c?this.trigger("showAlert"):this.trigger("hideAlert");var d,e=this.el.children("h3").first().next("div.alert");if(0==e.length){if(!c)return this;this.log("couldn't find existing alert div, creating one"),d=a("<div />"),d.addClass("alert"),d.addClass("hide"),d.insertAfter(this.el.find("h3").first())}else this.log("found existing alert div"),d=e.first();return c?(null!=b&&(this.log("setting alert msg to",b),d.html(b)),d.show()):d.hide(),this},callListener:function(a){a=a.toLowerCase(),this.log("looking for listener "+a);var b=window[this.el.data(a)];if(b){this.log("calling listener "+a),this.wizard;try{b(this)}catch(e){this.log("exception calling listener "+a+": ",e)}}else this.log("didn't find listener "+a)},problem:function(a){this.nav.find("a").toggleClass("wizard-step-error",a)},validate:function(){var b=!1,c=this;this.el.find("[data-validate]").each(function(d,e){c.log("validating individiual inputs"),e=a(e);var f=e.data("validate");if(f){var g={status:!0,title:"Error",msg:""},h=window[f](e);if(a.extend(g,h),g.status){e.parent(".control-group").toggleClass("error",!1);try{e.popover("destroy")}catch(i){e.popover("hide")}}else b=!0,e.parent(".control-group").toggleClass("error",!0),c.wizard.errorPopover(e,g.msg)}}),this.log("after validating inputs, failures is",b);var d=window[this.el.data("validate")];if(d){this.log("running html-embedded card validator");var e=d(this);("undefined"==typeof e||null==e)&&(e=!0),e||(b=!0),this.log("after running html-embedded card validator, failures is",b)}this.log("running listener validator");var f=this.trigger("validate");("undefined"==typeof f||null==f)&&(f=!0),f||(b=!0),this.log("after running listener validator, failures is",b);var g=!b;return g?(this.log("validated, calling listeners"),this.trigger("validated")):(this.log("invalid"),this.trigger("invalid")),g},log:function(){if(window.console&&a.fn.wizard.logging){var b="card '"+this.name+"': ",c=[b];c.push.apply(c,arguments),console.log.apply(console,c)}},isActive:function(){return this.nav.hasClass("active")}},Wizard=function(b,c){var d=['<div class="modal hide wizard-modal" role="dialog">','<div class="wizard-modal-header modal-header">','<button class="wizard-close close" type="button">x</button>','<h3 class="wizard-title"></h3>','<span class="wizard-subtitle"></span>',"</div>",'<div class="pull-left wizard-steps">','<div class="wizard-nav-container">','<ul class="nav nav-list" style="padding-bottom:30px;">',"</ul>","</div>",'<div class="wizard-progress-container">',,'<div class="progress progress-striped">','<div class="bar"></div>',"</div>","</div>","</div>","<form>",'<div class="wizard-cards">','<div class="wizard-card-container">',"</div>",'<div class="wizard-modal-footer">','<div class="wizard-buttons-container">','<button class="btn wizard-cancel wizard-close" type="button">Cancel</button>','<div class="btn-group-single pull-right">','<button class="btn wizard-back" type="button">Back</button>','<button class="btn btn-primary wizard-next" type="button">Next</button>',"</div>","</div>","</div>","</div>","</form>","</div>"],e=['<div class="wizard-no-modal" role="dialog">','<div class="wizard-modal-header modal-header">','<button class="wizard-close close" type="button">x</button>','<h3 class="wizard-title"></h3>','<span class="wizard-subtitle"></span>',"</div>",'<div class="pull-left wizard-steps">','<div class="wizard-nav-container">','<ul class="nav nav-list" style="padding-bottom:30px;">',"</ul>","</div>",'<div class="wizard-progress-container">',,'<div class="progress progress-striped">','<div class="bar"></div>',"</div>","</div>","</div>","<form>",'<div class="wizard-cards">','<div class="wizard-card-container">',"</div>",'<div class="wizard-modal-footer">','<div class="wizard-buttons-container">','<button class="btn wizard-cancel wizard-close" type="button">Cancel</button>','<div class="btn-group-single pull-right">','<button class="btn wizard-back" type="button">Back</button>','<button class="btn btn-primary wizard-next" type="button">Next</button>',"</div>","</div>","</div>","</div>","</form>","</div>"];this.args={submitUrl:"",width:750,showCancel:!1,showClose:!0,progressBarCurrent:!1,increaseHeight:0,buttons:{cancelText:"Cancel",nextText:"Next",backText:"Back",submitText:"Submit",submittingText:"Submitting..."},isModal:!0},a.extend(this.args,c||{});var f=this.args.isModal?d:e;this.args.isModal||(this.args.showCancel=!1,this.args.showClose=!1),this.markup=a(b),this.submitCards=this.markup.find(".wizard-error,.wizard-failure,.wizard-success,.wizard-loading"),this.el=a(f.join("\n")),this.el.find(".wizard-card-container").append(this.markup.find(".wizard-card")).append(this.submitCards),a("body").append(this.el),this.closeButton=this.el.find("button.wizard-close"),this.footer=this.el.find(".wizard-modal-footer"),this.cancelButton=this.footer.find(".wizard-cancel"),this.backButton=this.footer.find(".wizard-back"),this.nextButton=this.footer.find(".wizard-next"),this.progress=this.el.find(".progress"),this._cards=[],this.cards={},this._readyToSubmit=!1,this.percentComplete=0,this._submitting=!1,this._events={},this._firstShow=!0,this._createCards(),this.nextButton.click(this,this._handleNextClick),this.backButton.click(this,this._handleBackClick),this.cancelButton.text(this.args.buttons.cancelText),this.backButton.text(this.args.buttons.backText),this.nextButton.text(this.args.buttons.nextText);var g=360,h=g+this.args.increaseHeight;this.el.find(".wizard-nav-container").css("height",h),this.el.find(".wizard-steps").css("height",h+65+"px"),this.el.find(".wizard-card").css("height",h-60+"px"),this.submitCards.css("height",h-60+"px"),this.args.isModal&&this.el.css("margin-top",-(this.el.height()/2)),this.el.css("width",this.args.width),this.args.isModal&&this.el.css("margin-left",-(this.args.width/2));var j=this;this.closeButton.click(function(){j.reset(),j.close(),j.trigger("closed")}),this.el.find(".wizard-steps").on("click","li.already-visited a.wizard-nav-link",this,function(b){var c=parseInt(a(b.target).data("navindex"));b.data.setCard(c)});var k=this.markup.children("h1").first();k.length&&this.setTitle(k.text()),this.on("submit",this._defaultSubmit)},Wizard.prototype={errorPopover:function(a,b){this.log("launching popover on",a);var c=a.popover({content:b,trigger:"manual"}).popover("show").next(".popover");return c.addClass("error-popover"),c},destroyPopover:function(b){b=a(b),b.parent(".control-group").toggleClass("error",!1);var c=b.prev();try{c.popover("destroy")}catch(d){c.popover("hide")}},hidePopovers:function(){this.log("hiding all popovers");var b=this;this.el.find(".error-popover").each(function(a,c){b.destroyPopover(c)})},eachCard:function(b){return a.each(this._cards,b),this},getActiveCard:function(){this.log("getting active card");var b=null;return a.each(this._cards,function(a,c){return c.isActive()?(b=c,!1):void 0}),b?this.log("found active card",b):this.log("couldn't find an active card"),b},setTitle:function(a){return this.log("setting title to",a),this.el.find(".wizard-title").first().text(a),this},setSubtitle:function(a){return this.log("setting subtitle to",a),this.el.find(".wizard-subtitle").first().text(a),this},changeNextButton:function(a,b){return this.log("changing next button, text: "+a,"class: "+b),"undefined"!=typeof b&&this.nextButton.removeClass("btn-success btn-primary"),b&&this.nextButton.addClass(b),this.nextButton.text(a),this},hide:function(){return this.log("hiding"),this.args.isModal?this.el.modal("hide"):this.el.css("display","none"),this},close:function(){return this.log("closing"),this.args.isModal?this.el.modal("hide"):this.el.css("display","none"),this},show:function(a){return this.log("showing"),this._firstShow&&(this.setCard(0),this._firstShow=!1),this.args.showCancel&&this.cancelButton.show(),this.args.showClose&&this.closeButton.show(),this.args.isModal?this.el.modal(a):this.el.css("display","block"),this},on:function(a,b){return this.log("adding listener to event "+a),this._events[a]=b,this},trigger:function(){var a=arguments[0],b=Array.prototype.slice.call(arguments);b.shift(),b.unshift(this),this.log("firing event "+a);var c=this._events[a],d=null;if("function"==typeof c){this.log("found event handler, calling "+a);try{d=c.apply(this,b)}catch(e){this.log("event handler "+a+" had an exception")}}else this.log("couldn't find an event handler for "+a);return d},reset:function(){return this.log("resetting"),this.updateProgressBar(0),this.hideSubmitCards(),this.setCard(0),this.lockCards(),this.enableNextButton(),this.showButtons(),this.hidePopovers(),this.trigger("reset"),this},log:function(){if(window.console&&a.fn.wizard.logging){var b="wizard "+this.el.id+": ",c=[b];c.push.apply(c,arguments),console.log.apply(console,c)}},_abstractIncrementStep:function(a,b){var d,c=this.getActiveCard();if(c)for(this.log("searching for valid next card");;){if(d=b(c)){if(this.log("looking at card",d.index),d.isDisabled()){this.log("card "+d.index+" is disabled/locked, continuing"),c=d;continue}return this.setCard(c.index+a)}this.log("next card is not defined, breaking");break}else this.log("current card is undefined")},incrementCard:function(){this.log("incrementing card");var a=this._abstractIncrementStep(1,function(a){return a.next});return this.trigger("incrementCard"),a},decrementCard:function(){this.log("decrementing card");var a=this._abstractIncrementStep(-1,function(a){return a.prev});return this.trigger("decrementCard"),a},setCard:function(a){this.log("setting card to "+a),this.hideSubmitCards();var b=this.getActiveCard();if(this._submitting)return this.log("we're submitting the wizard already, can't change cards"),b;var c=this._cards[a];if(c){if(c.isDisabled())return this.log("new card is currently disabled, returning"),b;if(b){if(a>b.index){for(var d=b,e=!1;d.index!=c.index;){if(d.index!=b.index&&(d.prev.deselect(),d.prev.markVisited(),d.select()),e=d.validate(),!e)return d;d=d.next}d.prev.deselect(),d.prev.markVisited()}b.deselect(),b.markVisited()}if(c.select(),this.args.progressBarCurrent)this.percentComplete=100*a/this._cards.length,this.updateProgressBar(this.percentComplete);else{var f=this.percentComplete;this.percentComplete=100*a/this._cards.length,this.percentComplete=Math.max(f,this.percentComplete),this.updateProgressBar(this.percentComplete)}return c}this.log("couldn't find card "+a)},updateProgressBar:function(a){this.log("updating progress to "+a+"%"),this.progress.find(".bar").css({width:a+"%"}),this.percentComplete=a,this.trigger("progressBar",a),100==a?(this.log("progress is 100, animating progress bar"),this.progress.addClass("active")):0==a&&(this.log("progress is 0, disabling animation"),this.progress.removeClass("active"))},getNextCard:function(){var a=this.getActiveCard();return a?a.next:void 0},lockCards:function(){return this.log("locking nav cards"),this.eachCard(function(a,b){b.unmarkVisited()}),this},disableCards:function(){return this.log("disabling all nav cards"),this.eachCard(function(a,b){b.disable()}),this},enableCards:function(){return this.log("enabling all nav cards"),this.eachCard(function(a,b){b.enable()}),this},hideCards:function(){return this.log("hiding cards"),this.eachCard(function(a,b){b.deselect()}),this.hideSubmitCards(),this},hideButtons:function(){return this.log("hiding buttons"),this.cancelButton.hide(),this.closeButton.hide(),this.nextButton.hide(),this.backButton.hide(),this},showButtons:function(){return this.log("showing buttons"),this.args.showCancel&&this.cancelButton.show(),this.args.showClose&&this.closeButton.show(),this.nextButton.show(),this.backButton.show(),this},getCard:function(b){var c=a(b).parents(".wizard-card").first()[0];if(c){var d=null;return this.eachCard(function(a,b){return c==b.el[0]?(d=b,!1):!0}),d}return null},_createCards:function(){var c=null,d=null,e=null,f=this,g=this,h=this.el.find(".wizard-cards .wizard-card");a.each(h,function(h,i){i=a(i),c=e,e=new b(f,i,h,c,d),g._cards.push(e),e.name&&(g.cards[e.name]=e),c&&(c.next=e),g.el.find(".wizard-steps .nav-list").append(e.nav)})},showSubmitCard:function(a){this.log("showing "+a+" submit card");var b=this.el.find(".wizard-"+a);b.length?(this.hideCards(),this.el.find(".wizard-"+a).show()):this.log("couldn't find submit card "+a)},hideSubmitCard:function(a){this.log("hiding "+a+" submit card"),this.el.find(".wizard-"+a).hide()},hideSubmitCards:function(){var b=this;a.each(["success","error","failure","loading"],function(a,c){b.hideSubmitCard(c)})},enableNextButton:function(){return this.log("enabling next button"),this.nextButton.removeAttr("disabled"),this},disableNextButton:function(){return this.log("disabling next button"),this.nextButton.attr("disabled","disabled"),this},serializeArray:function(){var a=this.el.children("form").first();return a.serializeArray()},serialize:function(){var a=this.el.children("form").first();return a.serialize()},submitSuccess:function(){this.log("submit success"),this._submitting=!1,this.showSubmitCard("success"),this.trigger("submitSuccess")},submitFailure:function(){this.log("submit failure"),this._submitting=!1,this.showSubmitCard("failure"),this.trigger("submitFailure")},submitError:function(){this.log("submit error"),this._submitting=!1,this.showSubmitCard("error"),this.trigger("submitError")},_submit:function(){this.log("submitting wizard"),this._submitting=!0,this.lockCards(),this.cancelButton.hide(),this.closeButton.hide(),this.backButton.hide(),this.showSubmitCard("loading"),this.updateProgressBar(100),this.changeNextButton(this.args.buttons.submittingText,!1),this.disableNextButton(),this.trigger("submit"),this.trigger("loading")},_onNextClick:function(){this.log("handling 'next' button click");var a=this.getActiveCard();this._readyToSubmit&&a.validate()?this._submit():a=this.incrementCard()},_onBackClick:function(){this.log("handling 'back' button click"),this.decrementCard()},_handleNextClick:function(a){var b=a.data;b._onNextClick.call(b)},_handleBackClick:function(a){var b=a.data;b._onBackClick.call(b)},_defaultSubmit:function(b){a.ajax({type:"POST",url:b.args.submitUrl,data:b.serialize(),dataType:"json",success:function(){b.submitSuccess(),b.hideButtons(),b.updateProgressBar(0)},error:function(){b.submitFailure(),b.hideButtons()}})}}}(window.jQuery);
\ No newline at end of file
... ... @@ -4,10 +4,8 @@
<title>SRS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-wizard.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-wizard.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/srs.js"></script>
<style>
... ... @@ -27,20 +25,13 @@
// url set to: rtmp://demo:1935/live/livestream
srs_init("#txt_url", null, null);
$("#btn_video_settings").click(function(){
$("#btn_create_chat").click(function(){
$("#video_modal").modal({show:true});
});
$("#btn_audio_settings").click(function(){
$("#btn_join_chat").click(function(){
$("#audio_modal").modal({show:true});
});
$("#remote_tips").tooltip({
title: "为了支持HLS输出,FLASH编码器输出的流需要经过转码(VP6=>H264,MP3=>aac),所以会黑屏较长时间,请耐心等待"
});
$("#low_latecy_tips").tooltip({
title: "服务器不转码直接转发FLASH编码器的流,所以延迟比支持HLS的流要低很多"
});
$("#btn_publish").click(on_user_publish);
// for publish, we use randome stream name.
... ... @@ -126,7 +117,7 @@
};
srs_publisher.start();
//wizard = $("#main_wizard").wizard({});
//wizard = $("#some-wizard").wizard({});
//wizard.show();
// if no play specified, donot show the player, for debug the publisher.
... ... @@ -150,14 +141,6 @@
}
});
/**
* we generate the transcoded stream url for flash publish donot support HLS
* which requires aac, so the publish vhost maybe players for example, we
* use players_pub vhost(transcoded stream to which) for all clients,
* both players and players_pub are write HLS to the sample dir,
* it's ok for the players vhost disabled the HLS, only the
* players_pub enalbed HLS.
*/
function update_play_url() {
var url = $("#txt_url").val();
var ret = srs_parse_rtmp_url(url);
... ... @@ -277,25 +260,12 @@
<div class="alert alert-info fade in" id="txt_log">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><span id="txt_log_title">Usage:</span></strong>
<span id="txt_log_msg">设置编码参数,点“发布视频”,允许Flash访问摄像头即可推流</span>
</div>
<!-- http://www.panopta.com/2013/02/06/bootstrap-application-wizard/ -->
<!-- https://github.com/amoffat/bootstrap-application-wizard -->
<div class="wizard" id="main_wizard" data-title="Wizard Title">
<div class="wizard-card" data-cardname="card1">
<h3>Card 1</h3>
Some content
<span id="txt_log_msg">创建会议室,或者加入会议室</span>
</div>
<div class="wizard-card" data-cardname="card2">
<h3>Card 2</h3>
Some content
</div>
</div>
<div class="control-group">
<div class="form-inline">
<button class="btn" id="btn_video_settings">视频编码配置</button>
<button class="btn" id="btn_audio_settings">音频编码配置</button>
<button class="btn" id="btn_create_chat">创建会议室</button>
<button class="btn" id="btn_join_chat">加入会议室</button>
</div>
</div>
<div class="control-group">
... ...