Browse Source

Replace src/tabs.js by modulekit-tabs

master
parent
commit
d9e6d4a2f0
  1. 1
      package.json
  2. 6
      src/CategoryBase.js
  3. 2
      src/CategoryOverpass.js
  4. 140
      src/tabs.js
  5. 31
      style.css

1
package.json

@ -17,6 +17,7 @@
"leaflet-geosearch": "^2.4.0",
"leaflet-textpath": "https://github.com/makinacorpus/Leaflet.TextPath#leaflet0.8-dev",
"leaflet.locatecontrol": "^0.61.0",
"modulekit-tabs": "^0.1.0",
"moment": "^2.18.1",
"opening_hours": "^3.5.0",
"openstreetbrowser-categories-main": "https://github.com/plepe/openstreetbrowser-categories-main",

6
src/CategoryBase.js

@ -1,6 +1,6 @@
/* global lang, ui_lang, options, alert */
var OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
var tabs = require('./tabs')
var tabs = require('modulekit-tabs')
function CategoryBase (id, data) {
this.id = id
@ -58,9 +58,7 @@ function CategoryBase (id, data) {
}
}
this.tools = new tabs.Tabs()
this.dom.appendChild(this.tools.node)
this.tools.node.classList.add('tools')
this.tools = new tabs.Tabs(this.dom)
this.domContent = document.createElement('div')
this.domContent.className = 'content'

2
src/CategoryOverpass.js

@ -3,7 +3,7 @@ var OverpassLayer = require('overpass-layer')
var OverpassLayerList = require('overpass-layer').List
var CategoryBase = require('./CategoryBase')
var state = require('./state')
var tabs = require('./tabs')
var tabs = require('modulekit-tabs')
var markers = require('./markers')
var defaultValues = {
feature: {

140
src/tabs.js

@ -1,140 +0,0 @@
/**
* @param {Object} options
* @property {DOMNode} node the DOMNode which can be added to a parent
* @property {Tab|null} selected The selected tab
* @property {Tab[]} list List of available tabs
*/
function Tabs (options) {
this.options = options || {}
this.node = document.createElement('div')
this.node.className = 'tabs'
this.headers = document.createElement('ul')
this.headers.className = 'tabs-list'
this.node.appendChild(this.headers)
this.selected = null
this.list = []
}
/**
* add a tab
* @param {Tab} tab
*/
Tabs.prototype.add = function (tab) {
this.headers.appendChild(tab.header)
this.node.appendChild(tab.content)
tab.master = this
}
/**
* return a tab
* @param {Tab|number|id} tab
*/
Tabs.prototype.get = function (tab) {
if (typeof tab === 'object') {
return tab
}
if (typeof tab === 'number') {
return this.list[tab]
}
for (var i = 0; i < this.list.length; i++) {
if (this.list[i].options.id === tab) {
return this.list[i]
}
}
}
/**
* select the specified tab
* @param {Tab|number|id} tab
*/
Tabs.prototype.select = function (tab) {
if (this.selected) {
this.unselect()
}
tab = this.get(tab)
this.selected = tab
this.node.classList.add('has-selected')
tab._select()
}
/**
* unselect the currently selected tab
*/
Tabs.prototype.unselect = function () {
if (this.selected) {
this.selected._unselect()
this.selected = null
}
this.node.classList.remove('has-selected')
}
/**
* add a new tab pane to the tabs
* @param {Object} options
* @param {String} options.id ID of the tab
* @property {DOMNode} content
* @property {DOMNode} header
* @property {Tabs} master
*/
function Tab (options) {
this.options = options || {}
this.master = null
this.header = document.createElement('li')
this.header.onclick = function () {
this.toggle()
}.bind(this)
this.content = document.createElement('div')
this.content.className = 'tabs-section'
}
/**
* select this tab
*/
Tab.prototype.select = function () {
this.master.select(this)
}
/**
* toggle this tab (if selected, unselect)
*/
Tab.prototype.toggle = function () {
if (this.master.selected === this) {
this.master.unselect()
} else {
this.master.select(this)
}
}
Tab.prototype._select = function () {
this.header.classList.add('selected')
this.content.classList.add('selected')
}
/**
* unselect this tab
*/
Tab.prototype.unselect = function () {
if (this.master.selected === this) {
this.master.unselect()
}
}
Tab.prototype._unselect = function () {
this.header.classList.remove('selected')
this.content.classList.remove('selected')
}
module.exports = {
Tabs: Tabs,
Tab: Tab
}

31
style.css

@ -381,34 +381,3 @@ a.showDetails {
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
/**** TABS ****/
.tabs .tabs-section {
display: none;
border: 1px solid #999;
border-top: none;
}
.tabs .tabs-section.selected {
display: block;
}
.tabs .tabs-list {
margin: 0;
padding: 0;
border-bottom: 1px solid transparent;
}
.tabs.has-selected .tabs-list {
border-bottom: 1px solid #999;
}
.tabs .tabs-list > li {
list-style: none;
display: inline-block;
border: 1px solid transparent;
padding: 1px 3px;
cursor: pointer;
margin-bottom: -1px;
}
.tabs .tabs-list > li.selected {
border: 1px solid #999;
border-bottom: 1px solid #fff;
z-index: 1;
}
Loading…
Cancel
Save