* help page added

c0untd0wn · May 31, 2012 · fe333b3 · fe333b3
1 parent 1874c76
commit fe333b3
Show file tree

Hide file tree

Showing 17 changed files with 334 additions and 2 deletions.
diff --git a/help.html b/help.html
@@ -0,0 +1,91 @@
+<!doctype html>
+
+<html>
+	<head>
+		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+
+		<title>Graphify</title>
+
+		<script type="text/javascript" src="js/jquery.js"></script>
+		<script type="text/javascript" src="js/bootstrap.min.js"></script>
+		<script type="text/javascript" src="js/bootstrap-transition.js"></script>
+		<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
+		<script type="text/javascript" src="js/help.js"></script>
+
+		<link rel="stylesheet" type="text/css" href="css/main.css">
+		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+		<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
+	</head>
+	<body>
+		<div class="container">
+			<header>
+				<h1>Graphify</h1>
+				<p class="lead">The easiest way to make graphs!</p>
+				<ul class="nav nav-tabs">
+					<li>
+						<a href="index.html">Home</a>
+					</li>
+					<li class="active">
+						<a href="#">Help</a>
+					</li>
+				</ul>
+			</header>
+			<section id="help_carousel">
+				<div class="row">
+					<div class="span8 offset2">
+						<div id="myCarousel" class="carousel slide">
+						  <!-- Carousel items -->
+						  <div class="carousel-inner">
+							<div class="active item">
+								<img src="images/1.png" alt="" />
+								<div class="carousel-caption">
+									<h4>First Page</h4>
+									<p>This is the first page that you see when you first visit graphify.</p>
+								</div>
+							</div>
+							<div class="item">
+								<img src="images/2.png" alt="" />
+								<div class="carousel-caption">
+									<h4>Error inputs</h4>
+									<p>When necssary inputs don't exist, you will get an error!</p>
+								</div>
+							</div>
+							<div class="item">
+								<img src="images/3.png" alt="" />
+								<div class="carousel-caption">
+									<h4>Proper inputs</h4>
+									<p>With all inputs done, you are now able to generate your own graph!</p>
+								</div>
+							</div>
+							<div class="item">
+								<img src="images/4.png" alt="" />
+								<div class="carousel-caption">
+									<h4>Generated Graph</h4>
+									<p>By clicking the 'Generate!' button, you can get the generated graph.</p>
+								</div>
+							</div>
+							<div class="item">
+								<img src="images/5.png" alt="" />
+								<div class="carousel-caption">
+									<h4>Generated Table</h4>
+									<p>You can see it in a table by clicking 'See it in table' from the genrated graph. You can also go back to see the table by clicking 'See it in graph'.</p>
+								</div>
+							</div>
+							<div class="item">
+								<img src="images/6.png" alt="" />
+								<div class="carousel-caption">
+									<h4>Embed</h4>
+									<p>By clicking the 'Embed' button you can get the full code of the graph which you can paste it to any other online post and get the same experience!</p>
+								</div>
+							</div>
+						  </div>
+						  <!-- Carousel nav -->
+						  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+						  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
+						</div>
+					</div>
+				</div>
+			</section>
+		</div>
+	</body>
+</html>
diff --git a/images/1.png b/images/1.png
diff --git a/images/2.png b/images/2.png
diff --git a/images/3.png b/images/3.png
diff --git a/images/4.png b/images/4.png
diff --git a/images/5.png b/images/5.png
diff --git a/images/6.png b/images/6.png
diff --git a/images/original/1.png b/images/original/1.png
diff --git a/images/original/2.png b/images/original/2.png
diff --git a/images/original/3.png b/images/original/3.png
diff --git a/images/original/4.png b/images/original/4.png
diff --git a/images/original/5.png b/images/original/5.png
diff --git a/images/original/6.png b/images/original/6.png
diff --git a/index.html b/index.html
@@ -22,6 +22,14 @@
 			<header>
 				<h1>Graphify</h1>
 				<p class="lead">The easiest way to make graphs!</p>
+				<ul class="nav nav-tabs">
+					<li class="active">
+						<a href="#">Home</a>
+					</li>
+					<li>
+						<a href="help.html">Help</a>
+					</li>
+				</ul>
 			</header>
 			<section id="input">
 				<div class="centered">
@@ -81,10 +89,10 @@ <h3>Graph Type</h3>
 						<div class="span2">
 							<h3>Axis</h3>
 							<label class="radio">
-								<input type="radio" name="axis" value="x" checked />x<br />
+								<input type="radio" name="axis" value="x" checked />First column as category<br />
 							</label>
 							<label class="radio">
-								<input type="radio" name="axis" value="y" />y<br />
+								<input type="radio" name="axis" value="y" />First row as category<br />
 							</label>
 						</div>
 					</div>

diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
@@ -0,0 +1,169 @@
+/* ==========================================================
+ * bootstrap-carousel.js v2.0.3
+ * http://twitter.github.com/bootstrap/javascript.html#carousel
+ * ==========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* CAROUSEL CLASS DEFINITION
+  * ========================= */
+
+  var Carousel = function (element, options) {
+    this.$element = $(element)
+    this.options = options
+    this.options.slide && this.slide(this.options.slide)
+    this.options.pause == 'hover' && this.$element
+      .on('mouseenter', $.proxy(this.pause, this))
+      .on('mouseleave', $.proxy(this.cycle, this))
+  }
+
+  Carousel.prototype = {
+
+    cycle: function (e) {
+      if (!e) this.paused = false
+      this.options.interval
+        && !this.paused
+        && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
+      return this
+    }
+
+  , to: function (pos) {
+      var $active = this.$element.find('.active')
+        , children = $active.parent().children()
+        , activePos = children.index($active)
+        , that = this
+
+      if (pos > (children.length - 1) || pos < 0) return
+
+      if (this.sliding) {
+        return this.$element.one('slid', function () {
+          that.to(pos)
+        })
+      }
+
+      if (activePos == pos) {
+        return this.pause().cycle()
+      }
+
+      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
+    }
+
+  , pause: function (e) {
+      if (!e) this.paused = true
+      clearInterval(this.interval)
+      this.interval = null
+      return this
+    }
+
+  , next: function () {
+      if (this.sliding) return
+      return this.slide('next')
+    }
+
+  , prev: function () {
+      if (this.sliding) return
+      return this.slide('prev')
+    }
+
+  , slide: function (type, next) {
+      var $active = this.$element.find('.active')
+        , $next = next || $active[type]()
+        , isCycling = this.interval
+        , direction = type == 'next' ? 'left' : 'right'
+        , fallback  = type == 'next' ? 'first' : 'last'
+        , that = this
+        , e = $.Event('slide')
+
+      this.sliding = true
+
+      isCycling && this.pause()
+
+      $next = $next.length ? $next : this.$element.find('.item')[fallback]()
+
+      if ($next.hasClass('active')) return
+
+      if ($.support.transition && this.$element.hasClass('slide')) {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
+        $next.addClass(type)
+        $next[0].offsetWidth // force reflow
+        $active.addClass(direction)
+        $next.addClass(direction)
+        this.$element.one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+          that.sliding = false
+          setTimeout(function () { that.$element.trigger('slid') }, 0)
+        })
+      } else {
+        this.$element.trigger(e)
+        if (e.isDefaultPrevented()) return
+        $active.removeClass('active')
+        $next.addClass('active')
+        this.sliding = false
+        this.$element.trigger('slid')
+      }
+
+      isCycling && this.cycle()
+
+      return this
+    }
+
+  }
+
+
+ /* CAROUSEL PLUGIN DEFINITION
+  * ========================== */
+
+  $.fn.carousel = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('carousel')
+        , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
+      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'number') data.to(option)
+      else if (typeof option == 'string' || (option = options.slide)) data[option]()
+      else if (options.interval) data.cycle()
+    })
+  }
+
+  $.fn.carousel.defaults = {
+    interval: 5000
+  , pause: 'hover'
+  }
+
+  $.fn.carousel.Constructor = Carousel
+
+
+ /* CAROUSEL DATA-API
+  * ================= */
+
+  $(function () {
+    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
+      var $this = $(this), href
+        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
+      $target.carousel(options)
+      e.preventDefault()
+    })
+  })
+
+}(window.jQuery);
diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js
@@ -0,0 +1,61 @@
+/* ===================================================
+ * bootstrap-transition.js v2.0.3
+ * http://twitter.github.com/bootstrap/javascript.html#transitions
+ * ===================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+  $(function () {
+
+    "use strict"; // jshint ;_;
+
+
+    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
+     * ======================================================= */
+
+    $.support.transition = (function () {
+
+      var transitionEnd = (function () {
+
+        var el = document.createElement('bootstrap')
+          , transEndEventNames = {
+               'WebkitTransition' : 'webkitTransitionEnd'
+            ,  'MozTransition'    : 'transitionend'
+            ,  'OTransition'      : 'oTransitionEnd'
+            ,  'msTransition'     : 'MSTransitionEnd'
+            ,  'transition'       : 'transitionend'
+            }
+          , name
+
+        for (name in transEndEventNames){
+          if (el.style[name] !== undefined) {
+            return transEndEventNames[name]
+          }
+        }
+
+      }())
+
+      return transitionEnd && {
+        end: transitionEnd
+      }
+
+    })()
+
+  })
+
+}(window.jQuery);
diff --git a/js/help.js b/js/help.js
@@ -0,0 +1,3 @@
+$(document).ready(function(){
+	$('.carousel').carousel();
+});