Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • faproietti/XRF-App
  • chnet/XRF-App
2 results
Show changes
Showing
with 7064 additions and 1383 deletions
import { Image } from "./image";
import { Chart } from "./chart";
import { Fs } from "./fs";
import { CallbackManager } from "./callbacks"
import $ = require("jquery");
class ImportFile {
private image: Image;
private chart: Chart;
private fs: Fs;
private callbackManager: CallbackManager;
constructor(drawImage: Image, drawChart: Chart) {
this.image = drawImage;
this.chart = drawChart;
this.fs = new Fs();
this.callbackManager = new CallbackManager();
}
//funzione che definisce tutti gli elementi responsabili dell'apertura di un file.
//Sono definiti quindi l'albero e il bottone per l'importazione da locale
setImportFile() {
// genero e leggo il contenuto della directory "filesystem"
// comment out waiting to properly address the request
// let xmlDoc: Document;
// let xmlListingFile: any = new XMLHttpRequest();
// xmlListingFile.open("PROPFIND", "CHNET/", false);
// xmlListingFile.setRequestHeader("Depth", "infinity");
// xmlListingFile.onreadystatechange = function () {
// if (xmlListingFile.readyState === 4) {
// if (xmlListingFile.status === 207) {
// let parser = new DOMParser();
// xmlDoc = parser.parseFromString(xmlListingFile.responseText, "text/xml");
// }
// }
// }
// xmlListingFile.send(null);
//ora genero l'albero e definisco l'evento in caso di selezione di un nodo
// jQuery(document.getElementById('FileTreeview')).treeview({ data: this.fs.generateTree(xmlDoc) });
// $('#FileTreeview').on('nodeSelected', (e, node) => {
// if (node['url'] != undefined) {
// $("#load-spinner").css("display", "inline");
// this.fs.openFileFromServer(node['url']);
// }
// });
// import a local file
let fileInputButton: any = document.getElementById("myImport");
fileInputButton.onchange = () => {
this.callbackManager.showElement("load-spinner", true);
let file: File = fileInputButton.files[0];
let readerObject = new FileReader();
readerObject.onload = () => {
let content = readerObject.result;
let image = this.fs.readImage(this.image, this.chart, content);
this.callbackManager.showElement("load-spinner", false);
this.image.drawImg({ x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth,
() => { this.callbackManager.closeBootstrapModel("btnCloseModal"); });
this.chart.drawChart(image, { x: 0, y: 0 }, { x: image.width - 1, y: image.height - 1 }, 0, image.channelDepth);
};
readerObject.readAsText(file);
};
}
//funzione per la compressione della sidenav sx
compressingSidenav() {
let fsLabel = document.getElementById("collapse-symbol");
let isClosedfs = false;
let fsLabel_cross = () => {
if (isClosedfs == true) {
isClosedfs = false;
console.log("closed");
$(".w3-bar-block").css("width", "65px");
$(".text-sidenav").css("display", "none");
document.getElementById("collapse-symbol").title = "Open Sidebar";
document.getElementById("collapse-symbol").classList.replace("fa-angle-double-left", "fa-angle-double-right");
} else {
isClosedfs = true;
$(".w3-bar-block").css("width", "200px");
$(".text-sidenav").css("display", "inline");
document.getElementById("collapse-symbol").title = "Close Sidebar";
document.getElementById("collapse-symbol").classList.replace("fa-angle-double-right", "fa-angle-double-left");
}
};
fsLabel.addEventListener("mousedown", fsLabel_cross, false);
}
//funzione che definisce l'area su cui si può eseguire il drag&drop
makeDroppable(droppableArea) {
//creo l'elemento "input type file" non visibile e lo aggiungo a "droppableArea"
let input: any = document.createElement("input");
input.type = "file";
input.multiple = true;
input.style.display = "none";
droppableArea.appendChild(input);
//questo evento è chiamato quando i file sono trascinati ma non ancora lasciati
droppableArea.addEventListener("dragover", function (e) {
e.preventDefault(); //impediamo l'apertura del file
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
droppableArea.classList.add("dragover");
});
//l'evento è chiamato quando un file lascia la zona predefinita per il drag&drop
droppableArea.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
droppableArea.classList.remove("dragover");
});
//questo evento si innesca quando il drop è effettivamente avvenuto
droppableArea.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
droppableArea.classList.remove("dragover");
this.callback(e.dataTransfer.files, this.image, this.chart);
});
}
//funzione chiamata in caso di drag&drop responsabile dell'apertura del file droppato,
//della sua lettura e del passaggio del suo contenuto alla funzione readData()
private callback(files, drawImage: Image, drawChart: Chart, fs: Fs) {
this.callbackManager.showElement("load-spinner", true);
let file: File = files[files.length - 1];
console.log("Try to open " + file.name + " ...");
let readerObject = new FileReader();
readerObject.onload = () => {
let content = readerObject.result;
fs.readImage(drawImage, drawChart, content);
this.callbackManager.showElement("load-spinner", false);
};
readerObject.readAsText(file);
}
}
export { ImportFile };
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<!--Compatibilità con Microsoft e Responsività-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XRF analysis viewer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- CSS -->
<link href="src/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<h3> File Manager </h3>
<div id="FileTreeview"></div>
</nav>
<!--NavBar-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> XRF Analysis Viewer</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- INIZIO DELLA PAGINA -->
<div class="container-fluid text-center">
<!--Titolo-->
<div class="page-header well"><h1>XRF analysis viewer</h1></div>
<!--Contenuto-->
<!--Pannello drag and drop-->
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default droppable" dropzone="copy f:text/plain">
<div class="panel-body">
<h4>Trascina qua il file da aprire o clicca per sceglere il file dal server</h4>
</div>
</div>
</div>
</div>
<div class="row"> <!-- row content-->
<!-- PRIMA COLONNA -->
<div class="col-sm-2 sidenav">
<button id="reset" class="btn">Reset</button>
<p><div class="panel-group">
<!--opzioni mapppa-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Image Options</a></h4>
</div>
<div id="collapse1" class="panel-collapse in">
<div class="panel-body">
<p><button type="button" class="btn" id="rePlot">Re-color</button></p>
<div class="panel panel-default sliderPannel">
<p> Saturation and contrast control: </p>
<input type="range" id="SaturationSlider" value="100">
</div>
<div class="panel panel-default sliderPannel">
<p> XRF Image Transparency: </p>
<input type="range" id="TrasparencySlider" value="0">
</div>
</div>
</div>
</div>
<!--Opzioni spettro-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse2">Spectrum Options</a></h4>
</div>
<div id="collapse2" class="panel-collapse in">
<div class="panel-body">
<p>Scale:<div class="btn-group">
<button ype="button" class="btn" id="setlinearButton">Linear</button>
<button ype="button" class="btn" id="setlogButton">Log</button>
</div></p>
<p>X Axis Label:<div class="btn-group">
<button ype="button" class="btn" id="setEnergyButton">Energy</button>
<button ype="button" class="btn" id="setChannelsButton">Channels</button>
</div></p>
</div>
</div>
</div>
<!--selezione elemento / picco-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse3">Peak and Element Selection</a></h4>
</div>
<div id="collapse3" class="panel-collapse in">
<div class="panel-body">
<div class="form-group">
<label for="spinBoxMin">Peak selection (only calibrated)</label>
<input type="number" class="form-control" id="spinBoxMin" min="0" max="55" step="0.01">
<input type="number" class="form-control" id="spinBoxMax" min="0" max="55" step="0.01">
<button id="readSpinbox" class="btn">Select range</button>
</div>
<p><div class="form-group">
<label for="elementSelect">Inspect element:</label>
<select class="form-control" id="elementSelect" onchange="setElement()">
<option value="0">- select -</option>
<option value="1">Ca</option>
<option value="2">Pb</option>
<option value="3">Hg</option>
<option value="4">Fe</option>
<option value="5">Cu</option>
<option value="6">Zn</option>
<option value="7">Ti</option>
<option value="8">K</option>
<option value="9">Co</option>
</select>
</div></p>
</div>
</div>
</div>
<!--esportazione mappa e spettro-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse4">Export Image and Spectrum</a></h4>
</div>
<div id="collapse4" class="panel-collapse in">
<div class="panel-body">
<p><a href="#" id="ExportImage" download="Canvas.jpg">
<button type="button" class="btn" id="ExportImage">Export Image</button>
</a></p>
<p><a href="#" id="ExportGraph" download="Graphs.png">
<button type="button" class="btn" id="ExportGraph">Export Graph</button>
</a></p>
</div>
</div>
</div>
</div></p>
</div>
<!--MAPPA-->
<div class="col-sm-3 text-left">
<div class="well" id="mappa-pannel">
<h2>XRF Image</h2>
<a href="#" id="Set-Map" data-title="set-map" data-toggle="clickover" data-placement="bottom"><span class="glyphicon glyphicon-cog"></span></a>
<!--canvas contains the img uploaded from data-->
<canvas id="myCanvas" onmousedown="findPosDown(event);" onmouseup="findPosUp(event);">
Browser doesn't support canvas tag
</canvas>
</div>
</div>
<!--SPETTRO-->
<div class="col-sm-7 text-left">
<div class="well" id="chart-pannel">
<h2>XRF Spectrum</h2>
<p id="chart" class="p-chart"></p>
<img id="chartToImg" style="display:none;">
</div>
</div>
</div>
<!--FINE PAGINA-->
</div>
<!--Piè di PAGINA-->
<footer class="container-fluid text-center">
<p><img width="250" src="Digilab2.png" class="img-responsive"></p>
</footer>
</div>
<!--Librerie -->
<script type="text/javascript" src="src/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="src/js/bootstrap.min.js"></script>
<script type="text/javascript" src="provaNavbar.js"></script>
<script type="text/javascript" src="src/dygraph-combined-dev.js"></script>
<script type="text/javascript" src="src/dygraph-extra.js"></script>
<script type="text/javascript" src="LoadFile.js"></script>
<script type="text/javascript" src="src/bootstrap-treeview/public/js/bootstrap-treeview.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Compatibilita' con Microsoft e Responsivita'-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XRF analysis viewer</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="src/font-awesome/dist/font-awesome.min.css">
<!-- Librerie -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/dygraphs/dist/dygraph.min.js"></script>
<script type="text/javascript" src="xrf.js"></script>
<!-- ./Librerie -->
</head>
<body>
<!-- Spinner -->
<div align="center">
<div id="load-spinner" style="display:none">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- /.spinner -->
<!-- Navbar -->
<nav class="navbar navbar-fixed-top bg-primary">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/presentation/XRF-App/">
<img id="logo-chnet" src="Logo-chnet.png" width="35" height="35" alt="" class="img-rounded">
<div id="testo-logo-chnet">XRF Analysis Viewer</div>
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<?php
$pic=$_SERVER["OIDC_CLAIM_picture"];
if (filter_var($pic, FILTER_VALIDATE_URL))
{
echo "<img src=\"$pic\" class=\"img-circle\" width=\"25\">";
} else {
echo "<img src=\"./default-avatar.png\" class=\"img-circle\" width=\"25\">";
}
//echo " ".ucfirst($_SERVER["OIDC_CLAIM_name"]);
?>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<?php
echo "<div class=\"usrname\">".ucfirst($_SERVER["OIDC_CLAIM_name"])."</div>";
echo "<i class=\"usrmail\">".ucfirst($_SERVER["OIDC_CLAIM_email"])."</i>";
?>
</li>
<li class="divider"></li>
<li class="usr-menu"><a href="https://chnet-iam.cloud.cnaf.infn.it/dashboard#/home">Profile</a></li>
<li class="usr-menu"><a href="/presentation/.redirect/?logout=http%3A%2F%2Fchnet.infn.it%2F">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- ./navbar -->
<!-- Sidenav -->
<div class="w3-bar-block w3-border" id="sidenav">
<div class="w3-bar-item w3-button">
<a href="">
<i class="fa fa-home" data-toggle="tooltip" data-placement="right" title="Home"></i>
<span class="text-sidenav" style="display:none">Home</span>
</a>
</div>
<div class="w3-bar-item w3-button" data-toggle="modal" data-target="#myModal">
<i class="fa fa-folder-o" data-toggle="tooltip" data-placement="right" title="Open File"></i>
<span class="text-sidenav" style="display:none">Open file</span>
</div>
<div class="w3-bar-item w3-button" data-toggle="collapse" data-target=".collapse-settings">
<i class="fa fa-cog" data-toggle="tooltip" data-placement="right" title="Settings"></i>
<span class="text-sidenav" style="display:none">Settings</span>
</div>
<div class="w3-bar-item w3-button" id="reset">
<i class="fa fa-refresh" data-toggle="tooltip" data-placement="right" title="Reset"></i>
<span class="text-sidenav" style="display:none">Refresh</span>
</div>
<div class="w3-bar-item w3-button">
<a id="ExportLink" download="Canvas.png" href="#" class="w3-bar-item w3-button">
<div id="ExportImage">
<i class="fa fa-file-image-o" data-toggle="tooltip" data-placement="right" title="Export Map"></i>
<span class="text-sidenav" style="display:none">Export Map</span>
</div>
</a>
</div>
<div class="w3-bar-item w3-button">
<a href="#" id="ExportGraph" download="Spectrum.png" class="w3-bar-item w3-button">
<i class="fa fa-bar-chart" data-toggle="tooltip" data-placement="right" title="Export Chart"></i>
<span class="text-sidenav" style="display:none">Export Chart</span>
</a>
</div>
<div class="w3-bar-item w3-button collapse-sidebar-manually sidebar-label">
<i id="collapse-symbol" class="fa fa-angle-double-right" data-toggle="tooltip" data-placement="right" title="Open Sidebar"></i>
<span class="text-sidenav" style="display:none">Collapse sidebar</span>
</div>
</div>
<!-- ./sidenav -->
<!-- Modal -->
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" id="importPanel">
<div class="modal-header">
<button id="btnCloseModal" type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title">Import File</h3>
</div>
<div class="modal-body">
<h4>Select file from server</h4>
<div id="FileTreeview"></div>
Import File From Local Repository
<label class="btn-bs-file btn btn-primary btn-sm">
<span class="glyphicon glyphicon-open"></span> Choose a file...
<input id="myImport" type="file" / >
</label>
</div>
</div>
</div>
</div>
<!-- ./modal -->
<!-- COLLAPSABLE PAGE -->
<div class="container-fluid droppable" id="myContent" dropzone="copy f:text/plain">
<!-- PAGE CONTENT -->
<div class="row">
<!-- MAPPA -->
<div class="col-sm-4">
<div class="well" id="mappa-pannel">
<h2>XRF Image</h2>
<!-- canvas -->
<div style="position: relative; height: 400px;">
<canvas id="selectionCanvas" height="400px" width="360px"></canvas>
<canvas id="myCanvas" height="400px" width="360px"></canvas>
</div>
<!-- ./canvas -->
<div class="collapse collapse-settings" align="center">
<div class="panel panel-default">
<div class="panel-body">
Saturation<input type="range" id="SaturationSlider" value="100">
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Opacity<input type="range" id="TrasparencySlider" value="0">
</div>
</div>
<button type="button" class="btn btn-primary btn-sm" id="rePlot">Re-color</button>
</div>
</div>
<!-- ./ pannello-mappa -->
</div>
<!-- ./mappa -->
<!-- SPETTRO -->
<div class="col-md-8">
<div class="well" id="chart-pannel">
<h2>XRF Spectrum</h2>
<!-- grafico -->
<p id="chart" class="p-chart"></p>
<img id="chartToImg" style="display:none;">
<!-- impostazioni -->
<p><div class="collapse collapse-settings" align="center">
<!-- Asse y -->
<div class="btn-group">
<button type="button" class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown">Scale <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="setlinearButton">Linear</a></li>
<li><a href="#" id="setlogButton">Log</a></li>
</ul>
</div>
<!-- Asse x -->
<div class="btn-group">
<button type="button" class="btn dropdown-toggle btn-primary btn-sm" data-toggle="dropdown">x Label <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="setEnergyButton">Energy</a></li>
<li><a href="#" id="setChannelsButton">Channels</a></li>
</ul>
</div>
<!-- Selezione picco -->
<div class="btn-group">
<div class="form-group" id="myform">
<label for="spinBoxMin"><h6>Peak selection (only calibrated)</h6></label>
<p><input type="number" class="form-control" id="spinBoxMin" min="0" max="55" step="0.01">
<input type="number" class="form-control" id="spinBoxMax" min="0" max="55" step="0.01"></p>
<div align="center">
<button id="readSpinbox" class="btn btn-primary btn-sm" style="margin-left: -25px;">Select range</button>
</div>
</div>
</div>
<!-- Selezione elemento -->
<select class="form-control selectpicker" data-style="btn-primary btn-sm" data-width="25%" data-live-search="true" id="elementSelect">
<option value="0">- inspect element -</option>
<option value="1">Ca</option>
<option value="2">Pb</option>
<option value="3">Hg</option>
<option value="4">Fe</option>
<option value="5">Cu</option>
<option value="6">Zn</option>
<option value="7">Ti</option>
<option value="8">K</option>
<option value="9">Co</option>
</select>
</div></p>
<!-- ./impostazioni -->
</div>
<!-- ./pannello-spettro -->
</div>
<!-- ./colonna-spettro -->
</div>
<!-- ./riga 1 -->
</div>
<!-- /.collapsable-page -->
</body>
</html>
Source diff could not be displayed: it is too large. Options to address this: view the blob.
{
"name": "chnet-xrf",
"version": "0.1.0",
"scripts": {
"test": "jest"
},
"dependencies": {
"assert": "latest",
"bootstrap": "v3.3.7",
"bootstrap-select": "^1.12.4",
"bootstrap-slider": "^10.0.0",
"bootstrap-tooltip": "^3.1.1",
"dygraphs": "^2.0.0",
"jquery": "^3.3.1"
},
"description": "Web application to analyse XRF images",
"license": "EUPL",
"repository": {
"type": "git",
"url": "https://baltig.infn.it/chnet/XRF-App.git"
},
"devDependencies": {
"@types/dygraphs": "^1.1.8",
"@types/jest": "^21.1.6",
"@types/jquery": "^3.3.4",
"@types/node": "^8.10.18",
"jest": "^21.2.1",
"ts-jest": "^21.2.2",
"ts-md5": "^1.2.2",
"ts-node": "^6.1.0",
"typescript": "^2.9.1"
},
"jest": {
"testEnvironment": "node",
"transform": {
"^.+\\.ts?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "^.+\\.test\\.ts$",
"moduleFileExtensions": [
"ts",
"js"
]
}
}
[
{"id":"1a6d64d89c9e2bec151352426936aeee61e4c1f6","name":"Pergamena-Medioevale","type":"tree","path":"RemoteFileSystem/Pergamena-Medioevale","mode":"040000"},
{"id":"281d9c36a2f80578f0f73538bce054c26eb8db60","name":"Raffaello","type":"tree","path":"RemoteFileSystem/Raffaello","mode":"040000"},
{"id":"ee2716b012546588de3a7c0e481a998c826db716","name":"map3_turkey.txt","type":"blob","path":"RemoteFileSystem/Pergamena-Medioevale/map3_turkey.txt","mode":"100644"},
{"id":"71c5eaa5263a21bf9c9f3ffbdf5a46b005140f3c","name":"mappa4_codapavone_500_v05.txt","type":"blob","path":"RemoteFileSystem/Pergamena-Medioevale/mappa4_codapavone_500_v05.txt","mode":"100644"},
{"id":"152b1d5cae2bd14931a2c8f6ff2cab2a6e3ed4ec","name":"mappa5_codapavone_250_v05.txt","type":"blob","path":"RemoteFileSystem/Pergamena-Medioevale/mappa5_codapavone_250_v05.txt","mode":"100644"},
{"id":"a4f79f87cb3f2334793b8d2db2d9b5ab44986ca2","name":"La-Muta","type":"tree","path":"RemoteFileSystem/Raffaello/La-Muta","mode":"040000"},
{"id":"71c5eaa5263a21bf9c9f3ffbdf5a46b005140f3c","name":"mappa4_codapavone_500_v05.txt","type":"blob","path":"RemoteFileSystem/Raffaello/La-Muta/mappa4_codapavone_500_v05.txt","mode":"100644"}
]
\ No newline at end of file
$(document).ready(function () {
var trigger = $('.hamburger');
var isClosed = false;
trigger.click(function () { hamburger_cross(); });
function hamburger_cross() {
if (isClosed == true) {
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('#tree2').treed({openedClass:'glyphicon-folder-open', closedClass:'glyphicon-folder-close'});
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<!--Compatibilità con Microsoft e Responsività-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Fisrts Bootstrap Template</title>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<!-- Barra di navigazione -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--Logo e pulsante per barra ridimensionata -->
<div class="navbar-header">
<!-- Bottone mostrato quando è tutto collapsed -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<!-- Questo è per i non vedenti -->
<span class="sr-only">Espandi barra di navigazione</span>
<!-- Questo aggiunge le barre orizzontali al menù compresso -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Questo è il logo con il riferimento alla pagina iniziale -->
<a class="navbar-brand" href="Es2.html">Logo</a>
</div>
<!--Elementi della barra: serve per l'impostazione dei link -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="Es2.html">Link 1</a></li>
<li><a href="https://www.google.it">Link 2</a></li>
<li><a href="https://www.google.it">Link 3</a></li>
</ul>
<!-- Questo è semplive testo -->
<p class="navbar-text navbar-right">creato da Me</p>
</div>
</nav>
<!-- Riempimento della tabella -->
<div class="container">
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-4"> <h1>Colonna 2</h1><img width="500" src="lunaPiccola.JPG" class="img-responsive"></div>
<div class="col-md-4"><h1>Colonna 3</h1>"Lorem ipsum dolor sit amet, ..."</div>
</div>
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-8"> <h1>Colonna 2</h1>"Lorem ipsum dolor sit amet, …"</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
</div>
</div>
<!-- jQuery e plugin JavaScript -->
<script src="src/jquery/dist/jquery.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
</body>
</html>
<!--INFORMAZIONI SULLA PAGINA-->
<!--Struttura a colonne.
La struttura inizia con il tag (riga 16):
<div class="container">
Una volta stabilita una riga la si divide in colonne.
La pagina è di 12 colonne. Se si vogliono fare 3 colonne occorre occupare
4 colonne per ciascuna di esse (righe 17-21):
<div class="col-md-4">...</div>
Se si vogliono fare colonne di dimensioni diverse occorre modificare il tag
(righe 22-25):
<div class="col-md-4">...</div> in <div class="col-md-N">...</div>
dove la somma degli N deve dare 12.
Se voglio lasciare colonne vuote (ossia un offset) occorre modificare sempre
lo stesso tag (righe 26-30):
<div class="col-md-6 col-md-offset-N">...<|div>
dove N è il numero di colonne di offset.
Se si inseriscono delle immagini è fondamentale inserire la classe (riga 19):
<img class="img-responsive">
così l'immagine si adatta alla casella della tabella.
Si possono annidare le tabelle all'interno di altre tabelle. Basta aggiungere
una <div class="row"> all'interno di una colonna.
e' possibile dichiarare una colonna poi un'altra e invertire il loro ordine
con delle classi ma questa cosa è abbastanza inutile.
Ci sono 4 classi per le colonne: col-xs-N, col-sm-N, col-md-N, col-lg-N.
Servono per capire la responsività nei dispositivi: md per i pc, sm per i
telefoni.Però la pagina si aggiorna da sola in base al dispositivo.
Si può inserire anche più di una classe per una colonna per modificare lo
spazio che quella colonna occupa in caso di cambio di dispositivo. Cosa non
troppo utile.
https://www.mrwebmaster.it/web-design/bootstrap-navbar_11413.html
-->
\ No newline at end of file
engines:
duplication:
enabled: true
config:
languages:
javascript:
mass_threshold: 50
eslint:
enabled: true
csslint:
enabled: true
ratings:
paths:
- "**.js"
- "**.css"
exclude_paths:
Guidelines
=============
* The application JavaScript source code is transpiled using [Babel](https://babeljs.io/)
* We support both [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/). If you modify one in your PR, please modify both and make sure they both work.
* Additionally, when you are ready to submit your PR, please rebase your commits against the latest master branch so they are easier to examine!
* Please make sure you're not committing your re-built `dist` files, either. We'll do that!
* Also, please note, your code will not be merged if it does not pass our CI test. Thanks for your contribution!
Issues
=============
**NOTE:** Before filing a new issue, please search through the open issues list and check to see if an existing issue already exists that describes your problem. If so, leave a comment within that issue with the checklist items described below.
Please make sure you include the following in your issue report where appropriate:
- [ ] JSFiddle (or an equivalent such as CodePen, Plunker, etc) with the an example demonstrating the bug
- [ ] Instructions to replicate the bug in the Fiddle
Pull Requests
=============
Please accompany all pull requests with the following (where appropriate):
- [ ] unit tests (we use [Jasmine 2.x.x](https://jasmine.github.io/2.2/introduction))
- [ ] JSFiddle (or an equivalent such as CodePen, Plunker, etc) or screenshot/GIF with new feature or bug-fix
- [ ] Link to original Github issue (if this is a bug-fix)
- [ ] documentation updates to README file
- [ ] examples within [/tpl/index.tpl](https://github.com/seiyria/bootstrap-slider/blob/master/tpl/index.tpl) (for new options being added)
- [ ] Passes CI-server checks (runs automated tests, JS source-code linting, etc..). To run these on your local machine, type `grunt test` in your Terminal within the bootstrap-slider repository directory
.idea/*
temp
node_modules
bower_components
.grunt/*
_SpecRunner.html
npm-debug.log
.DS_STORE
index.html
\ No newline at end of file
5.1.1
#########################
## Sass Lint File
#########################
# Linter Options
options:
# Don't merge default rules
merge-default-rules: false
# Raise an error if more than 50 warnings are generated
max-warnings: 50
# File Options
files:
include: 'src/sass/**/*.s+(a|c)ss'
# Rule Configuration
rules:
extends-before-mixins: 2
extends-before-declarations: 2
placeholder-in-extend: 2
mixins-before-declarations:
- 2
-
exclude:
- breakpoint
- mq
no-warn: 1
no-debug: 1
no-ids: 2
no-important: 2
hex-notation:
- 2
-
style: uppercase
indentation:
- 2
-
size: 2
property-sort-order:
- 1
-
order:
- display
- margin
ignore-custom-properties: true
\ No newline at end of file
language: node_js
node_js:
- "5.1.1"
before_install:
- npm install -g grunt-cli bower
- npm install
9.8.0 / 2017-04-24
==================
* **New Feature:** Ability to add a custom class to the ranges of a slider with the `rangeHightlights` option specified. [See the PR for further details.](https://github.com/seiyria/bootstrap-slider/pull/742). Thanks to [jccode](https://github.com/jccode).
Tooling Update / 2017-04-09
==================
* Updates [grunt](https://github.com/gruntjs/grunt) dependency from version `0.4.4` to `^0.4.5`.
9.7.3 / 2017-04-09
==================
* **Bug Fix** Resolves PhantomJS error that was occurring while running the unit test suite. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/696).
* **Tooling Update** Updates unit test suite to [Jasmine 2.x.x](https://jasmine.github.io/2.2/introduction) by updating the [grunt-contrib-jasmine](https://github.com/gruntjs/grunt-contrib-jasmine) dependency from version `0.5.2` to `1.0.3`.
9.7.2 / 2017-02-10
==================
* **Bug Fix** Resolves accesibility issue in range sliders. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/687). Thanks to [Jerry (jerrylow)](https://github.com/jerrylow).
Tooling Update / 2017-02-02
==================
* Adds in [CodeClimate](https://codeclimate.com/) integration. Thanks to [Scott Larkin](https://github.com/larkinscott).
Tooling Update / 2017-02-01
==================
* Examples Page: Fixes code snippet for Example 6. Thanks to [Sergey Mezentsev](https://github.com/TheBits).
9.7.1 / 2017-01-29
==================
* **Bug Fix** Resolves "'slider' of undefined" error. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/587). Thanks to [Guto Sanches](https://github.com/gutosanches).
Tooling Update / 2017-01-06
==================
* Examples Page: Adds syntax highlighting to code snippets on Examples page
* Examples Page: Adds anchor tags to each example. For example, navigating to http://seiyria.com/bootstrap-slider/#example-10 will now load the page at Example #10.
* Examples Page: Fixed code snippet in Example #14 based on feedback from [this comment](https://github.com/seiyria/bootstrap-slider/issues/645#issuecomment-270751793).
9.7.0 / 2017-01-05
==================
* **Performance Enhancement** Use passive event listeners for touch-enabled devices. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/680). Thanks to [Chris Hallberg](https://github.com/crhallberg).
Tooling Update / 2017-01-05
==================
* Add an explicit `grunt lint` command to run Lint check on all source files and execute it in the NPM `pretest` script.
9.6.2 / 2017-01-04
==================
* Updating current year references in license from 2016 -> 2017.
Tooling Update / 2017-01-04
==================
* Adds in linting for SASS and LESS files in order to catch common syntax errors at CI step versus compile time.
9.6.1 / 2017-01-04
==================
* **Bug Fix:** Resolve issue with SASS file compilation. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/683). Thanks to [Schepotin](https://github.com/Schepotin) for reporting.
9.6.0 / 2017-01-03
==================
* **New Feature:** Adds ability to set direction (using HTML5 `dir` attribute). [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/679). Thanks to [Denis Chenu](https://github.com/Shnoulle).
9.5.4 / 2016-12-18
==================
* **Bug Fix:** Fixes issue where dragging slider handle outside of modal and releasing cursor would close the modal. [See original issue for further details](https://github.com/seiyria/bootstrap-slider/issues/339). Thanks to [ZeVS777](https://github.com/ZeVS777).
9.5.3 / 2016-12-01
==================
* **Bug Fix:** Fixes typo from previous update to SCSS rules. Thanks to [Julien Bachmann](https://github.com/julienbachmann).
9.5.2 / 2016-11-30
==================
* **Bug Fix:** Fixes SCSS rules. [See original issue for further details](https://github.com/seiyria/bootstrap-slider/issues/662). Thanks to [Julien Bachmann](https://github.com/julienbachmann).
9.5.1 / 2016-11-23
==================
* **Bug Fix:** Removes `'none'` classes after selection change. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/659). Thanks to [John Clarke](https://github.com/john-clarke).
9.5.0 / 2016-11-21
==================
* **New Feature:** Adds `aria-valuetext` attribute to each slider handle element, which is set to be the current formatted value of the slider (based on the `formatter` option). [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/646). Thanks to [mediaformat](https://github.com/mediaformat).
9.4.1 / 2016-11-04
==================
* **Documentation Fix:** Fixing an inconsistency with the licensing information in our source files. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/652). Thanks to [Tom Yue](https://github.com/yuethomas) for identifying this issue.
9.4.0 / 2016-10-31
==================
* **New Feature:** Adds the ability to set the slider value using stringified numbers. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/642). Thanks to [Ryan Bruns](https://github.com/snurby7)
9.3.2 / 2016-10-30
==================
* **Bug Fix:** Fixes reported bug where a slider was unable to be destroyed and re-created if there were event listeners bound to it. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/640).
9.3.0 / 2016-10-20
==================
* **New Feature:** Adds the ability to enable/disable tooltips when hovering over ticks via the `ticks_tooltip` option. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/638). Thanks to [Ryan Bruns](https://github.com/snurby7)
9.2.2 / 2016-10-18
==================
* **Bug Fix:** Resolves issue where range highlights were not being applied properly for reversed sliders. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/637). Thanks to [Bernard Gorman](https://github.com/gormanb)
9.2.0 / 2016-09-26
==================
* **New Feature:** Adding the ability to target certain ranges of the slider track via CSS in order to highlight them. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/619). Thanks to [lipoczkit](https://github.com/lipoczkit)
9.1.3 / 2016-08-06
==================
* **Bug Fix:** Checks for `window` object before attempting to attach `console` polyfills. [Resolves this issue](https://github.com/seiyria/bootstrap-slider/issues/607)
9.1.2 / 2016-08-06
==================
* Accidental publish
9.1.1 / 2016-07-15
==================
* **Bug Fix:** Adds `.npmignore` file to repository. [Resolves this issue](https://github.com/seiyria/bootstrap-slider/issues/601)
9.1.0 / 2016-07-14
==================
* **New Feature:** Always binding to the `$.fn.bootstrapSlider` namespace and printing a console warning when the `$.fn.slider` namespace is already bound. Idea came from discussion [in this issue](https://github.com/seiyria/bootstrap-slider/issues/575)
9.0.0 / 2016-07-13
==================
* **New Feature:** Wraps all of the ticks within a single container element with the class `.slider-tick-container` as opposed to being within the `.slider-track` element. This enables individual ticks to be more easily targeted with CSS selectors such as `nth-of-type(n)`. Idea came from discussion [in this issue](https://github.com/seiyria/bootstrap-slider/issues/500)
8.0.0 / 2016-07-13
==================
* **Revert:** Reverting bug fix made in `7.0.4 - 7.0.5` because it breaks UMD module definition and r.js build tool [as reported in this issue](https://github.com/seiyria/bootstrap-slider/issues/589#issuecomment-232429818). Updated README to address how to stub out optional JQuery dependency for Webpack builds.
7.1.0 - 7.1.1 / 2016-05-26
==================
* **New Feature:** Allow LESS/SASS variables to be overridden, but fall back to defaults if needed. [See here for further details](https://github.com/seiyria/bootstrap-slider/pull/579). Thanks to [Jonathan Rehm
(jkrehm)](https://github.com/jkrehm)
7.0.4 - 7.0.5 / 2016-05-26
==================
* **Bug Fix:** Changes webpack AMD build error on define() for optional jQuery dependency to be a warning, which allows webpack builds to be completed. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/578). Thanks to [Tomi Saarinen (TomiS)](https://github.com/TomiS)
7.0.2 / 2016-04-05
==================
* **Bug Fix:** Fixes overlap issue with range slider. [See here for further details](https://github.com/seiyria/bootstrap-slider/issues/435). Thanks to [Jerry (jerrylow)](https://github.com/jerrylow)
7.0.0 / 2016-04-05
==================
* **Breaking Change:** Restructured and refactored SASS source files to eliminate compass dependency and be more organized. Thanks to [Jacob van Mourik
(jcbvm)](https://github.com/jcbvm)
6.1.7 / 2016-04-03
==================
* **Bug Fix:** Fixes issue where slider accidently scrolls when user taps on mobile device. Thanks to [Jerry (jerrylow)](https://github.com/jerrylow)
6.1.5 / 2016-03-12
==================
* **Bug Fix:** Call resize() before layout() within relayout() method, which enables intially hidden sliders to be revealed and behave appropriately. Thanks to [Peter (MaZderMind)](https://github.com/MaZderMind)
6.1.3 / 2016-03-07
==================
* **Bug Fix:** Fixed horizontal centering issue with labels. Thanks to [Josh Guffey](https://github.com/jguffey)
6.1.0 / 2016-02-28
==================
* **New Feature:** Auto-registering/intializing slider via `data-provide="slider"` attribute. Thanks to [MaZderMind](https://github.com/MaZderMind)
* Adding Github Templates for Issues, Pull Requests, and Contributions
6.0.16 / 2016-02-04
==================
* **Bug Fix:** Attempted Bug fix from 6.0.11 was refined to ensure so side effects.
6.0.15 / 2016-02-04
==================
* **Bug Fix:** _setText() defaults to `.textContent` vs `.innerHTML`. Thanks to [gio-js](https://github.com/gio-js)
6.0.13 / 2016-01-31
==================
* Reverted Bug fix from prior release
6.0.11 / 2016-01-31
==================
* **Bug fix:** Slider was not scrolling properly when nested inside of scrollable container. Thanks to [serbiant](https://github.com/serbiant)
6.0.9 / 2016-01-26
==================
* **Bug fix:** Race condition in `setValue()` where slider value was being set after `change` and `slide` events were being triggered. Thanks to [glaszig](https://github.com/glaszig)
6.0.7 / 2016-01-22
==================
* **Bug fix:** When `tooltip_position` option is set to `"bottom"` on a slider with multiple split handles, position both tooltips below the slider. Thanks to [Martin Hesslund](https://github.com/kesse)
6.0.5 / 2016-01-20
==================
* bower.json: changing "main" to reference /dist/bootstrap-slider.js
6.0.2 / 2015-12-31
==================
* package.json: changing "main" to point at proper file path
6.0.0 / 2015-12-30
==================
* Moving all source code to `/src` directory
* Transpiling JS with [Babel](https://babeljs.io/)
* Adding `Other Guidelines` section to CONTRIBUTING.MD
* Updating README with Grunt CLI tasks
* Update postpublish script to reference transpiled code
* Freezing dependency versions (this allows us to ensure the module and grunt tasks always have consistent/repeatable behavior)
* Adding an `.nvmrc` file for Node 5.x.x. This version of node comes with NPM 3.x.x, which creates a flat dependency tree for `node_modules`, which basically eliminates the need for bower as our client-side deps management solution
5.3.6 / 2015-12-27
==================
* Restoring bootstrap depedency to bower.json file (Fixes issue with `grunt prod` task)
5.3.4 / 2015-12-27
==================
* **Bug fix:** Ticks now reposition themselves during window resize - Thanks to [Zachary Siswick](https://github.com/zsiswick)
/*global module:false*/
module.exports = function(grunt) {
var packageJSON = grunt.file.readJSON('package.json');
var bumpFiles = ["package.json", "bower.json", "composer.json"];
var commitFiles = bumpFiles.concat(["./dist/*"]);
// Project configuration.
grunt.initConfig({
// Metadata
pkg: packageJSON,
// Task configuration.
header: {
dist: {
options: {
text: "/*! =======================================================\n VERSION <%= pkg.version %> \n========================================================= */"
},
files: {
'<%= pkg.gruntConfig.dist.js %>': '<%= pkg.gruntConfig.temp.js %>',
'<%= pkg.gruntConfig.dist.jsMin %>': '<%= pkg.gruntConfig.temp.jsMin %>',
'<%= pkg.gruntConfig.dist.css %>': '<%= pkg.gruntConfig.temp.css %>',
'<%= pkg.gruntConfig.dist.cssMin %>': '<%= pkg.gruntConfig.temp.cssMin %>'
}
}
},
uglify: {
options: {
preserveComments: 'some'
},
dist: {
src: '<%= pkg.gruntConfig.temp.js %>',
dest: '<%= pkg.gruntConfig.temp.jsMin %>'
}
},
babel: {
options: {
presets: ['es2015']
},
dist: {
src: '<%= pkg.gruntConfig.js.slider %>',
dest: '<%= pkg.gruntConfig.temp.js %>'
}
},
jshint: {
ignore_warning: {
options: {
'-W099': true
},
src: '<%= pkg.gruntConfig.js.slider %>'
},
options: {
esnext: true,
curly: true,
eqeqeq: true,
immed: true,
latedef: false,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
$ : true,
Modernizr : true,
console: true,
define: true,
module: true,
require: true
},
"-W099": true
},
gruntfile: {
src: 'Gruntfile.js'
},
js: {
src: '<%= pkg.gruntConfig.js.slider %>'
},
spec : {
src: '<%= pkg.gruntConfig.spec %>',
options : {
globals : {
document: true,
console: false,
Slider: false,
$: false,
jQuery: false,
_: false,
_V_: false,
afterEach: false,
beforeEach: false,
confirm: false,
context: false,
describe: false,
expect: false,
it: false,
jasmine: false,
JSHINT: false,
mostRecentAjaxRequest: false,
qq: false,
runs: false,
spyOn: false,
spyOnEvent: false,
waitsFor: false,
xdescribe: false
}
}
}
},
sasslint: {
options: {
configFile: './.sass-lint.yml',
},
target: ['./src/sass/**/*.scss']
},
lesslint: {
src: ['./src/less/bootstrap-slider.less']
},
jasmine : {
src : '<%= pkg.gruntConfig.temp.js %>',
options : {
specs : '<%= pkg.gruntConfig.spec %>',
vendor : ['<%= pkg.gruntConfig.js.jquery %>', '<%= pkg.gruntConfig.js.bindPolyfill %>'],
styles : ['<%= pkg.gruntConfig.css.bootstrap %>', '<%= pkg.gruntConfig.temp.css %>'],
template : '<%= pkg.gruntConfig.tpl.SpecRunner %>'
}
},
template : {
'generate-index-page' : {
options : {
data : {
js : {
highlightjs: '<%= pkg.gruntConfig.js.highlightjs %>',
modernizr : '<%= pkg.gruntConfig.js.modernizr %>',
jquery : '<%= pkg.gruntConfig.js.jquery %>',
slider : '<%= pkg.gruntConfig.temp.js %>'
},
css : {
highlightjs: '<%= pkg.gruntConfig.css.highlightjs %>',
bootstrap : '<%= pkg.gruntConfig.css.bootstrap %>',
slider : '<%= pkg.gruntConfig.temp.css %>'
}
}
},
files : {
'index.html' : ['<%= pkg.gruntConfig.tpl.index %>']
}
},
'generate-gh-pages' : {
options : {
data : {
js : {
highlightjs: '<%= pkg.gruntConfig.js.highlightjs %>',
modernizr : '<%= pkg.gruntConfig.js.modernizr %>',
jquery : '<%= pkg.gruntConfig.js.jquery %>',
slider : 'js/bootstrap-slider.js'
},
css : {
highlightjs: '<%= pkg.gruntConfig.css.highlightjs %>',
bootstrap : '<%= pkg.gruntConfig.css.bootstrap %>',
slider : 'css/bootstrap-slider.css'
}
}
},
files : {
'index.html' : ['<%= pkg.gruntConfig.tpl.index %>']
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: '<%= pkg.gruntConfig.js.slider %>',
tasks: ['jshint:js', 'babel', 'jasmine']
},
gruntfile: {
files: '<%= jshint.gruntfile %>',
tasks: ['jshint:gruntfile']
},
spec: {
files: '<%= pkg.gruntConfig.spec %>',
tasks: ['jshint:spec', 'jasmine:src']
},
css: {
files: [
'<%= pkg.gruntConfig.less.slider %>',
'<%= pkg.gruntConfig.less.rules %>',
'<%= pkg.gruntConfig.less.variables %>'
],
tasks: ['less:development']
},
index: {
files: '<%= pkg.gruntConfig.tpl.index %>',
tasks: ['template:generate-index-page']
}
},
connect: {
server: {
options: {
port: "<%= pkg.gruntConfig.devPort %>"
}
}
},
open : {
development : {
path: 'http://localhost:<%= connect.server.options.port %>'
}
},
less: {
options: {
paths: ["bower_components/bootstrap/less"]
},
development: {
files: {
'<%= pkg.gruntConfig.temp.css %>': '<%= pkg.gruntConfig.less.slider %>'
}
},
production: {
files: {
'<%= pkg.gruntConfig.temp.css %>': '<%= pkg.gruntConfig.less.slider %>',
}
},
"production-min": {
options: {
yuicompress: true
},
files: {
'<%= pkg.gruntConfig.temp.cssMin %>': '<%= pkg.gruntConfig.less.slider %>'
}
}
},
clean: {
dist: ["dist"],
temp: ["temp"]
},
bump: {
options: {
files: bumpFiles,
updateConfigs: [],
commit: true,
commitMessage: 'Release v%VERSION%',
commitFiles: commitFiles,
createTag: true,
tagName: 'v%VERSION%',
tagMessage: 'Version %VERSION%',
push: false,
pushTo: 'origin'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-template');
grunt.loadNpmTasks('grunt-header');
grunt.loadNpmTasks('grunt-bump');
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-sass-lint');
grunt.loadNpmTasks('grunt-lesslint');
// Create custom tasks
grunt.registerTask('append-header', ['header', 'clean:temp']);
grunt.registerTask('lint', [
'jshint',
'lesslint',
'sasslint'
]);
grunt.registerTask('test', [
'babel',
'less:development',
'jasmine',
'clean:temp'
]);
grunt.registerTask('build', [
'less:development',
'test',
'template:generate-index-page'
]);
grunt.registerTask('build-gh-pages', [
'less:development',
'babel',
'template:generate-gh-pages'
]);
grunt.registerTask('dist', [
'clean:dist',
'less:production',
'less:production-min',
'babel',
'uglify',
'append-header'
]);
grunt.registerTask('development', [
'less:development',
'babel',
'template:generate-index-page',
'connect',
'open:development',
'watch'
]);
grunt.registerTask('production', ['dist']);
grunt.registerTask('dev', 'development');
grunt.registerTask('prod', 'production');
grunt.registerTask('default', ['build']);
}; // End of module
----------------------------------------------------------------------
bootstrap-slider is released under the MIT License
Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
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.
bootstrap-slider [![Build Status](https://travis-ci.org/seiyria/bootstrap-slider.png?branch=master)](https://travis-ci.org/seiyria/bootstrap-slider) [![Code Climate](https://codeclimate.com/github/seiyria/bootstrap-slider/badges/gpa.svg)](https://codeclimate.com/github/seiyria/bootstrap-slider)
================
Originally began as a loose "fork" of bootstrap-slider found on http://www.eyecon.ro/ by Stefan Petre.
Over time, this project has diverged sigfinicantly from Stefan Petre's version and is now almost completely different.
__Please ensure that you are using this library instead of the Petre version before creating issues in the repository issue tracker!!__
Installation
============
Want to use bower? `bower install seiyria-bootstrap-slider`
Want to use npm? `npm install bootstrap-slider`
Want to get it from a CDN? https://cdnjs.com/libraries/bootstrap-slider
Basic Setup
============
Grab the compiled JS/CSS (minified or non-minified versions) from the [/dist](https://github.com/seiyria/bootstrap-slider/tree/master/dist) directory, load them into your web page, and everything should work!
Remember to load the plugin code after loading the Bootstrap CSS and JQuery.
__JQuery is optional and the plugin can operate with or without it.__
Look below to see an example of how to interact with the non-JQuery interface.
Supported Browsers
========
__We only support modern browsers!!! Basically, anything below IE9 is not compatible with this plugin!__
Examples
========
You can see all of our API examples [here](http://seiyria.github.io/bootstrap-slider/).
Using bootstrap-slider (with JQuery)
======================
### Using `.slider` namespace
Create an input element and call .slider() on it:
```js
// Instantiate a slider
var mySlider = $("input.slider").slider();
// Call a method on the slider
var value = mySlider.slider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.slider('setValue', 5)
.slider('setValue', 7);
```
### Using `.bootstrapSlider` namespace
Create an input element and call .bootstrapSlider() on it:
```js
// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();
// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
```
Using bootstrap-slider (via `data-provide`-API)
======================
Create an input element with the `data-provide="slider"` attribute automatically
turns it into a slider. Options can be supplied via `data-slider-` attributes.
```html
<input
type="text"
name="somename"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
>
```
What if there is already a _slider_ plugin bound to the JQuery namespace?
======================
If there is already a JQuery plugin named _slider_ bound to the JQuery namespace, then this plugin will emit a console warning telling you this namespace has already been taken and will encourage you to use the alternate namespace _bootstrapSlider_ instead.
```js
// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();
// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
```
Using bootstrap-slider (without JQuery)
======================
Create an input element in the DOM, and then create an instance of Slider, passing it a selector string referencing the input element.
```js
// Instantiate a slider
var mySlider = new Slider("input.slider", {
// initial options object
});
// Call a method on the slider
var value = mySlider.getValue();
// For non-getter methods, you can chain together commands
mySlider
.setValue(5)
.setValue(7);
```
Using as CommonJS module
=======
bootstrap-slider can be loaded as a CommonJS module via [Browserify](https://github.com/substack/node-browserify), [Webpack](https://github.com/webpack/webpack), or some other build tool.
```js
var Slider = require("bootstrap-slider");
var mySlider = new Slider();
```
How do I exclude the optional JQuery dependency from my build?
=======
### Browserify
__Note that the JQuery dependency is considered to be optional.__ For example, to exclude JQuery from being part of your Browserify build, you would call something like the following (assuming `main.js` is requiring bootstrap-slider as a dependency):
```BASH
browserify --im -u jquery main.js > bundle.js
```
### Webpack
To exclude JQuery from your Webpack build, you will have to go into the Webpack config file for your specific project and add something like the following to your `resolve.alias` section:
```js
resolve: {
alias: {
"jquery": path.join(__dirname, "./jquery-stub.js");
}
}
```
Then in your project, you will have to create a stub module for jquery that exports a `null` value. Whenever `require("jquery")` is mentioned in your project, it will load this stubbed module.
```js
// Path: ./jquery-stub.js
module.exports = null;
```
### Other
Please see the documentation for the specific module loader you are using to find out how to exclude dependencies.
Options
=======
Options can be passed either as a data (data-slider-foo) attribute, or as part of an object in the slider call. The only exception here is the formatter argument - that can not be passed as a data- attribute.
| Name | Type | Default | Description |
| ---- |:----:|:-------:|:----------- |
| id | string | '' | set the id of the slider element when it's created |
| min | float | 0 | minimum possible value |
| max | float | 10 | maximum possible value |
| step | float | 1 | increment step |
| precision | float | number of digits after the decimal of _step_ value | The number of digits shown after the decimal. Defaults to the number of digits after the decimal of _step_ value. |
| orientation | string | 'horizontal' | set the orientation. Accepts 'vertical' or 'horizontal' |
| value | float,array | 5 | initial value. Use array to have a range slider. |
| range | bool | false | make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value. |
| selection | string | 'before' | selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles |
| tooltip | string | 'show' | whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' |
| tooltip_split | bool | false | if false show one tootip if true show two tooltips one for each handler |
| tooltip_position | string | null | Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider. |
| handle | string | 'round' | handle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |
| reversed | bool | false | whether or not the slider should be reversed |
| rtl | bool|string | 'auto' | whether or not the slider should be shown in rtl mode. Accepts true, false, 'auto'. Default 'auto' : use actual direction of HTML (`dir='rtl'`) |
| enabled | bool | true | whether or not the slider is initially enabled |
| formatter | function | returns the plain value | formatter callback. Return the value wanted to be displayed in the tooltip, useful for string values. If a string is returned it will be indicated in an `aria-valuetext` attribute. |
| natural_arrow_keys | bool | false | The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value. |
| ticks | array | [ ] | Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options. |
| ticks_positions | array | [ ] | Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. |
| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. |
| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. |
| ticks_tooltip | bool | false | Used to allow for a user to hover over a given tick to see it's value. Useful if custom formatter passed in |
| scale | string | 'linear' | Set to 'logarithmic' to use a logarithmic scale. |
| focus | bool | false | Focus the appropriate slider handle after a value change. |
| labelledby | string,array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. |
| rangeHighlights | array | [] | Defines a range array that you want to highlight, for example: [{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}]. |
Functions
=========
__NOTE:__ Optional parameters are italicized.
| Function | Parameters | Description |
| -------- | ----------- | ----------- |
| getValue | --- | Get the current value from the slider |
| setValue | newValue, _triggerSlideEvent_, _triggerChangeEvent_ | Set a new value for the slider. If optional triggerSlideEvent parameter is _true_, 'slide' events will be triggered. If optional triggerChangeEvent parameter is _true_, 'change' events will be triggered. This function takes `newValue` as either a `Number`, `String`, `Array`. If the value is of type `String` it must be convertable to an integer or it will throw an error.|
| getElement | --- | Get the div slider element |
| destroy | --- | Properly clean up and remove the slider instance |
| disable | ---| Disables the slider and prevents the user from changing the value |
| enable | --- | Enables the slider |
| toggle | --- | Toggles the slider between enabled and disabled |
| isEnabled | --- |Returns true if enabled, false if disabled |
| setAttribute | attribute, value | Updates the slider's [attributes](#options) |
| getAttribute | attribute | Get the slider's [attributes](#options) |
| refresh | --- | Refreshes the current slider |
| on | eventType, callback | When the slider event _eventType_ is triggered, the callback function will be invoked |
| off | eventType, callback | Removes the callback function from the slider event _eventType_ |
| relayout | --- | Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden. |
Events
======
| Event | Description | Value |
| ----- | ----------- | ----- |
| slide | This event fires when the slider is dragged | The new slider value |
| slideStart | This event fires when dragging starts | The new slider value |
| slideStop | This event fires when the dragging stops or has been clicked on | The new slider value |
| change | This event fires when the slider value has changed | An object with 2 properties: "oldValue" and "newValue" |
| slideEnabled | This event fires when the slider is enabled | N/A |
| slideDisabled | This event fires when the slider is disabled | N/A |
How Do I Run This Locally?
======
- Clone the repository
- Run `nvm use` in your Terminal to switch to the proper Node/NPM version
- Once you are on specified Node version, run `npm install`
- Install the Grunt CLI: `npm install grunt-cli -g`
- Type `grunt dev` to launch browser window with Examples page
Grunt Tasks
======
This plugin uses Grunt as its command-line task runner.
To install the Grunt CLI, type `npm install grunt-cli -g`.
To execute any of the commands, type `grunt <task-name>` in your terminal instance.
The following is a list of the commonly-used command line tasks:
* `grunt development`: Generates the `index.html`, compiles the LESS/JS to the `/temp` directory, and launches the index.html in your system's default browser. As changes are made to source code, the
browser window will auto-refresh.
* `grunt production`: Generates the `/dist` directory with minified and unminified assetts.
* `grunt dev`: Alias for `grunt development`
* `grunt prod`: Alias for `grunt production`
* `grunt build`: Transpiles JavaScript source via Babel and compiles LESS source to CSS to `temp` directory.
* `grunt lint`: Runs JSLint on the JavaScript source code files, SASS-Lint on the SASS source code files, and LESSLint on the LESS source code files.
* `grunt test`: Runs unit tests contained in `/test` directory via Jasmine 2.x.x
Version Bumping and Publishing (Maintainers Only)
=======
To do the following release tasks:
* bump the version
* publish a new version to NPM
* update the `gh-pages` branch
* push a new `dist` bundle to the `master` branch on the remote `origin`
* push new tags to the remote `origin`
Type the following command:
`npm run release <patch|minor|major>`
If you do not specify a version bump type, the script will automatically defer to a patch bump.
Updating Github.io Page
===========================
The Github.io page can be automatically updated by running the following command:
`npm run update-gh-pages`
This command will handle generating the latest versions of the JS/CSS and index.html page, and push them to the `gh-pages` branch.
Other Platforms & Libraries
===========================
- [Ruby on Rails](https://github.com/YourCursus/bootstrap-slider-rails)
- [knockout.js](https://github.com/cosminstefanxp/bootstrap-slider-knockout-binding) ([@cosminstefanxp](https://github.com/cosminstefanxp), [#81](https://github.com/seiyria/bootstrap-slider/issues/81))
- [AngularJS](https://github.com/seiyria/angular-bootstrap-slider)
- [EmberJS](https://github.com/lifegadget/ui-slider) ([@ksnyde](https://github.com/ksnyde))
- [ReactJS](https://github.com/brownieboy/react-bootstrap-slider)
- [NuGet](https://www.nuget.org/packages/bootstrap-slider/) ([@ChrisMissal](https://github.com/ChrisMissal))
- [MeteorJS](https://github.com/kidovate/meteor-bootstrap-slider)
- [Maven](http://mvnrepository.com/artifact/org.webjars.bower/seiyria-bootstrap-slider)
Maintainers
============
- Kyle Kemp
* Twitter: [@seiyria](https://twitter.com/seiyria)
* Github: [seiyria](https://github.com/seiyria)
- Rohit Kalkur
* Twitter: [@Rovolutionary](https://twitter.com/Rovolutionary)
* Github: [rovolution](https://github.com/rovolution)