Skip to content

Instantly share code, notes, and snippets.

@ojako

ojako/disco-filtering-revisited-2.markdown

Created February 13, 2019 17:46
Show Gist options
  • Save ojako/d822bf81f2012d724d0499969d63b327 to your computer and use it in GitHub Desktop.
Save ojako/d822bf81f2012d724d0499969d63b327 to your computer and use it in GitHub Desktop.
Download ZIP
Disco Filtering Revisited 2
Raw
index.pug
div(ng-app="MyApp")
my-component
script(id="my-component.tpl" type="text/ng-template")
.navbar.navbar-default
.container
ul.nav.navbar-nav.visible-xs
li
a #[i.fa.fa-bars]
ul.nav.navbar-nav.hidden-xs
li
a #[i.fa.fa-home]
ul.nav.navbar-nav.pull-right.hidden-xs
li
a #[i.fa.fa-search]
li
a #[i.fa.fa-user]
li
a #[i.fa.fa-cog]
.container.page
nav.search-header.text-center
.form-group
input.search-control.text-center(type="text"
placeholder="What are you looking for?"
)
.form-group
.btn-group
button.btn.btn-primary Idea
button.btn.btn-clear Challenge
button.btn.btn-clear Conversation
button.btn.btn-clear Community
.form-group
.btn-group
button.btn.btn-clear My Content
button.btn.btn-clear My Evaluations
button.btn.btn-clear Archived
button.btn.btn-primary #[i.fa.fa-sliders] Filter #[i.caret]
.nav-filter-groups
.btn-group
button.btn.btn-link(
ng-click="$ctrl.toggleFilter(filter)"
ng-repeat="filter in $ctrl.filterList"
ng-class="{'active': $ctrl.activeFilter === filter && $ctrl.filtersOpen}"
) {{ filter.title }}
| {{ $ctrl.countFilters > 0 ? '(' + $ctrl.countFilters + ')' : '' }}
| #[i.caret]
.filter-container(ng-if="$ctrl.filtersOpen")
filter-container(
ng-repeat="filter in $ctrl.filterList"
ng-if="filter === $ctrl.activeFilter"
filters="filter.filters"
type="filter.type"
is-open="$ctrl.filtersOpen"
)
.discover(
ng-class="{'blur': $ctrl.filtersOpen}"
ng-click="$ctrl.filtersOpen = false"
)
.text-right
button.btn.btn-link Sort Options #[i.caret]
.disco-card(
ng-repeat="card in [].constructor($ctrl.numCards) track by $index"
)
script(id="filter-container.tpl" type="text/ng-template")
.container.container-filters.text-left
//- pre {{ $ctrl.filters | json }}
//- h5.text-center.text-bolder The name of the filter
.form-group.clearfix.visible-xs
//- button.btn.btn-default(ng-click="$ctrl.close()") Apply Filters
button.btn.btn-link(ng-click="$ctrl.clearAll()")
| Clear All
//- button.btn.btn-info Cancel
button.btn.btn-clear.btn-icon.pull-right(
ng-click="$ctrl.close()"
) #[i.fa.fa-times.fa-2x]
.row
.col-sm-6.col-sm-push-6
.form-group.clearfix.hidden-xs
button.btn.btn-default
| Apply
button.btn.btn-link(ng-click="$ctrl.clearAll()")
| Clear All
.btn-group.pull-right
//- button.btn.btn-default(ng-click="$ctrl.close()") Apply Filters
button.btn.btn-clear.pull-right.btn-icon(
ng-click="$ctrl.close()"
) #[i.fa.fa-times]
.form-group
//- pre {{ $ctrl.somethingSelected() }}
.well.well-sm.text-left(ng-show="!$ctrl.countFilters > 0")
| Toggle filters on to build your search parameters
ul.tag-container
li.tagit-tag(
ng-repeat="filter in $ctrl.filters"
ng-if="filter.active"
title="{{ filter.title }}"
) {{ filter.title }}
a.tagit-action
| #[i.fa.fa-times(ng-click="$ctrl.toggleFilter(filter)")]
ul.tag-container
li.tagit-tag(
ng-repeat="subFilter in filter.filters"
ng-if="subFilter.active"
title="{{ subFilter.title }}"
) {{ subFilter.title }}
a.tagit-action
| #[i.fa.fa-times(ng-click="$ctrl.toggleFilter(subFilter)")]
.col-sm-6.col-sm-pull-6(ng-switch="$ctrl.type")
div(ng-switch-when="list")
.form-group.filter-search.clearfix
input.form-control(type="text"
placeholder="Filter Results"
ng-model="filterSearch"
)
.form-group
.list-group.filter-list-group
//- ng-class="{'active': filter.active}"
.list-group-item.list-group-item-action(
ng-repeat="filter in $ctrl.filters | filter:filterSearch"
)
a(ng-click="$ctrl.toggleFilter(filter)")
| #[i.fa.fa-check(ng-show="filter.active")] {{ filter.title }}
a.pull-right.text-black(
ng-click="open = !open"
ng-show="filter.filters.length && !filterSearch"
) ({{ filter.filters.length }}) #[i.caret]
//- div(ng-show="open")
.list-group(ng-if="(filterSearch && filter.filters.length) || (filter.filters.length && open)")
.list-group-item(ng-repeat="subFilter in filter.filters | filter:filterSearch")
a(ng-click="$ctrl.toggleFilter(subFilter)") #[i.fa.fa-check(ng-show="subFilter.active")] {{ subFilter.title }}
//- .list-group-item.list-group-item-action
//- pre {{ filter.filters }}
//- a(
//- ng-class="{'active': subFilter.active}"
//- ng-repeat="subFilter in filter.filters | subFilter:filterSearch"
//- ng-click="$ctrl.toggleFilter(filter)"
//- ) #[i.fa.fa-check(ng-show="subFilter.active")] {{ subFilter.title }}
//- .list-group.filter-list-group
div(ng-switch-when="date")
.form-group
h5 From:
input.form-control(type="date")
.form-group
h5 Until:
input.form-control(type="date")
.form-group
button.btn.btn-default Add
button.btn.btn-link Clear
//- .form-group.clearfix.hidden-xs
//- button.btn.btn-default(ng-click="$ctrl.close()") Apply Filters
//- button.btn.btn-info(ng-click="$ctrl.clearAll()") Clear All
//- button.btn.btn-info.pull-right(ng-click="$ctrl.close()") Cancel
Raw
script.typescript
console.log('started: ' + new Date())
const app = angular
.module('MyApp', [
'ngSanitize',
'ui.bootstrap',
])
type Filter = {
title: string
id: number
active?: boolean
filters?: Filter[]
}
interface FilterData {
type: string
title: string
filters?: Filter[]
}
app.factory('filterData', (): FilterData[] => {
return [
{
type: 'list',
title: 'Category',
filters: [
{
title: 'Barnham',
id: Math.random(),
},
{
title: 'Merrygrip',
id: Math.random(),
filters: [
{
title: 'Moltip',
id: Math.random(),
},
{
title: 'Minktile',
id: Math.random(),
},
{
title: 'Surringdon',
id: Math.random(),
},
]
},
{
title: 'Longmerryweather Longton',
id: Math.random(),
},
{
title: 'Southington',
id: Math.random(),
},
{
title: 'Soulderry',
id: Math.random(),
},
{
title: 'Melgumshire',
id: Math.random(),
},
{
title: 'Fingalton',
id: Math.random(),
},
{
title: 'Durry',
id: Math.random(),
},
{
title: 'Sheldoon',
id: Math.random(),
},
{
title: 'Cedarwicke',
id: Math.random(),
},
{
title: 'Ringelthorne',
id: Math.random(),
},
{
title: 'Pumtrick',
id: Math.random(),
},
],
},
{
title: 'Status',
type: 'list',
filters: [
{
title: 'One',
id: Math.random(),
},
{
title: 'Two',
id: Math.random(),
},
{
title: 'Three',
id: Math.random(),
},
{
title: 'Four',
id: Math.random(),
},
],
},
{
title: 'Stage',
type: 'list',
filters: [
{
title: 'Gather',
id: Math.random(),
},
{
title: 'Review',
id: Math.random(),
},
{
title: 'Closed',
id: Math.random(),
},
]
},
{
title: 'Date Added',
type: 'date',
},
{
title: 'Status',
type: 'list',
filters: [
{
title: 'In Progress',
id: Math.random(),
},
{
title: 'On Hold',
id: Math.random(),
},
{
title: 'In Review',
id: Math.random(),
},
]
},
{
title: 'Keyword',
type: 'list',
filters: [
{
title: 'One',
id: Math.random(),
},
{
title: 'Two',
id: Math.random(),
},
{
title: 'Three',
id: Math.random(),
},
{
title: 'Four',
id: Math.random(),
},
]
},
]
})
class MyComponentCtrl {
// data: FilterData
filterList: FilterData
filtersOpen: boolean
activeFilter: any
selectedFilters: any
availableFilters: Filter[]
numCards = 20
constructor(filterData: FilterData) {
this.filterList = filterData
this.filtersOpen = true
this.activeFilter = filterData[0]
}
get countFilters(): number {
let i: number = 0
this.availableFilters.forEach((item: any) => {
if (item.active) {
i++
}
})
return i
}
toggleFilter(filter: Filter) {
if (this.activeFilter === filter) {
this.filtersOpen = false
this.activeFilter = undefined
return
} else {
this.filtersOpen = true
}
this.activeFilter = filter
}
}
app.component('myComponent', {
controller: MyComponentCtrl,
templateUrl: 'my-component.tpl',
})
class FilterContainerCtrl {
filters: FilterData
isOpen: boolean
// constructor() {
// this.filterList = this.filters.filters
// }
//
toggleFilter(filter: any) {
filter.active = !filter.active
// if (filter.constructor === Array) {
// filter.forEach((f: Filter) => {
// f.active = !f.active
// })
// } else {
// filter.active = true
// }
}
//
close() {
this.isOpen = false
}
//
clearAll() {
this.filters.filters.forEach((filter: Filter) => {
filter.active = false
})
}
//
// get countFilters(): number {
// let i: number = 0
//
// this.filters.filters.forEach((item: any) => {
// if (item.active) {
// i++
// }
// })
//
// return i
// }
}
app.component('filterContainer', {
controller: FilterContainerCtrl,
templateUrl: 'filter-container.tpl',
bindings: {
filters: '=',
type: '<',
isOpen: '=',
},
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.5/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
Raw
style.less
@gray-lighter: #f1f1f1;
@gray-light: #ececec;
@gray: #cecece;
@gray-dark: #777;
@gray-darker: #111;
@black: black;
body
,html {
background: @gray-lighter;
padding: 0;
margin: 0;
}
.btn {
outline: none !important;
}
.page {
// max-width: 800px;
margin: 0 auto;
position: relative;
// text-align: center;
background: white;
min-height: 100vh;
> h1 {margin-top: 0;}
}
.search-control {
width: 100%;
padding: .75em;
max-width: 35em;
margin: 1em auto;
display: block;
}
.navbar-default {
background: black;
margin: 0;
}
.list-group-item {
> .list-group {
margin-top: 1em;
margin-bottom: 0;
}
}
.discover {
text-align: center;
position: relative;
border-top: 1px solid @gray-light;
&.blur {
filter: blur(5px);
// background: rgba(0,0,0,0.05);
}
.disco-card {
display: inline-block;
width: 15em;
height: 25em;
background: @gray-light;
border-radius: 5px;
margin: 0.25em 0.5em 1em;
}
}
.disco-filter-dropdown {
position: absolute;
width: 100%;
left: 0;
right: 0;
}
// .filter-search {
// max-width: 20em;
// }
.tag-container {
margin: 0 auto;
display: block;
// background: @gray-lighter;
}
.tagit-tag {
// width: 45%;
background: @gray-lighter;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
vertical-align: top;
white-space: nowrap;
padding-right: 1.5em !important;
a {
position: absolute;
right: 0.25em;
}
> .tag-container {
margin-top: 0.75em;
}
}
.filter-list-group {
max-height: 20em;
overflow: auto;
border-top: 1px solid @gray-lighter;
border-bottom: 1px solid @gray-lighter;
@media screen and (max-width: 700px) {
max-height: 40em;
}
}
.search-header {
.btn-link.active {
color: black;
border: 1px solid @gray-light;
border-bottom: none;
background: @gray-lighter;
text-decoration: none !important;
}
}
.filter-container {
position: absolute;
// background: white;
// background: rgba(255,255,255,0.5);
// backdrop-filter: blur(3px);
width: 100%;
margin-top: 1px;
z-index: 99999;
background: white;
// padding-bottom: 1em;
border-bottom: 1px solid @gray-lighter;
border-top: 3px solid @gray-lighter;
box-shadow: 0 2px 2px 0 @gray-lighter;
// border-top: 1px solid #ececec;
margin-top: -1px;
top: auto; right: 0; bottom: auto; left: 0;
@media screen and (max-width: 700px) {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
.container-filters {
max-width: 55em;
padding-top: 1em;
background: white;
margin: 0 auto;
// background: white;
}
}
Raw
styles
<link href="https://wazo.qa.ukwest.wazoku.com/static/build/clients/base/main.min.css?v=be8e5f84797e3f94b60e8369951108f3" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment