sudoslider
Version:
An extremely versitile content-slider
211 lines (191 loc) • 11.8 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp" ng-controller="BodyController">
<head>
<title>Sudo Slider | Options explorer</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="STYLESHEET" type="text/css" href="css/style.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.js"></script>
<script type="text/javascript" src="js/events.js"></script>
<script type="text/javascript" src="js/sudoSliderAngular.js"></script>
<script type="text/javascript" src="js/exports.js"></script>
<script type="text/javascript" src="js/optionExplorer.js"></script>
<style type="text/css" ng-bind="style" ng-if="showInlineSlider"></style>
</head>
<body>
<div class="container">
<!-- The header -->
<div class="page-header" style="margin-bottom: 0px;margin-top: 10px;">
<h1>SudoSlider options explorer <span style="cursor: pointer;" class="glyphicon glyphicon-question-sign" aria-hidden="true" onclick="window.open('popups/help.html', '_blank', 'width=800, height=600')"></span></h1>
<p class="lead">Change the options and the content, the slider will update immediately.</p>
</div>
<!-- The slider -->
<div class="row" style="border-bottom: 1px solid #eee;" ng-if="showInlineSlider">
<div style="position:relative;min-height: 241px;margin:10px 10px 10px 20px;">
<div sudo-slider id="slider">
<div class="slidesContainer" ng-controller="SudoSliderSlidesController">
<div ng-repeat="slide in slides" ng-bind-html="slide.html"></div>
</div>
</div>
</div>
</div>
<div class="row" style="border-bottom: 1px solid #eee;text-align: center;" ng-if="!showInlineSlider">
<button class="btn btn-primary" ng-click="setShowInlineSlider(true)" style="margin-bottom: 0px;">Show the slider here again</button>
</div>
<div class="row" style="border-bottom: 1px solid #eee;">
<h3 style="text-align: center;">Control the slider.</h3>
<div style="text-align: center;margin-bottom: 10px;">
<button class="btn btn-primary" ng-click="sliderApi.goToSlide('prev')" style="margin-bottom: 0px;">Previous</button>
<button class="btn btn-primary" ng-click="sliderApi.goToSlide('next')" style="margin-bottom: 0px;">Next</button>
<button class="btn btn-primary" ng-click="sliderApi.startAuto()" style="margin-bottom: 0px;">Start auto</button>
<button class="btn btn-primary" ng-click="sliderApi.stopAuto()" style="margin-bottom: 0px;">Stop auto</button>
<!--<button class="btn btn-primary" ng-click="sliderApi.destroy()" style="margin-bottom: 0px;">Destroy</button>
<button class="btn btn-primary" ng-click="sliderApi.init()" style="margin-bottom: 0px;">Init</button>-->
</div>
</div>
<!-- Modifying the slider -->
<div class="row" style="margin-top: 10px;">
<!-- The options -->
<div class="col-md-4 well" style="padding: 0 15px 20px">
<div class="form-group">
<label><h2>The options</h2></label>
<input type="text" class="form-control" placeholder="Filter options by name" ng-model="optionFilter.filter">
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="filterNonDefault">Hide options with default values</label>
</div>
<table class="table table-striped" style="margin-top: 20px;">
<tbody>
<tr ng-repeat="definition in optionDefinitions | filter:optionFilter.filter | nonDefaultValues:filterNonDefault" class="optionDefinition"
ng-controller="OptionController">
<td>
<div ng-if="definition.type == 'boolean'">
<div class="checkbox">
<label>
<input type="checkbox" name="{{definition.name}}" ng-model="definition.value">
{{definition.name}}
</label>
</div>
</div>
<div ng-if="definition.type == 'dropdown'">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
{{definition.name}} : {{definition.value}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="value in definition.choices | filter:dropDownFilter">
<a href="javascript:void(0);" ng-click="definition.value = value">{{value}}</a>
</li>
</ul>
</div>
<div style="margin-top: 7px;">
<label>filter {{definition.name}}s: <input type="text" ng-model="dropDownFilter" class="form-control"> </label>
</div>
</div>
<div ng-if="definition.type == 'number' || definition.type == 'text'">
<div class="form-group {{clazz()}}">
<label>
{{definition.name}}:
<input type="text" name="{{definition.name}}" ng-model="definition.value" class="form-control">
</label>
</div>
<div ng-if="definition.optional">
<label>Enable:
<input type="checkbox" name="{{definition.name}}.enabled" ng-model="definition.enabled" >
</label>
</div>
</div>
<div ng-if="definition.type == 'function'">
<label>
{{definition.name}}:
<textarea type="text" name="{{definition.name}}" ng-model="definition.stringValue"
ng-change="setOptionFunction(definition.stringValue)" class="form-control" rows="2"></textarea>
</label>
</div>
<div ng-if="definition.type == 'array'">
<div class="form-group {{clazz()}}">
<label>
{{definition.name}}:
<input type="text" name="{{definition.name}}" ng-model="definition.stringValue"
ng-change="setstringValue(definition.stringValue)" class="form-control">
</label>
</div>
<div ng-if="definition.optional">
<label>Enable:
<input type="checkbox" name="{{definition.name}}.enabled" ng-model="definition.enabled">
</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modifying the content of the slider -->
<div class="col-md-4" style="padding: 0 15px 20px">
<h2>The content</h2>
<div id="slides" style="margin-top: 10px;margin-bottom: 10px;">
<div ng-repeat="slide in slides" style="margin-bottom: 20px;">
<!--<label style="position: relative;">-->
<h4 style="margin-bottom: 4px;">Slide {{$index + 1}} <button class="btn btn-danger" ng-click="removeSlide($index)">Delete slide</button></h4>
<textarea class="form-control" rows="3" ng-model="slide.html" ng-change="sliderApi.adjust()" style="font-weight: bold;"></textarea>
<!--</label>-->
</div>
<button class="btn btn-primary" ng-click="addSlide()">Add slide</button>
</div>
</div>
<!-- Demo selection, style, import and export -->
<div class="col-md-4 well" style="padding: 0 15px 20px">
<h2>The rest</h2>
<div ng-controller="PopupController" style="margin-bottom: 20px;">
<button class="btn btn-success" ng-click="openExportPopup()" style="margin-bottom: 20px;">Get the result</button> <br />
<button class="btn btn-primary" ng-click="openSliderPopup()">Open slider in popup</button>
</div>
<!--TODO: Do something with this.-->
<div ng-controller="DemoLoaderController">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
<span ng-if="currentDemo == null">
No demo selected
</span>
<span ng-if="currentDemo != null">
Demo: {{curentDemo.name}}
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="demo in demoDefiniftions">
<a href="javascript:void(0);" ng-click="selectDemo(demo)">{{demo.name}}</a>
</li>
</ul>
</div>
</div>
<label>
<h2>The style</h2>
<textarea class="form-control" rows="4" ng-model="style" ng-change="sliderApi.adjust()"></textarea>
</label>
<br />
</div>
</div>
</div>
<script type="text/javascript">
/* Google Analytics, please remove
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20484420-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* */
</script>
</body>
</html>