Permalink
Browse files

in an attempt to reduce the churn on dev.html let us try this

  • Loading branch information...
1 parent 03a7b3b commit d650ddb3216e2ef09c7245acfac401d759639bf0 swilliams committed Feb 10, 2015
Showing with 77 additions and 306 deletions.
  1. +3 −0 .gitignore
  2. +0 −306 dev/dev.html
  3. +74 −0 dev/dev.html.example
View
@@ -23,3 +23,6 @@ node_modules.tar.gz
# Temp file created in the LESS build
less/fuelux-no-namespace.less
+
+# sandbox
+dev/dev.html
View
@@ -1,306 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="fuelux">
-<head>
- <meta charset="utf-8">
- <title>dev.html</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- <link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
-
- <!--<link href="../dist/css/fuelux.css" rel="stylesheet" type="text/css">-->
-
- <!--CLIENT-SIDE LESS COMPILATION FOR WATCHER-LESS DEV-->
- <link href="../less/fuelux.less" rel="stylesheet/less" type="text/css"/>
- <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
- <script type="text/javascript">if(window.console && window.console.clear){ window.console.clear(); }</script>
-
- <script src="../bower_components/requirejs/require.js" type="text/javascript"></script>
- <script type="text/javascript">
- (function () {
- requirejs.config({
- config: {
- moment: {
- noGlobal: true
- }
- },
- paths: {
- jquery: '../bower_components/jquery/dist/jquery',
- underscore: '../bower_components/underscore/underscore',
- bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
- //moment: '../bower_components/moment/min/moment-with-langs',
- fuelux: '../js'
- },
- shim: {
- 'bootstrap': {
- deps: ['jquery'],
- exports: 'bootstrap'
- }
- }
- });
- })();
- require(['jquery', '../data', 'fuelux/all'], function($, data){
- // simulate network latency
- var loadDelays = ['300', '600', '900', '1200'];
-
- // list view setup
- var list = function(options, callback){
-
- // build dataSource based with options
- var resp = {
- count: data.repeater.listData.length,
- items: [],
- page: options.pageIndex
- };
-
- // get start and end limits for JSON
- var i, l;
- resp.pages = Math.ceil(resp.count/(options.pageSize || 50));
-
- i = options.pageIndex * (options.pageSize || 50);
- l = i + (options.pageSize || 50);
- //l = (l <= resp.count) ? l : resp.count;
- resp.start = i + 1;
- resp.end = l;
-
- // setup columns for list view
- resp.columns = [
- {
- label: 'Common Name',
- property: 'commonName',
- sortable: true
- },
- {
- label: 'Latin Name',
- property: 'latinName',
- sortable: true
- },
- {
- label: 'Appearance',
- property: 'appearance',
- sortable: true
- },
- {
- label: 'Sound',
- property: 'sound',
- sortable: true
- }
- ];
-
- // add sample items to datasource
- var j = 0;
- for(i; i<l; i++){
- // from data.js
- resp.items.push(data.repeater.listData[j]);
- j++;
- if(j >= data.repeater.listData.length){
- j = 0;
- }
- }
-
- //if(options.search){
- //resp.items = [];
- //}
-
- // call and simulate latency
- setTimeout(function(){
- callback(resp);
- }, loadDelays[Math.floor(Math.random() * 4)]);
- };
-
-
- // thumbnail view setup
- var thumbnail = function(options, callback){
- var sampleImageCategories = ['abstract', 'animals', 'business', 'cats', 'city', 'food', 'nature', 'technics', 'transport'];
- var numItems = 200;
-
- // build dataSource based with options
- var resp = {
- count: numItems,
- items: [],
- pages: (Math.ceil(numItems/(options.pageSize || 30))),
- page: options.pageIndex
- };
-
- // get start and end limits for JSON
- var i, l;
- i = options.pageIndex * (options.pageSize || 30);
- l = i + (options.pageSize || 30);
- resp.start = i + 1;
- resp.end = l;
-
- // add sample items to datasource
- for(i; i<l; i++){
- resp.items.push({
- name: ('Thumbnail ' + (i + 1)),
- src: 'http://lorempixel.com/65/65/' + sampleImageCategories[Math.floor(Math.random() * 9)] + '/?_=' + i
- });
- }
-
- //if(options.search){
- //resp.items = [];
- //}
-
- // call and simulate latency
- setTimeout(function(){
- callback(resp);
- }, loadDelays[Math.floor(Math.random() * 4)]);
- };
-
- // initialize repater
- $('#myRepeater').repeater({
- dataSource: function(options, callback){
- //you can check view name here, and call separate functions...
- if(options.view==='list.view1'){
- list(options, callback);
- }
- },
- list_selectable: 'multi',
- list_noItemsHTML: 'no items found',
- thumbnail_noItemsHTML: 'no items found',
- thumbnail_infiniteScroll: { hybrid: true },
- views: {
- //you can go with just the view name
- 'view1': {
- list_selectable: true
- },
- //this syntax is also supported (makes it possible to do 'list' and 'thumbnail' this way)
- 'list.view2': {
- //...or you can do this! :)
- dataSource: function(options, callback){
- list(options, callback);
- },
- list_infiniteScroll: true,
- list_highlightSortedColumn: true
- },
- 'thumbnail.view3': {
- thumbnail_alignment: 'none',
- dataSource: function(options, callback){
- thumbnail(options, callback);
- },
- thumbnail_selectable: 'multi'
- }
- }
- });
-
-// setTimeout(function(){
-// $('#myRepeater').repeater('render', {
-// dataSourceOptions: {
-// pageIndex: 1,
-// pageSize: 20,
-// filter: { text: 'Some', value: 'some' }
-// //sortProperty: 'name',
-// //sortDirection: 'asc',
-// //search: 'term'
-// },
-// preserveDataSourceOptions: true
-// });
-// }, 5000);
- });
- </script>
-</head>
-
-<body style="padding: 20px;">
-<div class="container" style="padding: 20px; margin-top:20px;">
-
- <div class="repeater" data-staticheight="400" id="myRepeater">
- <div class="repeater-header">
- <div class="repeater-header-left">
- <span class="repeater-title">Awesome Repeater</span>
- <div class="repeater-search">
- <div class="search input-group">
- <input type="search" class="form-control" placeholder="Search"/>
- <span class="input-group-btn">
- <button class="btn btn-default" type="button">
- <span class="glyphicon glyphicon-search"></span>
- <span class="sr-only">Search</span>
- </button>
- </span>
- </div>
- </div>
- </div>
- <div class="repeater-header-right">
- <div class="btn-group selectlist repeater-filters" data-resize="auto">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
- <span class="selected-label">&nbsp;</span>
- <span class="caret"></span>
- <span class="sr-only">Toggle Filters</span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li data-value="all" data-selected="true"><a href="#">All</a></li>
- <li data-value="some"><a href="#">Some</a></li>
- <li data-value="others"><a href="#">Others</a></li>
- </ul>
- <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
- </div>
- <div class="btn-group repeater-views" data-toggle="buttons">
- <label class="btn btn-default active">
- <input name="repeaterViews" type="radio" value="list.view1"><span class="glyphicon glyphicon-list"></span>
- </label>
- <label class="btn btn-default">
- <input name="repeaterViews" type="radio" value="list.view2"><span class="glyphicon glyphicon-list"></span>
- </label>
- <label class="btn btn-default">
- <input name="repeaterViews" type="radio" value="thumbnail.view3"><span class="glyphicon glyphicon-th"></span>
- </label>
- </div>
- </div>
- </div>
- <div class="repeater-viewport">
- <div class="repeater-canvas"></div>
- <div class="loader repeater-loader"></div>
- </div>
- <div class="repeater-footer">
- <div class="repeater-footer-left">
- <div class="repeater-itemization">
- <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
- <div class="btn-group selectlist" data-resize="auto">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
- <span class="selected-label">&nbsp;</span>
- <span class="caret"></span>
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <ul class="dropdown-menu" role="menu">
- <li data-value="5"><a href="#">5</a></li>
- <li data-value="10" data-selected="true"><a href="#">10</a></li>
- <li data-value="20"><a href="#">20</a></li>
- <li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
- <li data-value="1000" data-foo="bar" data-fizz="buzz"><a href="#">1000</a></li>
- </ul>
- <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
- </div>
- <span>Per Page</span>
- </div>
- </div>
- <div class="repeater-footer-right">
- <div class="repeater-pagination">
- <button type="button" class="btn btn-default btn-sm repeater-prev">
- <span class="glyphicon glyphicon-chevron-left"></span>
- <span class="sr-only">Previous Page</span>
- </button>
- <label id="myPageLabel" class="page-label">Page</label>
- <div class="repeater-primaryPaging active">
- <div class="input-group input-append dropdown combobox">
- <input type="text" class="form-control" aria-labelledby="MyPageLabel">
- <div class="input-group-btn">
- <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- <span class="sr-only">Toggle Dropdown</span>
- </button>
- <ul class="dropdown-menu dropdown-menu-right"></ul>
- </div>
- </div>
- </div>
- <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="MyPageLabel">
- <span>of <span class="repeater-pages"></span></span>
- <button type="button" class="btn btn-default btn-sm repeater-next">
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="sr-only">Next Page</span>
- </button>
- </div>
- </div>
- </div>
- </div>
-
-</div>
-</body>
-</html>
View
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+<!-- ================================== -->
+<!-- PLEASE KEEP FOR SANDBOXING EXAMPLE -->
+<!-- copy file and remove '.example' -->
+<!-- dev.html is included in .gitignore -->
+<!-- cleanliness is next to godliness -->
+<!-- ================================== -->
+
+<html lang="en" class="fuelux">
+<head>
+ <meta charset="utf-8">
+ <title>dev.html</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
+
+ <!--<link href="../dist/css/fuelux.css" rel="stylesheet" type="text/css">-->
+
+ <!--CLIENT-SIDE LESS COMPILATION FOR WATCHER-LESS DEV-->
+ <link href="../less/fuelux.less" rel="stylesheet/less" type="text/css"/>
+
+ <style>
+ /* ================ */
+ /* your styles here */
+ /* ================ */
+ </style>
+
+</head>
+
+<body>
+ <!-- ================ -->
+ <!-- your markup here -->
+ <!-- ================ -->
+</body>
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
+
+<script src="../bower_components/requirejs/require.js" type="text/javascript"></script>
+<script type="text/javascript">
+ (function () {
+ requirejs.config({
+ config: {
+ moment: {
+ noGlobal: true
+ }
+ },
+ paths: {
+ jquery: '../bower_components/jquery/dist/jquery',
+ underscore: '../bower_components/underscore/underscore',
+ bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
+ moment: '../bower_components/moment/min/moment-with-locales.min',
+ fuelux: '../js'
+ },
+ shim: {
+ 'bootstrap': {
+ deps: ['jquery'],
+ exports: 'bootstrap'
+ }
+ }
+ });
+
+ require(['fuelux/all'], function() {
+ /* fully loaded with fuelux goodness and all it's dependencies */
+
+ /* ================= */
+ /* your scripts here */
+ /* ================= */
+ });
+ })();
+</script>
+
+</html>
+</html>

0 comments on commit d650ddb

Please sign in to comment.