Commit b5d61781 authored by José Luis Uc's avatar José Luis Uc

Merge branch 'dev' of gitlab.geoint.mx:mario.chirinos/GeoInt_SIDT into dev

parents f905eb0b 1a367e33
...@@ -109,6 +109,9 @@ ...@@ -109,6 +109,9 @@
{% include 'administration_aside.html' %} {% include 'administration_aside.html' %}
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
......
...@@ -109,6 +109,9 @@ ...@@ -109,6 +109,9 @@
{% include 'administration_aside.html' %} {% include 'administration_aside.html' %}
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
......
...@@ -113,6 +113,9 @@ ...@@ -113,6 +113,9 @@
{% include 'administration_aside.html' %} {% include 'administration_aside.html' %}
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
......
...@@ -109,6 +109,9 @@ ...@@ -109,6 +109,9 @@
{% include 'administration_aside.html' %} {% include 'administration_aside.html' %}
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
......
.sass-cache
.publish
bower_components
node_modules
config.rb
*.TODO
\ No newline at end of file
The MIT License (MIT)
Copyright (c) 2014 epetrova
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
guides.js
======
Guides.js is a lightweight javascript library for making guided website tours. It finds the element you want to highlight, creates a guide element using the html you specified in the configuration options and connects the guide and the highlighted element with an svg arrow.
#Demo
[http://ejulianova.github.io/guides/](http://ejulianova.github.io/guides/)
#Getting started
Once you have downloaded the source, simply include guides.css in the head of your page:
```html
<head>
...
<link rel="stylesheet" type="text/css" href="guides.css" >
</head>
```
and guides.js in your page scripts section. Make sure you include it after jquery:
```html
...
<script type="text/javascript" src="jquery.js" >
<script type="text/javascript" src="guides.js" >
</body>
```
Note that you can import guides.scss and compile it togerther with your website styles if you are using sass.
#Docs
##Dependencies
Guides.js depends on jquery, so you need to make sure you include jquery first.
##Initialization
Guides.js is a jquery plugin so it can be initialized on an element, that will "trigger" the guided tour:
```javascript
$('#demo').guides({
guides: [{
element: $('.navbar-brand'),
html: 'Welcome to Guides.js'
}, {
element: $('.navbar'),
html: 'Navigate through guides.js website'
}, {
element: $('#demo'),
html: 'See how it works'
}, {
element: $('#download'),
html: 'Download guides.js'
}, {
element: $('#getting-started'),
html: 'Check out how to get started with guides.js'
}, {
element: $('#docs'),
html: 'Read the docs'
}]
});
```
Now the tour will start everytime $('#demo') element is clicked.
If you want to manually start the tour you can do the following:
```javascript
var guides = $.guides({
guides: [{
html: 'Welcome to Guides.js'
}, {
element: $('.navbar'),
html: 'Navigate through guides.js website'
}, {
element: $('#demo'),
html: 'See how it works'
}, {
element: $('#download'),
html: 'Download guides.js'
}, {
element: $('#getting-started'),
html: 'Check out how to get started with guides.js'
}, {
element: $('#docs'),
html: 'Read the docs'
}]
});
guides.start();
````
##Configuration options
The default options are as follows:
```javascript
{
distance: 100,
color: '#fffff',
guides: []
}
```
* __distance__ _number_ - distance between the guide text and the element that it is related to
* __color__ _string_ - the guides arrows and text default color
* __guides__ _array of objects_ - the list of guides
###The guides array
A guide object looks like this:
```javascript
{
element: $('.navbar-brand'),
html: 'Welcome to Guides.js',
color: '#fff'
}
```
* __element__ (optional) _jquery element or string_ - the element (or selector) you want to highlight; if omitted the guide will be centered;
* __html__ (required) _string_ - this is the content of the tip: you can enter plain text or markup
* __color__ (optional) _string_ - the guide arrow and text color (falls back to the default color if not specified)
* __render__ (optional) _function_ - a callback function that is called before guide is rendered
##Methods
* __start__ $('#demo').guides('start');
* __end__ $('#demo').guides('end');
* __next__ $('#demo').guides('next');
* __prev__ $('#demo').guides('prev');
* __destroy__ $('#demo').guides('destroy');
* __setOptions__ $('#demo').guides('setOptions', options);
##Events
* __start__ $('#demo').guides({start: onStartFunction});
* __end__ $('#demo').guides({end: onStartFunction});
* __next__ $('#demo').guides({next: onNextFunction});
* __prev__ $('#demo').guides({prev: onPrevFunction});
* __render__ $('#demo').guides({render: onRenderFunction});
* __destroy__ $('#demo').guides({destroy: onDestroyFunction});
#Download
The source is availabe on github: https://github.com/epetrova/guides/:
```
git clone https://github.com/epetrova/guides.git
```
Alternatively, you can install using Bower:
```
bower install guides
```
\ No newline at end of file
{
"name": "guides",
"version": "1.2.9",
"homepage": "https://github.com/ejulianova/guides",
"authors": [
"Elena Petrova <elena.julianova@gmail.com>"
],
"description": "Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.",
"main": "dist/guides.js",
"keywords": [
"guide",
"guides",
"guiders",
"guided",
"step-by-step",
"intro",
"introduction",
"tour",
"welcome",
"helper",
"wizard",
"highlight",
"jquery-plugin",
"jquery",
"plugin"
],
"license": "MIT",
"ignore": [
"**/.*",
"demo",
"src",
"test",
"gulpfile.js",
"package.json",
"karma.conf.js",
"*.md"
],
"dependencies": {
"jquery": "~2.1.1"
}
}
\ No newline at end of file
/*
* guides 1.2.9
* Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.
* https://github.com/ejulianova/guides
*
* Copyright 2015, Elena Petrova <elena.julianova@gmail.com>
* Released under the MIT license.
*/
.guides-canvas,.guides-mask,.guides-overlay{position:absolute;top:0;left:0;bottom:0;right:0}.guides-overlay{background:rgba(0,0,0,0.6);z-index:99996}.guides-mask{z-index:99998}.guides-current-element{z-index:99997;position:relative}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}.guides-fade-in{-webkit-animation:fadeIn .25s ease;-moz-animation:fadeIn .25s ease;-o-animation:fadeIn .25s ease;animation:fadeIn .25s ease}.guides-guide{color:#fff;font-size:1.5rem;text-shadow:0 0 10px #000;position:absolute;margin:5px;z-index:99999}.guides-guide svg{position:absolute;top:0;left:0}.guides-guide span{display:inline-block;padding:10px;font-size:2rem}.guides-top svg{top:auto;bottom:0}.guides-left svg{left:auto;right:0}
/*
* guides 1.2.9
* Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.
* https://github.com/ejulianova/guides
*
* Copyright 2015, Elena Petrova <elena.julianova@gmail.com>
* Released under the MIT license.
*/
!function t(i,e,s){function o(h,r){if(!e[h]){if(!i[h]){var a="function"==typeof require&&require;if(!r&&a)return a(h,!0);if(n)return n(h,!0);throw new Error("Cannot find module '"+h+"'")}var u=e[h]={exports:{}};i[h][0].call(u.exports,function(t){var e=i[h][1][t];return o(e?e:t)},u,u.exports,t,i,e,s)}return e[h].exports}for(var n="function"==typeof require&&require,h=0;h<s.length;h++)o(s[h]);return o}({1:[function(t,i,e){"use strict";var s=t("./modules/Guides");$.fn.guides=function(t,i){return this.each(function(){var e=$(this),o=e.data("guides"),n="object"==typeof t&&t;(o||"string"!=typeof n)&&(o||e.data("guides",o=new s(this,n)),"string"==typeof t&&o[t](i))})},$.guides=function(t){return new s(null,t)},$.fn.guides.Constructor=s},{"./modules/Guides":3}],2:[function(t,i,e){var s=t("./format"),o=function(t,i,e){this.guide=t,this._distance=t.distance||e.distance,this._color=t.color||e.color,this._class=t.cssClass||e.cssClass||"",this.$highlightedElement=$(t.element).addClass("guides-current-element"),this.$container=i,this.init()};o.prototype._arrowSize=10,o.prototype._path="M{0},{1} C{2},{3},{4},{5},{6},{7}",o.prototype._arrowTemplate='<svg width="{0}" height="{1}"> <defs> <marker id="arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,1 L2,{3} L{3},6 L2,2" style="fill:{4};"></path> </marker> </defs> <path id="line" d="{2}" style="stroke:{4}; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);"></path></svg>',o.prototype.init=function(){return this.$guide=$("<div />",{class:"guides-fade-in guides-guide "+this._class,html:"<span>"+this.guide.html+"</span>"}),this._position(),this},o.prototype._position=function(){this.$highlightedElement&&this.$highlightedElement.length>0?(this._attachToElement(),this.$guide.appendTo(this.$container),this._renderArrow()):this._center(),this._scrollIntoView()},o.prototype._center=function(){this.$guide.css("visibility","hidden").appendTo(this.$container).addClass("guides-center").css({left:0,right:0,textAlign:"center",top:window.innerHeight/2-this.$guide.outerHeight()/2}).css("visibility","visible")},o.prototype._attachToElement=function(){var t=this.$highlightedElement.offset(),i=$("body").width(),e=$("body").height(),s=t.left,o=t.top,n=this.$highlightedElement.outerWidth(),h=this.$highlightedElement.outerHeight(),r=i-s-n,a=e-o-h,u={color:this._color,top:e/2>t.top?t.top:"auto",left:i/2>t.left?t.left:"auto",right:i/2>t.left?"auto":i-t.left-n,bottom:e/2>t.top?"auto":t.bottom};switch(Math.max(s,r,o,a)){case s:this.position="left",u.paddingRight=this._distance,u.right=$(document).width()-t.left,u.left="auto";break;case o:this.position="top",u.paddingBottom=this._distance,u.bottom=$(document).height()-t.top,u.top="auto";break;case r:this.position="right",u.paddingLeft=this._distance,u.left=t.left+n,u.right="auto";break;default:this.position="bottom",u.paddingTop=this._distance,u.top=t.top+h,u.bottom="auto"}this.$guide.addClass("guides-"+this.position).css(u)},o.prototype._renderArrow=function(){this._width=this.$guide.outerWidth(),this._height=this.$guide.outerHeight(),this.$guide.append(s(this._arrowTemplate,this._width,this._distance,this[this.position](),this._arrowSize,this._color))},o.prototype.top=function(){var t=this._verticalAlign();return this._getPath(t)},o.prototype.bottom=function(){var t=this._verticalAlign(!0);return this._getPath(t)},o.prototype.left=function(){var t=this._horizontalAlign();return this._getPath(t)},o.prototype.right=function(){var t=this._horizontalAlign(!0);return this._getPath(t)},o.prototype._getPath=function(t){return s(this._path,t.x1,t.y1,t.dx1,t.dy1,t.dx2,t.dy2,t.x2,t.y2)},o.prototype._getFluctuation=function(){return Math.floor(20*Math.random())+10},o.prototype._verticalAlign=function(t){var i=this._width/2,e=t?this._distance:0,s=Math.max(Math.min(this.$highlightedElement.offset().left+this.$highlightedElement.outerWidth()/2-this.$guide.offset().left,this._width-this._arrowSize),this._arrowSize),o=t?this._arrowSize:this._distance-this._arrowSize;return{x1:i,y1:e,x2:s,y2:o,dx1:Math.max(0,Math.min(Math.abs(2*i-s)/3,this._width)+this._getFluctuation()),dy1:t?Math.max(0,o+3*Math.abs(e-o)/4):Math.max(0,e+3*Math.abs(e-o)/4),dx2:Math.max(0,Math.min(Math.abs(i-3*s)/2,this._width)-this._getFluctuation()),dy2:t?Math.max(0,o+3*Math.abs(e-o)/4):Math.max(0,e+3*Math.abs(e-o)/4)}},o.prototype._horizontalAlign=function(t){var i=t?this._distance:this._width-this._distance,e=this._height/2,s=t?this._arrowSize:this._width-this._arrowSize,o=Math.max(Math.min(this.$highlightedElement.offset().top+this.$highlightedElement.outerHeight()/2-this.$guide.offset().top,this._height-this._arrowSize),this._arrowSize);return{x1:i,y1:e,x2:s,y2:o,dx1:t?Math.max(0,s+3*Math.abs(i-s)/4):Math.max(0,i+3*Math.abs(i-s)/4),dy1:Math.max(0,Math.min(Math.abs(2*e-o)/3,this._height)+this._getFluctuation()),dx2:t?Math.max(0,s+3*Math.abs(i-s)/4):Math.max(0,i+3*Math.abs(i-s)/4),dy2:Math.max(0,Math.min(Math.abs(e-3*o)/2,this._height)+this._getFluctuation())}},o.prototype._scrollIntoView=function(){if(0===this.$highlightedElement.length)return void $("html,body").animate({scrollTop:0},500);var t=this.$guide.offset(),i=t.top,e=t.top+this.$guide.outerHeight(),s=t.left,o=t.left+this.$guide.outerWidth(),n=$(document).scrollTop(),h=$(document).scrollLeft();(n>i||n+$(window).height()<e)&&$("html,body").animate({scrollTop:"bottom"===this.position?i-100:i},500),(h>s||h+$(window).width()<o)&&$("html,body").animate({scrollLeft:"righ"===this.position?s-100:s},500)},o.prototype.destroy=function(){this.$highlightedElement.removeClass("guides-current-element"),this.$guide.remove()},i.exports=o},{"./format":4}],3:[function(t,i,e){var s=t("./Guide"),o=function(t,i){this.element=t,this.$element=$(t),this.options={},this._current=0,this.setOptions(i),t&&this.$element.on("click.guides",$.proxy(this.start,this))};o.DEFAULTS={distance:100,color:"#fff",cssClass:"",guides:[]},o.prototype.start=function(t){return t&&t.preventDefault(),this._isAlreadyRunning()?this:(this._current=0,this._renderCanvas()._renderGuide(this.options.guides[this._current])._callback("start"),this)},o.prototype.end=function(){return this.$canvas&&(this.$canvas.remove(),this.$canvas=null),this._currentGuide&&(this._currentGuide.destroy(),this._currentGuide=null),$(document).off("keyup.guides"),this._callback("end"),this},o.prototype.next=function(){return this._renderGuide(this.options.guides[++this._current])._callback("next"),this},o.prototype.prev=function(){if(this._current)return this._renderGuide(this.options.guides[--this._current])._callback("prev"),this},o.prototype.setOptions=function(t){return"object"!=typeof t?this:void(this.options=$.extend({},o.DEFAULTS,this.options,t))},o.prototype.destroy=function(){return this.end(),this.$element.off("click.guides"),this._callback("destroy"),this},o.prototype._callback=function(t){var i=this.options[t],e={sender:this};this._currentGuide&&(e.$element=this._currentGuide.guide.element,e.$guide=this._currentGuide.$element),$.isFunction(i)&&i.apply(this,[e])},o.prototype._isAlreadyRunning=function(){return!!this.$canvas},o.prototype._renderCanvas=function(){return this.$canvas=$("<div />",{class:"guides-canvas guides-fade-in",html:'<div class="guides-overlay"></div><div class="guides-mask"></div>'}).appendTo("body"),this._bindNavigation(),this},o.prototype._renderGuide=function(t){return t?(this._currentGuide&&this._currentGuide.destroy(),this._callback("render",t),$.isFunction(t.render)&&t.render.apply(this,[t]),this._currentGuide=new s(t,this.$canvas,this.options),this):(this.end(),this)},o.prototype._bindNavigation=function(){return this.$canvas.on("click.guides",$.proxy(this._onCanvasClick,this)),$(document).on("keyup.guides",$.proxy(this._onDocKeyUp,this)),this},o.prototype._onCanvasClick=function(t){this.next()},o.prototype._onDocKeyUp=function(t){switch(t.which){case 27:this.end();break;case 39:case 32:this.next();break;case 37:case 8:t.preventDefault(),this.prev()}},i.exports=o},{"./Guide":2}],4:[function(t,i,e){i.exports=function(){for(var t=arguments[0],i=0;i<arguments.length-1;i++){var e=new RegExp("\\{"+i+"\\}","gm");t=t.replace(e,arguments[i+1])}return t}},{}]},{},[1]);
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>guides.js</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="screen.css">
<link rel="stylesheet" type="text/css" href="guides.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">guides.js</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#getting-started">getting started</a></li>
<li><a href="#docs">docs</a></li>
<li><a href="#download">download</a></li>
</ul>
<p class="navbar-btn navbar-right">
<button type="button" id="demo" class="demo btn btn-success">Start demo</button>
</p>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div role="main" class="container">
<div class="page-header">
<h1>Guides.js <small>lightweight javascript library for making guided website tours</small></h1>
</div>
<p>Guides.js finds the element you want to highlight, creates a guide element using the html you specified in the configuration options and connects the guide and the highlighted element with an svg arrow.</p>
<p><button type="button" class="demo btn btn-success">Start demo</button></p>
<p><img src="http://i.gyazo.com/c03b02c7bbc24b7e9bdb8e620df20cf7.png" class="img-thumbnail" /></p>
<h3 id="getting-started">Getting Started</h3>
<section>
<p>Once you have downloaded the source, simply include <em>guides.css</em> in the <kbd>&lt;head&gt;</kbd> of your page:</p>
<p><pre>&lt;head&gt
...
&lt;link rel="stylesheet" type="text/css" href="guides.css" &gt;
&lt;/head&gt</pre></p>
<p>and <em>guides.js</em> in your page scripts section. Make sure you include it after <em>jquery</em>:</p>
<p><pre> ...
&lt;script type="text/javascript" src="jquery.js" &gt;
&lt;script type="text/javascript" src="guides.js" &gt;
&lt;/body&gt</pre></p>
<p>Note that you can import <em>guides.scss</em> and compile it togerther with your website styles if you are using sass.</p>
</section>
<h3 id="docs">Docs</h3>
<section>
<h4>Dependencies</h4>
<p><em>Guides.js</em> depends on <b>jquery</b>, so you need to make sure you include jquery first.</p>
<h4>Initialization</h4>
<p><em>Guides.js</em> is a jquery plugin and it can be initialized on an element, that will "trigger" the guided tour:</p>
<p><pre>
$('#demo').guides({
guides: [{
element: $('.navbar-brand'),
html: 'Welcome to Guides.js'
}, {
element: $('.navbar'),
html: 'Navigate through guides.js website'
}, {
element: $('#demo'),
html: 'See how it works'
}, {
element: $('#download'),
html: 'Download guides.js'
}, {
element: $('#getting-started'),
html: 'Check out how to get started with guides.js'
}, {
element: $('#docs'),
html: 'Read the docs'
}]
});</pre></p>
<p>Now the tour will start everytime <kbd>$('#demo')</kbd> element is clicked.</p>
<p>If you want to manually start the tour you can do the following:</p>
<p><pre>
var guides = $.guides({
guides: [{
html: 'Welcome to Guides.js'
}, {
element: $('.navbar'),
html: 'Navigate through guides.js website'
}, {
element: $('#demo'),
html: 'See how it works'
}, {
element: $('#download'),
html: 'Download guides.js'
}, {
element: $('#getting-started'),
html: 'Check out how to get started with guides.js'
}, {
element: $('#docs'),
html: 'Read the docs'
}]
});
guides.start();
</pre></p>
<h4>Configuration options</h4>
<h5>The default options are as follows:</h5>
<p><pre>
{
distance: 100,
color: '#fffff',
guides: []
}</pre></p>
<dl class="dl-horizontal">
<dt>distance</dt>
<dd><em>number</em> - distance between the guide text and the element that it is related to.</dd>
<dt>color</dt>
<dd><em>string</em> - arrows and text default color</dd>
<dt>guides</dt>
<dd><em>array of objects</em> - the list of guides</dd>
</dl>
<h5>The guides array</h5>
<p>A guide object looks like this:</p>
<pre>{
element: $('.navbar-brand'),
html: 'Welcome to Guides.js',
color: '#fff'
}</pre>
<dl class="dl-horizontal">
<dt>element</dt>
<dd><span class="label label-default">optional</span> <em>jquery element or string</em> - the element (or selector) you want to highlight; if omitted the guide will be centered</dd>
<dt>html</dt>
<dd><span class="label label-danger">required</span> <em>string</em> - this is the content of the tip: you can enter plain text or markup</dd>
<dt>color</dt>
<dd><span class="label label-default">optional</span> <em>string</em> - arrow and text color (falls back to the default color if not specified)</dd>
<dt>render</dt>
<dd><span class="label label-default">optional</span> <em>function</em> - a callback function that is called before guide is rendered</dd>
</dl>
<h4>Methods</h4>
<dl class="dl-horizontal">
<dt>start</dt>
<dd><kbd>$('#demo').guides('start');</kbd> Starts the guided tour.</dd>
<dt>end</dt>
<dd><kbd>$('#demo').guides('end');</kbd> Exits the guided tour.</dd>
<dt>next</dt>
<dd><kbd>$('#demo').guides('next');</kbd> Moves to the next guide.</dd>
<dt>prev</dt>
<dd><kbd>$('#demo').guides('prev');</kbd> Moves back to the previous guide.</dd>
<dt>destroy</dt>
<dd><kbd>$('#demo').guides('destroy');</kbd> Exits the guided tour and destroys it.</dd>
<dt>setOptions</dt>
<dd><kbd>$('#demo').guides('setOptions', options);</kbd> Extends the guides configuration options with the options sent as a second parameter.</dd>
</dl>
<h4>Events</h4>
<dl class="dl-horizontal">
<dt>start</dt>
<dd><kbd>$('#demo').guides({start: onStartFunction});</kbd> Called after the tour starts.</dd>
<dt>end</dt>
<dd><kbd>$('#demo').guides({end: onEndFunction});</kbd> Called after the tour ends.</dd>
<dt>next</dt>
<dd><kbd>$('#demo').guides({next: onNextFunction});</kbd> Called after showing the next guide.</dd>
<dt>prev</dt>
<dd><kbd>$('#demo').guides({prev: onPrevFunction});</kbd> Called after showing the previous guide.</dd>
<dt>render</dt>
<dd><kbd>$('#demo').guides({render: onRenderFunction});</kbd> Called before a guide is rendered.</dd>
<dt>destroy</dt>
<dd><kbd>$('#demo').guides({destroy: onDestroyFunction});</kbd> Called after destroying.</dd>
</dl>
</section>
<h3 id="download">Download</h3>
<section>
The source is availabe on github: <a href="https://github.com/epetrova/guides/">https://github.com/epetrova/guides/</a>:
<p><pre>git clone https://github.com/epetrova/guides.git</pre></p>
Alternatively, you can install using Bower:
<p><pre>bower install guides</pre></p>
</section>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./guides.min.js"></script>
<script type="text/javascript">
$('.demo').guides({
guides: [{
html: 'Welcome to Guides.js'
}, {
element: $('.navbar'),
html: 'Navigate through guides.js website'
}, {
element: $('#demo'),
html: 'See how it works'
}, {
element: $('#download'),
html: 'Download guides.js'
}, {
element: $('#getting-started'),
html: 'Check out how to get started with guides.js'
}, {
element: $('#docs'),
html: 'Read the docs'
}]
});
</script>
</body>
</html>
\ No newline at end of file
/* line 1, screen.scss */
html, body {
min-height: 100%;
position: relative;
}
/* line 5, screen.scss */
h3 {
background: #FFF;
border-radius: 2px;
}
/* line 9, screen.scss */
.navbar-brand.guides-current-element {
background: #dfdfdf;
}
html, body {
min-height: 100%;
position: relative;
}
h3 {
background: #FFF;
border-radius: 2px;
}
.navbar-brand.guides-current-element {
background: #dfdfdf;
}
\ No newline at end of file
/*
* guides 1.2.9
* Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.
* https://github.com/ejulianova/guides
*
* Copyright 2015, Elena Petrova <elena.julianova@gmail.com>
* Released under the MIT license.
*/
.guides-canvas,.guides-mask,.guides-overlay{position:absolute;top:0;left:0;bottom:0;right:0}.guides-overlay{background:rgba(0,0,0,0.6);z-index:99996}.guides-mask{z-index:99998}.guides-current-element{z-index:99997;position:relative}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}100%{opacity:.5}}.guides-fade-in{-webkit-animation:fadeIn .25s ease;-moz-animation:fadeIn .25s ease;-o-animation:fadeIn .25s ease;animation:fadeIn .25s ease}.guides-guide{color:#fff;font-size:1.5rem;text-shadow:0 0 10px #000;position:absolute;margin:5px;z-index:99999}.guides-guide svg{position:absolute;top:0;left:0}.guides-guide span{display:inline-block;padding:10px;font-size:2rem}.guides-top svg{top:auto;bottom:0}.guides-left svg{left:auto;right:0}
/*
* guides 1.2.9
* Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.
* https://github.com/ejulianova/guides
*
* Copyright 2015, Elena Petrova <elena.julianova@gmail.com>
* Released under the MIT license.
*/
!function o(n,h,r){function a(e,t){if(!h[e]){if(!n[e]){var i="function"==typeof require&&require;if(!t&&i)return i(e,!0);if(u)return u(e,!0);throw new Error("Cannot find module '"+e+"'")}var s=h[e]={exports:{}};n[e][0].call(s.exports,function(t){var i=n[e][1][t];return a(i||t)},s,s.exports,o,n,h,r)}return h[e].exports}for(var u="function"==typeof require&&require,t=0;t<r.length;t++)a(r[t]);return a}({1:[function(t,i,e){"use strict";var n=t("./modules/Guides");$.fn.guides=function(s,o){return this.each(function(){var t=$(this),i=t.data("guides"),e="object"==typeof s&&s;(i||"string"!=typeof e)&&(i||t.data("guides",i=new n(this,e)),"string"==typeof s&&i[s](o))})},$.guides=function(t){return new n(null,t)},$.fn.guides.Constructor=n},{"./modules/Guides":3}],2:[function(t,i,e){var s=t("./format"),o=function(t,i,e){this.guide=t,this._distance=t.distance||e.distance,this._color=t.color||e.color,this._class=t.cssClass||e.cssClass||"",this.$highlightedElement=$(t.element).addClass("guides-current-element"),this.$container=i,this.init()};o.prototype._arrowSize=10,o.prototype._path="M{0},{1} C{2},{3},{4},{5},{6},{7}",o.prototype._arrowTemplate='<svg width="{0}" height="{1}"> <defs> <marker id="arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto"> <path d="M2,1 L2,{3} L{3},6 L2,2" style="fill:{4};"></path> </marker> </defs> <path id="line" d="{2}" style="stroke:{4}; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);"></path></svg>',o.prototype.init=function(){return this.$guide=$("<div />",{class:"guides-fade-in guides-guide "+this._class,html:"<span>"+this.guide.html+"</span>"}),this._position(),this},o.prototype._position=function(){this.$highlightedElement&&0<this.$highlightedElement.length?(this._attachToElement(),this.$guide.appendTo(this.$container),this._renderArrow()):this._center(),this._scrollIntoView()},o.prototype._center=function(){this.$guide.css("visibility","hidden").appendTo(this.$container).addClass("guides-center").css({left:0,right:0,textAlign:"center",top:window.innerHeight/2-this.$guide.outerHeight()/2}).css("visibility","visible")},o.prototype._attachToElement=function(){var t=this.$highlightedElement.offset(),i=$("body").width(),e=$("body").height(),s=t.left,o=t.top,n=this.$highlightedElement.outerWidth(),h=this.$highlightedElement.outerHeight(),r=i-s-n,a=e-o-h,u={color:this._color,top:e/2>t.top?t.top:"auto",left:i/2>t.left?t.left:"auto",right:i/2>t.left?"auto":i-t.left-n,bottom:e/2>t.top?"auto":t.bottom};switch(Math.max(s,r,o,a)){case s:this.position="left",u.paddingRight=this._distance,u.right=$(document).width()-t.left,u.left="auto";break;case o:this.position="top",u.paddingBottom=this._distance,u.bottom=$(document).height()-t.top,u.top="auto";break;case r:this.position="right",u.paddingLeft=this._distance,u.left=t.left+n,u.right="auto";break;default:this.position="bottom",u.paddingTop=this._distance,u.top=t.top+h,u.bottom="auto"}this.$guide.addClass("guides-"+this.position).css(u)},o.prototype._renderArrow=function(){this._width=this.$guide.outerWidth(),this._height=this.$guide.outerHeight(),this.$guide.append(s(this._arrowTemplate,this._width,this._distance,this[this.position](),this._arrowSize,this._color))},o.prototype.top=function(){var t=this._verticalAlign();return this._getPath(t)},o.prototype.bottom=function(){var t=this._verticalAlign(!0);return this._getPath(t)},o.prototype.left=function(){var t=this._horizontalAlign();return this._getPath(t)},o.prototype.right=function(){var t=this._horizontalAlign(!0);return this._getPath(t)},o.prototype._getPath=function(t){return s(this._path,t.x1,t.y1,t.dx1,t.dy1,t.dx2,t.dy2,t.x2,t.y2)},o.prototype._getFluctuation=function(){return Math.floor(20*Math.random())+10},o.prototype._verticalAlign=function(t){var i=this._width/2,e=t?this._distance:0,s=Math.max(Math.min(this.$highlightedElement.offset().left+this.$highlightedElement.outerWidth()/2-this.$guide.offset().left,this._width-this._arrowSize),this._arrowSize),o=t?this._arrowSize:this._distance-this._arrowSize;return{x1:i,y1:e,x2:s,y2:o,dx1:Math.max(0,Math.min(Math.abs(2*i-s)/3,this._width)+this._getFluctuation()),dy1:t?Math.max(0,o+3*Math.abs(e-o)/4):Math.max(0,e+3*Math.abs(e-o)/4),dx2:Math.max(0,Math.min(Math.abs(i-3*s)/2,this._width)-this._getFluctuation()),dy2:t?Math.max(0,o+3*Math.abs(e-o)/4):Math.max(0,e+3*Math.abs(e-o)/4)}},o.prototype._horizontalAlign=function(t){var i=t?this._distance:this._width-this._distance,e=this._height/2,s=t?this._arrowSize:this._width-this._arrowSize,o=Math.max(Math.min(this.$highlightedElement.offset().top+this.$highlightedElement.outerHeight()/2-this.$guide.offset().top,this._height-this._arrowSize),this._arrowSize);return{x1:i,y1:e,x2:s,y2:o,dx1:t?Math.max(0,s+3*Math.abs(i-s)/4):Math.max(0,i+3*Math.abs(i-s)/4),dy1:Math.max(0,Math.min(Math.abs(2*e-o)/3,this._height)+this._getFluctuation()),dx2:t?Math.max(0,s+3*Math.abs(i-s)/4):Math.max(0,i+3*Math.abs(i-s)/4),dy2:Math.max(0,Math.min(Math.abs(e-3*o)/2,this._height)+this._getFluctuation())}},o.prototype._scrollIntoView=function(){if(0!==this.$highlightedElement.length){var t=this.$guide.offset(),i=t.top,e=t.top+this.$guide.outerHeight(),s=t.left,o=t.left+this.$guide.outerWidth(),n=$(document).scrollTop(),h=$(document).scrollLeft();(i<n||n+$(window).height()<e)&&$("html,body").animate({scrollTop:"bottom"===this.position?i-100:i},500),(s<h||h+$(window).width()<o)&&$("html,body").animate({scrollLeft:"righ"===this.position?s-100:s},500)}else $("html,body").animate({scrollTop:0},500)},o.prototype.destroy=function(){this.$highlightedElement.removeClass("guides-current-element"),this.$guide.remove()},i.exports=o},{"./format":4}],3:[function(t,i,e){var s=t("./Guide"),o=function(t,i){this.element=t,this.$element=$(t),this.options={},this._current=0,this.setOptions(i),t&&this.$element.on("click.guides",$.proxy(this.start,this))};o.DEFAULTS={distance:100,color:"#fff",cssClass:"",guides:[]},o.prototype.start=function(t){return t&&t.preventDefault(),this._isAlreadyRunning()||(this._current=0,this._renderCanvas()._renderGuide(this.options.guides[this._current])._callback("start")),this},o.prototype.end=function(){return this.$canvas&&(this.$canvas.remove(),this.$canvas=null),this._currentGuide&&(this._currentGuide.destroy(),this._currentGuide=null),$(document).off("keyup.guides"),this._callback("end"),this},o.prototype.next=function(){return this._renderGuide(this.options.guides[++this._current])._callback("next"),this},o.prototype.prev=function(){if(this._current)return this._renderGuide(this.options.guides[--this._current])._callback("prev"),this},o.prototype.setOptions=function(t){if("object"!=typeof t)return this;this.options=$.extend({},o.DEFAULTS,this.options,t)},o.prototype.destroy=function(){return this.end(),this.$element.off("click.guides"),this._callback("destroy"),this},o.prototype._callback=function(t){var i=this.options[t],e={sender:this};this._currentGuide&&(e.$element=this._currentGuide.guide.element,e.$guide=this._currentGuide.$element),$.isFunction(i)&&i.apply(this,[e])},o.prototype._isAlreadyRunning=function(){return!!this.$canvas},o.prototype._renderCanvas=function(){return this.$canvas=$("<div />",{class:"guides-canvas guides-fade-in",html:'<div class="guides-overlay"></div><div class="guides-mask"></div>'}).appendTo("body"),this._bindNavigation(),this},o.prototype._renderGuide=function(t){return t?(this._currentGuide&&this._currentGuide.destroy(),this._callback("render",t),$.isFunction(t.render)&&t.render.apply(this,[t]),this._currentGuide=new s(t,this.$canvas,this.options)):this.end(),this},o.prototype._bindNavigation=function(){return this.$canvas.on("click.guides",$.proxy(this._onCanvasClick,this)),$(document).on("keyup.guides",$.proxy(this._onDocKeyUp,this)),this},o.prototype._onCanvasClick=function(t){this.next()},o.prototype._onDocKeyUp=function(t){switch(t.which){case 27:this.end();break;case 39:case 32:this.next();break;case 37:case 8:t.preventDefault(),this.prev()}},i.exports=o},{"./Guide":2}],4:[function(t,i,e){i.exports=function(){for(var t=arguments[0],i=0;i<arguments.length-1;i++){var e=new RegExp("\\{"+i+"\\}","gm");t=t.replace(e,arguments[i+1])}return t}},{}]},{},[1]);
\ No newline at end of file
/*
* guides 1.2.9
* Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.
* https://github.com/ejulianova/guides
*
* Copyright 2015, Elena Petrova <elena.julianova@gmail.com>
* Released under the MIT license.
*/
.guides-canvas, .guides-mask, .guides-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.guides-overlay {
background: rgba(0,0,0,.6);
z-index: 99996;
}
.guides-mask {
z-index: 99998;
}
.guides-current-element {
z-index: 99997;
position: relative;
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
.guides-fade-in {
-webkit-animation: fadeIn .25s ease; /* Safari 4+ */
-moz-animation: fadeIn .25s ease; /* Fx 5+ */
-o-animation: fadeIn .25s ease; /* Opera 12+ */
animation: fadeIn .25s ease; /* IE 10+ */
}
.guides-guide {
color: #fff;
font-size: 1.5rem;
text-shadow: 0 0 10px #000;
position: absolute;
margin: 5px;
z-index: 99999;
svg {
position: absolute;
top: 0;
left: 0;
}
span {
display: inline-block;
padding: 10px;
font-size: 2rem;
}
}
.guides-top svg {
top: auto;
bottom: 0;
}
.guides-left svg {
left: auto;
right: 0;
}
\ No newline at end of file
var open = require('open');
var karmaServer = require('karma').Server;
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var browserify = require('gulp-browserify');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var banner = require('gulp-banner');
var connect = require('gulp-connect');
var ghPages = require('gulp-gh-pages');
var pkg = require('./bower.json');
const DIST = 'dist/';
const BANNER =
'/*\n' +
' * <%= pkg.name %> <%= pkg.version %>\n' +
' * <%= pkg.description %>\n' +
' * <%= pkg.homepage %>\n' +
' *\n' +
' * Copyright 2015, <%= pkg.authors.join(", ") %>\n' +
' * Released under the <%= pkg.license %> license.\n' +
'*/\n\n';
gulp.task('script', function() {
gulp.src('src/guides.js')
.pipe(browserify())
.pipe(banner(BANNER, {
pkg: pkg
}))
.pipe(gulp.dest(DIST))
.pipe(uglify())
.pipe(banner(BANNER, {
pkg: pkg
}))
.pipe(rename('guides.min.js'))
.pipe(gulp.dest(DIST))
.pipe(connect.reload());
});
gulp.task('style', function() {
gulp.src('src/guides.scss')
.pipe(banner(BANNER, {
pkg: pkg
}))
.pipe(gulp.dest(DIST))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(banner(BANNER, {
pkg: pkg
}))
.pipe(gulp.dest(DIST))
.pipe(connect.reload());
});
gulp.task('test', function (done) {
new karmaServer({
configFile: require('path').resolve('karma.conf.js'),
singleRun: true
}, done).start();
});
gulp.task('demo', ['script', 'style', 'test'], function() {
return gulp.src(['./dist/guides.css', './dist/guides.min.js'])
.pipe(gulp.dest('demo/'));
});
gulp.task('github-page', ['demo'], function() {
return gulp.src(['./demo/**/*'])
.pipe(ghPages());
});
gulp.task('server', function () {
connect.server({
root: ['./demo'],
port: 8080,
livereload: true
});
});
gulp.task('watch', ['server'], function() {
open('http://localhost:8080/');
gulp.watch('src/**/*', ['build']);
gulp.watch(['demo/**/*.html', 'demo/**/*.scss'], ['build']);
});
gulp.task('build', ['demo']);
gulp.task('default', ['build', 'watch']);
gulp.task('deploy', ['build', 'github-page']);
\ No newline at end of file
module.exports = function(config) {
config.set({
browsers: ['PhantomJS'],
frameworks: ['jasmine', 'browserify'],
files: [
'node_modules/jquery/dist/jquery.js',
'test/**/*.spec.js'
],
preprocessors: {
'test/**/*.spec.js': [ 'browserify' ]
},
plugins : ['karma-jasmine', 'karma-phantomjs-launcher', 'karma-browserify'],
browserify: {
debug: true
}
});
};
\ No newline at end of file
{
"name": "guides",
"version": "1.3.0",
"description": "Simple way to highlighting DOM elements and guide your users with step-by-step welcome tours in your web app.",
"title": "Guides.js - highlight DOM elements and make step-by-step website tours",
"author": {
"name": "Elena Petrova",
"email": "elena.julianova@gmail.com",
"url": "http://ejulianova.github.io/guides/"
},
"main": "guides.js",
"dependencies": {
"jquery": "^3.0.0"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-banner": "^0.1.3",
"gulp-browserify": "^0.5.1",
"gulp-connect": "^5.6.1",
"gulp-gh-pages": "^0.5.4",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.1",
"jasmine": "^2.4.1",
"karma": "^3.0.0",
"karma-browserify": "^5.3.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.4",
"open": "0.0.5",
"phantomjs": "^2.1.7",
"phantomjs-prebuilt": "^2.1.16"
},
"scripts": {
"test": "./node_modules/.bin/gulp test",
"build": "./node_modules/.bin/gulp build",
"start": "./node_modules/.bin/gulp"
},
"keywords": [
"guide",
"guides",
"guiders",
"guided",
"tour",
"welcome",
"helper",
"wizard",
"highlight",
"jquery-plugin",
"jquery",
"plugin",
"step-by-step",
"intro",
"introduction",
"ecosystem:jquery"
],
"docs": "http://ejulianova.github.io/guides/",
"demo": "http://ejulianova.github.io/guides/",
"homepage": "http://ejulianova.github.io/guides/",
"repository": {
"type": "git",
"url": "https://github.com/ejulianova/guides.git"
},
"bugs": {
"url": "https://github.com/ejulianova/guides/issues"
},
"licenses": [
{
"type": "MIT",
"url": "https://opensource.org/licenses/MIT"
}
],
"license": "MIT"
}
'use strict';
var Guides = require('./modules/Guides');
$.fn.guides = function (option, optionData) {
return this.each(function () {
var $this = $(this),
data = $this.data('guides'),
options = typeof option === 'object' && option;
if (!data && typeof options == 'string') return;
if (!data) $this.data('guides', (data = new Guides(this, options)));
if (typeof option == 'string') data[option](optionData);
});
};
$.guides = function (options) {
return new Guides(null, options);
};
$.fn.guides.Constructor = Guides;
\ No newline at end of file
.guides-canvas, .guides-mask, .guides-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.guides-overlay {
background: rgba(0,0,0,.6);
z-index: 99996;
}
.guides-mask {
z-index: 99998;
}
.guides-current-element {
z-index: 99997;
position: relative;
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: .5; }
}
.guides-fade-in {
-webkit-animation: fadeIn .25s ease; /* Safari 4+ */
-moz-animation: fadeIn .25s ease; /* Fx 5+ */
-o-animation: fadeIn .25s ease; /* Opera 12+ */
animation: fadeIn .25s ease; /* IE 10+ */
}
.guides-guide {
color: #fff;
font-size: 1.5rem;
text-shadow: 0 0 10px #000;
position: absolute;
margin: 5px;
z-index: 99999;
svg {
position: absolute;
top: 0;
left: 0;
}
span {
display: inline-block;
padding: 10px;
font-size: 2rem;
}
}
.guides-top svg {
top: auto;
bottom: 0;
}
.guides-left svg {
left: auto;
right: 0;
}
\ No newline at end of file
var format = require('./format');
var Guide = function (guide, $container, options) {
this.guide = guide;
this._distance = guide.distance || options.distance;
this._color = guide.color || options.color;
this._class = guide.cssClass || options.cssClass || '';
this.$highlightedElement = $(guide.element).addClass('guides-current-element');
this.$container = $container;
this.init();
};
Guide.prototype._arrowSize = 10;
// Mx1,y1, Cdx1,dy1,dx2,dy2,x2,y2
// (x1,y1) - start point
// (dx1,dy1) - curve control point 1
// (dx2,dy2) - curve control point 2
// (x2,y2) - end point
Guide.prototype._path = 'M{0},{1} C{2},{3},{4},{5},{6},{7}';
Guide.prototype._arrowTemplate = '<svg width="{0}" height="{1}">\
<defs>\
<marker id="arrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">\
<path d="M2,1 L2,{3} L{3},6 L2,2" style="fill:{4};"></path>\
</marker>\
</defs>\
<path id="line" d="{2}" style="stroke:{4}; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);"></path>\
</svg>';
Guide.prototype.init = function() {
this.$guide = $('<div />', {
'class': 'guides-fade-in guides-guide ' + this._class,
'html': '<span>' + this.guide.html + '</span>'
});
this._position();
return this;
};
Guide.prototype._position = function () {
if (this.$highlightedElement && this.$highlightedElement.length > 0) {
this._attachToElement();
this.$guide.appendTo(this.$container);
this._renderArrow();
} else {
this._center();
}
this._scrollIntoView();
};
Guide.prototype._center = function () {
this.$guide
.css('visibility', 'hidden')
.appendTo(this.$container)
.addClass('guides-center')
.css({
left: 0,
right: 0,
textAlign: 'center',
top: (window.innerHeight / 2) - (this.$guide.outerHeight() / 2)
}).css('visibility', 'visible');
};
Guide.prototype._attachToElement = function () {
var elOffset = this.$highlightedElement.offset(),
docWidth = $('body').width(),
docHeight = $('body').height(),
leftSpace = elOffset.left,
topSpace = elOffset.top,
highlightedElementWidth = this.$highlightedElement.outerWidth(),
highlightedElementHeight = this.$highlightedElement.outerHeight(),
rightSpace = docWidth - leftSpace - highlightedElementWidth,
bottomSpace = docHeight - topSpace - highlightedElementHeight,
css = {
color: this._color,
top: docHeight / 2 > elOffset.top ? elOffset.top : 'auto',
left: docWidth / 2 > elOffset.left ? elOffset.left : 'auto',
right: docWidth / 2 > elOffset.left ? 'auto' : docWidth - elOffset.left - highlightedElementWidth,
bottom: docHeight / 2 > elOffset.top ? 'auto' : elOffset.bottom
};
switch (Math.max(leftSpace, rightSpace, topSpace, bottomSpace)) {
case leftSpace:
this.position = 'left';
css.paddingRight = this._distance;
css.right = $(document).width() - elOffset.left;
css.left = 'auto';
break;
case topSpace:
this.position = 'top';
css.paddingBottom = this._distance;
css.bottom = $(document).height() - elOffset.top;
css.top = 'auto';
break;
case rightSpace:
this.position = 'right';
css.paddingLeft = this._distance;
css.left = elOffset.left + highlightedElementWidth;
css.right = 'auto';
break;
default:
this.position = 'bottom';
css.paddingTop = this._distance;
css.top = elOffset.top + highlightedElementHeight;
css.bottom = 'auto';
break;
}
this.$guide.addClass('guides-' + this.position).css(css);
};
Guide.prototype._renderArrow = function() {
this._width = this.$guide.outerWidth();
this._height = this.$guide.outerHeight();
this.$guide.append(format(this._arrowTemplate,
this._width, this._distance, this[this.position](), this._arrowSize, this._color));
};
Guide.prototype.top = function () {
var coord = this._verticalAlign();
return this._getPath(coord);
};
Guide.prototype.bottom = function () {
var coord = this._verticalAlign(true);
return this._getPath(coord);
};
Guide.prototype.left = function () {
var coord = this._horizontalAlign();
return this._getPath(coord);
};
Guide.prototype.right = function () {
var coord = this._horizontalAlign(true);
return this._getPath(coord);
};
Guide.prototype._getPath = function (coord) {
return format(this._path, coord.x1, coord.y1, coord.dx1, coord.dy1, coord.dx2, coord.dy2, coord.x2, coord.y2);
};
Guide.prototype._getFluctuation = function () {
return Math.floor(Math.random() * 20) + 10;
};
Guide.prototype._verticalAlign = function (bottom) {
var x1 = this._width / 2,
y1 = bottom ? this._distance : 0,
x2 = Math.max(
Math.min(
this.$highlightedElement.offset().left + (this.$highlightedElement.outerWidth() / 2) - this.$guide.offset().left,
this._width - this._arrowSize),
this._arrowSize),
y2 = bottom ? this._arrowSize : this._distance - this._arrowSize;
return {
x1: x1,
y1: y1,
x2: x2,
y2: y2,
dx1: Math.max(0, Math.min(Math.abs((2 * x1) - x2) / 3, this._width) + this._getFluctuation()),
dy1: bottom
? Math.max(0, y2 + (Math.abs(y1 - y2) * 3 / 4))
: Math.max(0, y1 + (Math.abs(y1 - y2) * 3 / 4)),
dx2: Math.max(0, Math.min(Math.abs(x1 - (x2 * 3)) / 2, this._width) - this._getFluctuation()),
dy2: bottom
? Math.max(0, y2 + (Math.abs(y1 - y2) * 3 / 4))
: Math.max(0, y1 + (Math.abs(y1 - y2) * 3 / 4))
}
};
Guide.prototype._horizontalAlign = function (right) {
var x1 = right ? this._distance : this._width - this._distance,
y1 = this._height / 2,
x2 = right ? this._arrowSize : this._width - this._arrowSize,
y2 = Math.max(
Math.min(
this.$highlightedElement.offset().top + (this.$highlightedElement.outerHeight() / 2) - this.$guide.offset().top,
this._height - this._arrowSize),
this._arrowSize);
return {
x1: x1,
y1: y1,
x2: x2,
y2: y2,
dx1: right
? Math.max(0, x2 + (Math.abs(x1 - x2) * 3 / 4))
: Math.max(0, x1 + Math.abs(x1 - x2) * 3 / 4),
dy1: Math.max(0, Math.min(Math.abs((2 * y1) - y2) / 3, this._height) + this._getFluctuation()),
dx2: right
? Math.max(0, x2 + (Math.abs(x1 - x2) * 3 / 4))
: Math.max(0, x1 + Math.abs(x1 - x2) * 3 / 4),
dy2: Math.max(0, Math.min(Math.abs(y1 - (y2 * 3)) / 2, this._height) + this._getFluctuation())
}
};
Guide.prototype._scrollIntoView = function () {
if (this.$highlightedElement.length === 0) {
$('html,body').animate({
scrollTop: 0
}, 500);
return;
}
var guideOffset = this.$guide.offset(),
top = guideOffset.top,
bottom = guideOffset.top + this.$guide.outerHeight(),
left = guideOffset.left,
right = guideOffset.left + this.$guide.outerWidth(),
scrollTop = $(document).scrollTop(),
scrollLeft = $(document).scrollLeft();
//scroll vertically to element if it is not visible in the view port
if (scrollTop > top || scrollTop + $(window).height() < bottom) {
$('html,body').animate({
scrollTop: this.position === 'bottom' ? top - 100 : top
}, 500);
}
//scroll horizontally to element if it is not visible in the view port
if (scrollLeft > left || scrollLeft + $(window).width() < right) {
$('html,body').animate({
scrollLeft: this.position === 'righ' ? left - 100 : left
}, 500);
}
};
Guide.prototype.destroy = function() {
this.$highlightedElement.removeClass('guides-current-element');
this.$guide.remove();
};
module.exports = Guide;
\ No newline at end of file
var Guide = require('./Guide');
var Guides = function (element, options) {
this.element = element;
this.$element = $(element);
this.options = {};
this._current = 0;
this.setOptions(options);
if (element) {
this.$element.on('click.guides', $.proxy(this.start, this));
}
};
Guides.DEFAULTS = {
distance: 100,
color: '#fff',
cssClass: '',
guides: []
};
Guides.prototype.start = function(e) {
if (e) {
e.preventDefault();
}
if (this._isAlreadyRunning()) {
return this;
}
this._current = 0;
this._renderCanvas()
._renderGuide(this.options.guides[this._current])
._callback('start');
return this;
};
Guides.prototype.end = function() {
if (this.$canvas) {
this.$canvas.remove();
this.$canvas = null;
}
if (this._currentGuide) {
this._currentGuide.destroy();
this._currentGuide = null;
}
$(document).off('keyup.guides');
this._callback('end');
return this;
};
Guides.prototype.next = function () {
this._renderGuide(this.options.guides[++this._current])
._callback('next');
return this;
};
Guides.prototype.prev = function () {
if (!this._current) {
return;
}
this._renderGuide(this.options.guides[--this._current])
._callback('prev');
return this;
};
Guides.prototype.setOptions = function(options) {
if (typeof options !== 'object') {
return this;
}
this.options = $.extend({}, Guides.DEFAULTS, this.options, options);
};
Guides.prototype.destroy = function() {
this.end();
this.$element.off('click.guides');
this._callback('destroy');
return this;
};
Guides.prototype._callback = function (eventName) {
var callback = this.options[eventName],
eventObject = {
sender: this
};
if (this._currentGuide) {
eventObject.$element = this._currentGuide.guide.element;
eventObject.$guide = this._currentGuide.$element;
}
if ($.isFunction(callback)) {
callback.apply(this, [eventObject]);
}
};
Guides.prototype._isAlreadyRunning = function () {
return !!this.$canvas;
};
Guides.prototype._renderCanvas = function () {
this.$canvas = $('<div />', {
'class': 'guides-canvas guides-fade-in',
'html': '<div class="guides-overlay"></div><div class="guides-mask"></div>'
}).appendTo('body');
this._bindNavigation();
return this;
};
Guides.prototype._renderGuide = function (guide) {
if (!guide) { //no more guides
this.end();
return this;
}
if (this._currentGuide) {
this._currentGuide.destroy();
}
this._callback('render', guide);
if ($.isFunction(guide.render)) {
guide.render.apply(this, [guide]);
}
this._currentGuide = new Guide(guide, this.$canvas, this.options);
return this;
};
Guides.prototype._bindNavigation = function () {
this.$canvas.on('click.guides', $.proxy(this._onCanvasClick, this));
$(document).on('keyup.guides', $.proxy(this._onDocKeyUp, this));
return this;
};
Guides.prototype._onCanvasClick = function (e) {
this.next();
};
Guides.prototype._onDocKeyUp = function (e) {
switch (e.which) {
case 27: //esc
this.end();
break;
case 39: //right arrow
case 32: //space
this.next();
break;
case 37: //left arrow
case 8: //backspace
e.preventDefault();
this.prev();
break;
default:
break;
}
};
module.exports = Guides;
\ No newline at end of file
module.exports = function format () {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i + 1]);
}
return s;
};
\ No newline at end of file
var Guide = require('../src/modules/Guide');
describe('Guide class tests', function() {
var $element,
$container = $('<div></div>', {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
height: window.innerHeight,
width: window.innerWidth
}).appendTo('body'),
options = {
color: '#fff',
cssClass: '',
distance: 100
};
beforeEach(function () {
$element = $('<div>Test</div>', {position: 'absolute'}).appendTo('body');
});
afterEach(function () {
$element.remove();
});
it('auto positions - right', function() {
$element.width(20);
$element.height(window.innerHeight);
$element.offset({top: 0, left: 0});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
expect(guide.position).toBe('right');
});
it('auto positions - bottom', function() {
$element.width(window.innerWidth);
$element.height(20);
$element.offset({top: 0, left: 0});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
expect(guide.position).toBe('bottom');
});
it('auto positions - left', function() {
$element.width(20);
$element.height(window.innerHeight);
$element.offset({
top: 0,
left: $(document).width() - $element.width()
});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
expect(guide.position).toBe('left');
});
it('auto positions - top', function() {
$element.width(window.innerWidth);
$element.height(20);
$element.offset({
top: $(document).height() - $element.height(),
left: 0
});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
expect(guide.position).toBe('top');
});
it('creates an svg with a curve that fits the container (top)', function() {
$element.width(window.innerWidth);
$element.height(20);
$element.offset({
top: $(document).height() - $element.height(),
left: 0
});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
var coord = guide._verticalAlign();
expect(coord.x1 < 0).toBe(false);
expect(coord.x1 > this._width).toBe(false);
expect(coord.y1 < 0).toBe(false);
expect(coord.y1 > this._distance).toBe(false);
expect(coord.dx1 < 0).toBe(false);
expect(coord.dx1 > this._width).toBe(false);
expect(coord.dy1 < 0).toBe(false);
expect(coord.dy1 > this._distance).toBe(false);
});
it('creates an svg with a curve that fits the container (bottom)', function() {
$element.width(window.innerWidth);
$element.height(20);
$element.offset({top: 0, left: 0});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
var coord = guide._verticalAlign();
expect(coord.x1 < 0).toBe(false);
expect(coord.x1 > this._width).toBe(false);
expect(coord.y1 < 0).toBe(false);
expect(coord.y1 > this._distance).toBe(false);
expect(coord.dx1 < 0).toBe(false);
expect(coord.dx1 > this._width).toBe(false);
expect(coord.dy1 < 0).toBe(false);
expect(coord.dy1 > this._distance).toBe(false);
});
it('creates an svg with a curve that fits the container (left)', function() {
$element.width(20);
$element.height(window.innerHeight);
$element.offset({
top: 0,
left: $(document).width() - $element.width()
});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
var coord = guide._verticalAlign();
expect(coord.x1 < 0).toBe(false);
expect(coord.x1 > this._width).toBe(false);
expect(coord.y1 < 0).toBe(false);
expect(coord.y1 > this._distance).toBe(false);
expect(coord.dx1 < 0).toBe(false);
expect(coord.dx1 > this._width).toBe(false);
expect(coord.dy1 < 0).toBe(false);
expect(coord.dy1 > this._distance).toBe(false);
});
it('creates an svg with a curve that fits the container (right)', function() {
$element.width(20);
$element.height(window.innerHeight);
$element.offset({top: 0, left: 0});
guide = new Guide({
element: $element,
html: 'Magna esse aliquet laborum et felis euismod'
}, $container, options);
var coord = guide._verticalAlign();
expect(coord.x1 < 0).toBe(false);
expect(coord.x1 > this._width).toBe(false);
expect(coord.y1 < 0).toBe(false);
expect(coord.y1 > this._distance).toBe(false);
expect(coord.dx1 < 0).toBe(false);
expect(coord.dx1 > this._width).toBe(false);
expect(coord.dy1 < 0).toBe(false);
expect(coord.dy1 > this._distance).toBe(false);
});
});
\ No newline at end of file
var Guides = require('../src/modules/Guides');
describe("Guides class tests", function() {
var $element = $('<div>Test</div>', {position: 'fixed'}).appendTo('body'),
guides;
$element.width(window.innerWidth);
$element.height(20);
$element.offset({top: 0, left: 0});
beforeEach(function (done) {
guides = new Guides($element, {
guides: [{
element: $element,
html: 'Welcome to Guides.js'
}, {
element: $element,
html: 'Navigate through guides.js website'
}, {
element: $element,
html: 'See how it works'
}, {
element: $element,
html: 'Download guides.js'
}, {
element: $element,
html: 'Check out how to get started with guides.js'
}, {
element: $element,
html: 'Read the docs'
}]
});
done();
});
afterEach(function (done) {
guides.destroy();
done();
});
it('only one element is created if start is called twice', function() {
guides.start().start();
expect($('.guides-canvas').length).toBe(1);
});
it('does not throw an error if a method other than start is called before start', function() {
expect(guides.next).not.toThrow(Error);
expect(guides.prev).not.toThrow(Error);
expect(guides.end).not.toThrow(Error);
expect(guides.destroy).not.toThrow(Error);
});
it('sets the correct step when the start method is called', function() {
guides.start();
expect(guides._current).toBe(0);
});
it('sets the correct step when the next method is called', function() {
guides.start().next();
expect(guides._current).toBe(1);
});
it('sets the correct step when the prev method is called', function() {
guides.start().next().prev();
expect(guides._current).toBe(0);
});
it('removes dom elements when the end method is called', function() {
guides.start().end();
expect(guides.$canvas).toBe(null);
expect($('.guides-canvas').length).toBe(0);
});
it('sets the new options correctly when setOptions method is called', function() {
guides.setOptions({
start: function () {}
});
expect(typeof guides.options.guides).toBe('object');
expect(typeof guides.options.start).toContain('function');
});
it('calls event handlers', function() {
var test = 0;
guides.setOptions({
start: function () {
test = 1;
}
});
guides.start();
expect(test).toBe(1);
});
it('uses guide color setting', function() {
guides.options.color = 'red';
guides.options.guides[0].color = 'blue';
guides.start();
expect(guides._currentGuide._color).toBe('blue');
});
it('falls back to global color setting', function() {
guides.setOptions({
color: 'red'
});
guides.start();
expect(guides._currentGuide._color).toBe('red');
});
it('removes dom elements when destroy method is called', function() {
guides.start().destroy();
expect(guides.$canvas).toBe(null);
expect($('.guides-canvas').length).toBe(0);
});
});
\ No newline at end of file
var format = require('../src/modules/format');
describe("format string function tests", function() {
it("keeps the string the same if there are no placeholders", function() {
expect(format('ala bala', 'portokala')).toBe('ala bala');
});
it("keeps the string the same if there are no placeholders and no arguments", function() {
expect(format('ala bala')).toBe('ala bala');
});
it("keeps the string the same if there are no arguments", function() {
expect(format('ala {0} bala')).toBe('ala {0} bala');
});
it("formats correcly {0} {1}", function() {
expect(format('{0} {1}', 'ala', 'bala')).toBe('ala bala');
});
it("formats correcly {1} {0}", function() {
expect(format('{1} {0}', 'ala', 'bala')).toBe('bala ala');
});
it("formats correcly {1} {1} {0}", function() {
expect(format('{1} {1} {0}', 'ala', 'bala')).toBe('bala bala ala');
});
});
\ No newline at end of file
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" />
{% block headMedia %}{% endblock %} {% block headMedia %}{% endblock %}
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.css' %}">
</head> </head>
<body class="hold-transition skin-yellow sidebar-mini"> <body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>--> <!-- <div id="map" class="map" tabindex="0"> </div>-->
...@@ -54,6 +56,11 @@ ...@@ -54,6 +56,11 @@
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<div class="navbar-custom-menu"> <div class="navbar-custom-menu">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
{% block help %}
<li>
<a id="initGuide"><i class="fa fa-question-circle"></i></a>
</li>
{% endblock %}
<li> <li>
{% if request.user.is_superuser or request.user.is_staff %} {% if request.user.is_superuser or request.user.is_staff %}
<a href="../../../administration" title="super user"><i <a href="../../../administration" title="super user"><i
...@@ -73,17 +80,17 @@ ...@@ -73,17 +80,17 @@
{#% block tasks %}{% endblock %#} {#% block tasks %}{% endblock %#}
<!-- </li> --> <!-- </li> -->
<!-- History --> <!-- History -->
<li class="dropdown user user-menu"> <li class="dropdown user user-menu" id="panelHistory">
{% block history %} {% block history %}
{% endblock %} {% endblock %}
</li> </li>
<!-- History --> <!-- History -->
<!-- User Account: style can be found in dropdown.less --> <!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu"> <li class="dropdown user user-menu" id="panelUser">
{% block user %}{% endblock %} {% block user %}{% endblock %}
</li> </li>
<!-- Control Sidebar Toggle Button --> <!-- Control Sidebar Toggle Button -->
<li>{% if showcart %} <li id="panelShowCart">{% if showcart %}
<a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i <a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i
class="fa fa-shopping-cart"></i></a> class="fa fa-shopping-cart"></i></a>
{% endif %} {% endif %}
...@@ -210,6 +217,7 @@ ...@@ -210,6 +217,7 @@
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script> <script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
<!-- Fengyuan Chen's Datepicker --> <!-- Fengyuan Chen's Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
<script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}" type="text/javascript"></script>
{% block footer %}{% endblock %} {% block footer %}{% endblock %}
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
<div id="ol"></div> <div id="ol"></div>
...@@ -223,6 +231,44 @@ ...@@ -223,6 +231,44 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<script>
$('#initGuide').guides({
guides: [{
element: $('#searchPolygon'),
html: 'Search Region'
},{
element: $('#searchProcess'),
html: 'Select the search process'
},{
element: $('#searchDate'),
html: 'Select the date to search'
},{
element: $('#searchCloud'),
html: 'Select the percentage of clouds to search'
},{
element: $('#search-btn'),
html: 'search button'
},{
element: $('#panelUser'),
html: 'User Panel',
render: function () {
setTimeout(() => {
$('.guides-left').css('right', '90px');
});
}
}, {
element: $('#panelShowCart'),
html: 'Show Cart',
render: function () {
setTimeout(() => {
$('.guides-left').css('right', '40px');
});
}
}
]
});
</script>
</body> </body>
</html> </html>
This diff is collapsed.
...@@ -129,6 +129,10 @@ ...@@ -129,6 +129,10 @@
</div> </div>
<!-- form-group--> <!-- form-group-->
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
...@@ -152,7 +156,8 @@ ...@@ -152,7 +156,8 @@
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title">{{ product.process }}: {{ product.aggreg_date }}</h3> <h3 class="box-title">{{ product.process }}: {{ product.aggreg_date }}</h3>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<span class="badge bg-green">Price ${{ product.price }}</span> <!-- <span class="badge bg-green">Price ${{ product.price }}</span> -->
<span class="badge bg-green">0.00</span>
<button type="button" class="btn btn-box-tool" data-widget="collapse"> <button type="button" class="btn btn-box-tool" data-widget="collapse">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
...@@ -203,7 +208,8 @@ ...@@ -203,7 +208,8 @@
</tr> </tr>
<tr> <tr>
<th>Total price:</th> <th>Total price:</th>
<td>${{ total_price }}</td> <!-- <td>${{ total_price }}</td> -->
<td>0.00</td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
...@@ -219,7 +225,7 @@ ...@@ -219,7 +225,7 @@
</tfoot> </tfoot>
</table> </table>
<div class="text-center"> <div class="text-center">
<a href="../pay" class="btn btn-danger">PAY <a href="../pay" class="btn btn-danger">PROCESS
<!--input type="image" <!--input type="image"
src="https://www.sandbox.paypal.com/es_XC/MX/i/btn/btn_buynowCC_LG.gif" src="https://www.sandbox.paypal.com/es_XC/MX/i/btn/btn_buynowCC_LG.gif"
border="0" name="submit" border="0" name="submit"
...@@ -229,7 +235,7 @@ ...@@ -229,7 +235,7 @@
height="1"--> height="1"-->
</a> </a>
<!--
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post"> <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1"> <input type="hidden" name="upload" value="1">
...@@ -269,7 +275,7 @@ ...@@ -269,7 +275,7 @@
<input type="email" name="payer_email" value=""> <input type="email" name="payer_email" value="">
<input type="submit"> <input type="submit">
</form> </form>
-->
</div> </div>
</div> </div>
......
...@@ -10,7 +10,7 @@ from django.http import HttpResponse, JsonResponse, HttpResponseRedirect ...@@ -10,7 +10,7 @@ from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
from django.urls import reverse from django.urls import reverse
from django.views.generic.base import View from django.views.generic.base import View
from django.template import loader, RequestContext from django.template import loader, RequestContext
from django.contrib.auth.models import User from django.contrib.auth.models import User, Permission
import requests, json, unicodedata, sys, base64 import requests, json, unicodedata, sys, base64
import os import os
from geosentinel import APISentinel, polygonToBox from geosentinel import APISentinel, polygonToBox
...@@ -57,10 +57,17 @@ def map(request): ...@@ -57,10 +57,17 @@ def map(request):
""" """
View function for home page of site. View function for home page of site.
""" """
if Permission.objects.filter(user=request.user.id):
advanced_search = True
else:
advanced_search = False
form = ASFSearchForm(request.POST) form = ASFSearchForm(request.POST)
showcart = True showcart = True
# Render the HTML template index.html with the data in the context variable # Render the HTML template index.html with the data in the context variable
return render(request, 'map.html', {"searchForm": form, "showcart": showcart}) return render(request, 'map.html', {"searchForm": form, "showcart": showcart,"advanced_search":advanced_search})
# ------------------------------------------------------------------------------- # -------------------------------------------------------------------------------
...@@ -620,11 +627,18 @@ def Registration(request): ...@@ -620,11 +627,18 @@ def Registration(request):
return HttpResponse("the username or password already exist") return HttpResponse("the username or password already exist")
else: else:
print("agregado") print("agregado")
User.objects.create_user(first_name=request.POST['name'],last_name=request.POST['last_name'],username=request.POST['username'], user = User.objects.create_user(first_name=request.POST['name'],last_name=request.POST['last_name'],username=request.POST['username'],
email=request.POST['email'], email=request.POST['email'],
password=request.POST['password'], is_active=False) password=request.POST['password'], is_active=False)
permissions = Permission.objects.filter(content_type__app_label='auth',
codename__in=[
'advanced_search'
])
user.user_permissions.add(*permissions.filter(content_type__model='user'))
message = "your registration is being processed" message = "your registration is being processed"
subject = "Registro RepSat" subject = "Registro RepSat"
wsMail2(request.POST['email'],request.POST['username'],message,subject) wsMail2(request.POST['email'],request.POST['username'],message,subject)
messages.success(request, 'your registration is being processed') messages.success(request, 'your registration is being processed')
return HttpResponseRedirect('login') return HttpResponseRedirect('login')
.map {
height: 400px;
width: 100%;
}
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
......
...@@ -217,3 +217,37 @@ select::-ms-expand { ...@@ -217,3 +217,37 @@ select::-ms-expand {
-o-transition: .25s all ease; -o-transition: .25s all ease;
transition: .25s all ease; transition: .25s all ease;
} }
.arrow_box {
position: relative;
background: #ffffff;
border: 1px solid #ffa74f;
min-height: 30px;
bottom: 10px;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(255, 167, 79, 0);
border-top-color: #ffa74f;
border-width: 11px;
margin-left: -11px;
}
...@@ -25,9 +25,8 @@ function refresh() { ...@@ -25,9 +25,8 @@ function refresh() {
dataType: "json", dataType: "json",
url: '../reports/ws/process_progress', url: '../reports/ws/process_progress',
success: function (data) { success: function (data) {
$.each(data, function (key, val) { $.each(data, function (key, val) {
//console.log(key+ " purchase_id:"+val.purchase_id+", progress: "+val.progress); //~ console.log(key+ " purchase_id:"+val.purchase_id+", progress: "+val.progress);
if (val.progress != 100) { if (val.progress != 100) {
$('#progress_bar' + val.purchase_id).attr("aria-valuenow", val.progress); $('#progress_bar' + val.purchase_id).attr("aria-valuenow", val.progress);
$('#progress_bar' + val.purchase_id).attr('style', 'width:' + val.progress + '%'); $('#progress_bar' + val.purchase_id).attr('style', 'width:' + val.progress + '%');
...@@ -37,6 +36,8 @@ function refresh() { ...@@ -37,6 +36,8 @@ function refresh() {
$('#action_buttons' + val.purchase_id).attr("class", "hidden"); $('#action_buttons' + val.purchase_id).attr("class", "hidden");
$('#main_progess' + val.purchase_id).removeClass("hidden"); $('#main_progess' + val.purchase_id).removeClass("hidden");
$('#main_progess' + val.purchase_id).attr("class", "progress"); $('#main_progess' + val.purchase_id).attr("class", "progress");
$('#textprogress'+ val.purchase_id).empty();
$('#textprogress'+ val.purchase_id).append(val.progress_text);
} }
else { else {
//$('#progress_bar' + val.purchase_id).attr("class", "progress-bar progress-bar-success progress-bar-striped"); //$('#progress_bar' + val.purchase_id).attr("class", "progress-bar progress-bar-success progress-bar-striped");
......
...@@ -108,6 +108,10 @@ ...@@ -108,6 +108,10 @@
{% include 'aside.html' %} {% include 'aside.html' %}
<!-- form-group--> <!-- form-group-->
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
......
...@@ -151,6 +151,10 @@ ...@@ -151,6 +151,10 @@
</div> </div>
<!-- form-group--> <!-- form-group-->
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
...@@ -215,8 +219,8 @@ ...@@ -215,8 +219,8 @@
class="progress-bar progress-bar-warning progress-bar-striped active" class="progress-bar progress-bar-warning progress-bar-striped active"
aria-valuemin="0" aria-valuemax="100" aria-valuemin="0" aria-valuemax="100"
style="width:{{ product.progress }}%"> style="width:{{ product.progress }}%">
<p style="color: #0a0a0a"> <p id="textprogress{{ product.purchase_id }}" style="color: #0a0a0a">
Downloading Downloading...
</p> </p>
</div> </div>
</div> </div>
......
...@@ -210,6 +210,7 @@ def Reports(request): ...@@ -210,6 +210,7 @@ def Reports(request):
# ------------------------------------------------------------------------ # ------------------------------------------------------------------------
def wsProcessProgress(request): def wsProcessProgress(request):
print(request);
if request.is_ajax(): if request.is_ajax():
progress = 0 progress = 0
productList2 = [] productList2 = []
...@@ -223,19 +224,37 @@ def wsProcessProgress(request): ...@@ -223,19 +224,37 @@ def wsProcessProgress(request):
##################################################### #####################################################
# progress bar # # progress bar #
##################################################### #####################################################
progress_text = ""
if os.stat(log_info).st_size == 0: if os.stat(log_info).st_size == 0:
progress = 0 progress = 0
else: else:
if 'Linking Products...' in open(log_info).read(): if 'Starting Process...' in open(log_info).read():
progress = 10
progress_text = 'Processing...'
if 'Creating Shape file...' in open(log_info).read():
progress = 20 progress = 20
progress_text = 'Creating Shape file...'
if 'Linking Products...' in open(log_info).read():
progress = 30
progress_text = 'Linking Products...'
if 'Merging Images...' in open(log_info).read(): if 'Merging Images...' in open(log_info).read():
progress = 40 progress = 40
if 'Deleting Images...' in open(log_info).read(): progress_text = 'Merging Images...'
if 'Applying Mask...' in open(log_info).read():
progress = 50 progress = 50
progress_text = 'Applying Mask...'
if 'Extracting SCL information...' in open(log_info).read(): if 'Extracting SCL information...' in open(log_info).read():
progress = 60 progress = 60
progress_text = 'Extracting SCL information...'
if 'Spliting SCL image...' in open(log_info).read():
progress = 70
progress_text = 'Spliting SCL image...'
if 'Creating Tiles...' in open(log_info).read():
progress = 90
progress_text = 'Creating Tiles...'
if 'Finalizing...' in open(log_info).read(): if 'Finalizing...' in open(log_info).read():
progress = 100 progress = 100
progress_text = 'Finalizing...'
# item = Purchase.objects.get(pk=producto['id']) # item = Purchase.objects.get(pk=producto['id'])
# item.progress = progress # item.progress = progress
...@@ -244,6 +263,7 @@ def wsProcessProgress(request): ...@@ -244,6 +263,7 @@ def wsProcessProgress(request):
productList2.append({ productList2.append({
"purchase_id": producto['id'], "purchase_id": producto['id'],
"progress": progress, "progress": progress,
"progress_text":progress_text,
}) })
progress = 0 progress = 0
...@@ -258,6 +278,7 @@ def wsProcessProgress(request): ...@@ -258,6 +278,7 @@ def wsProcessProgress(request):
# }) # })
return HttpResponse(json.dumps(productList2)) return HttpResponse(json.dumps(productList2))
else: else:
print("Error Http404")
raise Http404 raise Http404
......
...@@ -45,3 +45,4 @@ $(document).ready(function () { ...@@ -45,3 +45,4 @@ $(document).ready(function () {
order: [1, 'asc'] order: [1, 'asc']
}); });
}); });
...@@ -112,6 +112,9 @@ ...@@ -112,6 +112,9 @@
{% include 'users_aside.html' %} {% include 'users_aside.html' %}
{% endblock %} {% endblock %}
{% block help %}
{% endblock %}
{% block user %} {% block user %}
{% include "user_button.html" %} {% include "user_button.html" %}
{% endblock %} {% endblock %}
......
{% load staticfiles %} {% load staticfiles %}
<style>
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f38e19;
}
input:focus + .slider {
box-shadow: 0 0 1px #f38e19;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 14px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<div class="col-md-3"> <div class="col-md-3">
{% for data in user_data %} {% for data in user_data %}
...@@ -30,6 +92,23 @@ ...@@ -30,6 +92,23 @@
<i class="fa fa-pie-chart margin-r-5"></i> <b>Disk usage</b> <a <i class="fa fa-pie-chart margin-r-5"></i> <b>Disk usage</b> <a
class="pull-right">{{ data.size }}</a> class="pull-right">{{ data.size }}</a>
</li> </li>
<li class="list-group-item">
<div class="row ccontent ">
<div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 col-xl-10">
<i class="fa fa-search-plus margin-r-5"></i>
<b>Advanced Search</b>
</div>
<div class="col-md-2 col-xs-2 col-lg-2 col-sm-2 col-xl-2 pull-right">
<label class="switch">
<input class="pull-right" id="{{ data.user_id }}" type="checkbox"
onclick="change_permission({{ data.user_id }})"
{% if data.advanced_search == True %} checked {% endif %}>
<span class="slider round pull-right" style="margin-right: 0px"></span>
</label>
</div>
</div>
</li>
</ul> </ul>
<!--a href="#" class="btn btn-primary btn-block"><b>Follow</b></a--> <!--a href="#" class="btn btn-primary btn-block"><b>Follow</b></a-->
...@@ -52,10 +131,10 @@ ...@@ -52,10 +131,10 @@
<div class="box-body"> <div class="box-body">
<ul class="list-group list-group-unbordered"> <ul class="list-group list-group-unbordered">
{% for data in user_searches %} {% for data in user_searches %}
<li class="list-group-item"> <li class="list-group-item">
<i class="fa fa-map-marker margin-r-5"></i> <b>{{ data.search_name }}</b> <a <i class="fa fa-map-marker margin-r-5"></i> <b>{{ data.search_name }}</b> <a
class="pull-right">{{ data.count }}</a> class="pull-right">{{ data.count }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
...@@ -64,6 +143,29 @@ ...@@ -64,6 +143,29 @@
</div> </div>
<!-- /.box --> <!-- /.box -->
<div><br></div>
</div> </div>
<script>
function change_permission(user_id) {
var checkBox = document.getElementById(user_id);
if (checkBox.checked == true) {
permission(user_id, 'True');
} else {
permission(user_id, 'False');
}
}
function permission(user_id, status) {
$.ajax({
dataType: "json",
url: 'ws/change_permission',
data: {'user_id': user_id, 'status': status},
success: function (data) {
alert(data);
}
});
}
</script>
\ No newline at end of file
...@@ -27,5 +27,6 @@ urlpatterns = [ ...@@ -27,5 +27,6 @@ urlpatterns = [
url(r'^$', views.Users, name='users'), url(r'^$', views.Users, name='users'),
url(r'^(?P<user_id>(\d+))/$', views.User_id, name='user_id'), url(r'^(?P<user_id>(\d+))/$', views.User_id, name='user_id'),
url(r'^ws/report_table$', views.wsPurchasesPM, name='wsPurchasesPM'), url(r'^ws/report_table$', views.wsPurchasesPM, name='wsPurchasesPM'),
url(r'^ws/change_permission', views.wsChangePermission, name='wsChangePermission'),
] ]
# + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) # + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
import calendar import calendar
import os import os
from django.contrib.auth.models import User from django.contrib.auth.models import User, Permission
from django.db.models import Count from django.db.models import Count
from django.http import HttpResponse, Http404 from django.http import HttpResponse, Http404
from django.shortcuts import render from django.shortcuts import render
# Create your views here. # Create your views here.
import json import json
...@@ -35,6 +36,15 @@ def Users(request): ...@@ -35,6 +36,15 @@ def Users(request):
purchases = Purchase.objects.filter(user_id=user.id) purchases = Purchase.objects.filter(user_id=user.id)
in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100) in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100)
if Permission.objects.filter(user=user.id):
advanced_search = True
else:
advanced_search = False
print (advanced_search)
#bytes_size = 0 #bytes_size = 0
#for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/" + user.email): #for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/" + user.email):
# for filename in files: # for filename in files:
...@@ -50,11 +60,11 @@ def Users(request): ...@@ -50,11 +60,11 @@ def Users(request):
"searches": searches.count(), "searches": searches.count(),
"purchases": purchases.count(), "purchases": purchases.count(),
"in_process": in_process.count(), "in_process": in_process.count(),
#"size": size_repsat, "advanced_search" : advanced_search,
}) })
for search in Search.objects.values('search_name').filter(user_id=user.id).annotate( for search in Search.objects.values('search_name').filter(user_id=user.id).annotate(
count=Count('search_name')).order_by('-count')[:6]: count=Count('search_name')).order_by('-count')[:5]:
user_searches.append({ user_searches.append({
"search_name": search['search_name'], "search_name": search['search_name'],
"count": search['count'], "count": search['count'],
...@@ -173,7 +183,7 @@ def User_id(request, user_id): ...@@ -173,7 +183,7 @@ def User_id(request, user_id):
}) })
for search in Search.objects.values('search_name').filter(user_id=user.id).annotate( for search in Search.objects.values('search_name').filter(user_id=user.id).annotate(
count=Count('search_name')).order_by('-count')[:6]: count=Count('search_name')).order_by('-count')[:5]:
user_searches.append({ user_searches.append({
"search_name": search['search_name'], "search_name": search['search_name'],
"count": search['count'], "count": search['count'],
...@@ -338,3 +348,52 @@ def best_unit_size(bytes_size): ...@@ -338,3 +348,52 @@ def best_unit_size(bytes_size):
return str(round(bu_size, 2)) + " " + unit return str(round(bu_size, 2)) + " " + unit
# ------------------------------------------------ # ------------------------------------------------
@csrf_exempt
def wsChangePermission(request):
if request.is_ajax():
table_data = []
data = Purchase.objects.values('user_id', 'search__endDate', 'search__startDate', 'aggreg_date',
'search__process_id__name', 'name').filter(
user_id=request.POST.get('user_id'), purchased=True,
aggreg_date__month=to_if(request.POST.get('title'))).order_by('aggreg_date')
for producto in data:
table_data.append({
"search_name": producto['name'],
"process": producto['search__process_id__name'],
"purchase_date": str(producto['aggreg_date'])[:10],
"startDate": str(producto['search__startDate'])[:10],
"endDate": str(producto['search__endDate'])[:10],
})
return HttpResponse(json.dumps(table_data))
# return HttpResponse({'table_data':table_data})
else:
raise Http404
pass
#----------------------------------------------
@csrf_exempt
def wsChangePermission(request):
if request.is_ajax():
permissions = Permission.objects.filter(content_type__app_label='auth',
codename__in=[
'advanced_search'
])
user = User.objects.get(pk=request.GET.get("user_id"))
if request.GET.get("status") == 'True':
print ("verdadero")
user.user_permissions.add(*permissions.filter(content_type__model='user'))
else:
print ("falso")
user.user_permissions.remove(*permissions.filter(content_type__model='user'))
return HttpResponse("hola")
else:
raise Http404
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment