pidgin/nest
Clone
Summary
Browse
Changes
Graph
closing merged branch
help-weights
2019-08-23, Gary Kramlich
6af542ccd6f4
closing merged branch
{{
/***
Templates
***/
}}
{{
define
"trusted"
}}
<
span
aria-label
=
"
{{
T
"Trusted"
}}
"
class
=
"tooltipped tooltipped-s"
>
<
i
class
=
"fas fa-check-circle "
style
=
"color:#784a85"
></
i
>
</
span
>
{{
end
}}
{{
define
"community"
}}
<
span
aria-label
=
"
{{
T
"Community"
}}
"
class
=
"tooltipped tooltipped-s"
>
<
i
class
=
"fas fa-users"
style
=
"color:green"
></
i
>
</
span
>
{{
end
}}
{{
/***
Content
***/
}}
<
p
>
{{
T
"Plugin-Info"
}}
</
p
>
<
ul
>
<
li
>
{{
template
"trusted"
}}
{{
T
"Trusted-Info"
}}
</
li
>
<
li
>
{{
template
"community"
}}
{{
T
"Community-Info"
}}
</
li
>
</
ul
>
<
div
id
=
"plugin-filters"
>
<
div
id
=
"publisher-selector"
>
<
label
style
=
"display: inline-block;"
>
<
input
type
=
"radio"
id
=
"all"
name
=
"publisher"
style
=
"margin-right: 0; margin-left: 0.75rem;"
value
=
"all"
checked
>
All
</
label
>
<
label
style
=
"display: inline-block;"
>
<
input
type
=
"radio"
id
=
"pidgin"
name
=
"publisher"
style
=
"margin-right: 0; margin-left: 0.75rem;"
value
=
"pidgin"
>
{{
template
"trusted"
}}
{{
T
"Trusted"
}}
</
label
>
<
label
style
=
"display: inline-block;"
>
<
input
type
=
"radio"
id
=
"community"
name
=
"publisher"
style
=
"margin-right: 0; margin-left: 0.75rem;"
value
=
"community"
>
{{
template
"community"
}}
{{
T
"Community"
}}
</
label
>
</
div
>
<
input
type
=
"text"
id
=
"plugin-filter-search"
placeholder
=
"
{{
T
"Search-placeholder"
}}
"
/>
<
div
id
=
"protocol-selector"
></
div
>
</
div
>
<
table
id
=
"protocol-table"
>
<
thead
>
<
th
></
th
>
<
th
>
{{
T
"Name"
}}
</
th
>
<
th
>
{{
T
"Info"
}}
</
th
>
<
th
>
{{
T
"Maintainer"
}}
<
br
/>
{{
T
"Repo"
}}
</
th
>
</
thead
>
<
tbody
>
{{
range
.Site.Data.plugins
}}
<
tr
data-type
=
"
{{
.type
}}
"
{{
if
.isTrusted
}}
isTrusted
=
"true"
{{
end
}}
>
<
td
>
{{
if
.logo
}}
<
img
src
=
"
{{
.logo
}}
"
/>
{{
else
}}
{{
end
}}
</
td
>
<
td
class
=
"plugin-heading"
>
{{
.heading
}}
</
td
>
<
td
class
=
"plugin-info"
>
{{
if
eq
true
.isTrusted
}}
{{
template
"trusted"
}}
{{
else
}}
{{
template
"community"
}}
{{
end
}}
<
b
>
{{
.type
}}
</
b
>
{{
.info
|
markdownify
}}
</
td
>
<
td
class
=
"plugin-repo"
>
<
a
href
=
"
{{
.repo
}}
"
>
{{
.maintainer
}}
</
a
>
</
td
>
</
tr
>
{{
end
}}
</
tbody
>
</
table
>
<
script
>
document
.
addEventListener
(
"DOMContentLoaded"
,
()
=>
{
const
selectorsContainer
=
document
.
getElementById
(
"protocol-selector"
);
const
search
=
document
.
getElementById
(
"plugin-filter-search"
);
search
.
addEventListener
(
"input"
,
debounce
(
1000
*
0.5
,
filterRows
));
const
[,
...
rows
]
=
document
.
getElementById
(
"protocol-table"
).
getElementsByTagName
(
"tr"
);
const
types
=
{};
const
typeFilter
=
new
Set
();
const
rowinfo
=
rows
.
map
(
elem
=>
{
const
type
=
elem
.
dataset
.
type
;
if
(
type
)
{
if
(
!
types
[
type
])
types
[
type
]
=
[]
types
[
type
].
push
(
elem
);
}
return
{
elem
,
head
:
getContents
(
"plugin-heading"
,
elem
),
info
:
getContents
(
"plugin-info"
,
elem
),
repo
:
getContents
(
"plugin-repo"
,
elem
),
isTrusted
:
elem
.
getAttribute
(
'isTrusted'
)
==
'true'
}
})
document
.
getElementById
(
"publisher-selector"
)
.
addEventListener
(
'click'
,
filterRows
)
Object
.
keys
(
types
).
forEach
(
type
=>
{
const
label
=
createAndAppend
(
"label"
,
selectorsContainer
);
label
.
classList
.
add
(
'pidgin-plugin-filter-checkbox'
)
const
input
=
createAndAppend
(
"input"
,
label
);
input
.
type
=
"checkbox"
;
input
.
dataset
.
type
=
type
input
.
addEventListener
(
"click"
,
clickEvent
);
label
.
appendChild
(
document
.
createTextNode
(
type
));
});
/////////////////////////
function
getContents
(
className
,
elem
){
return
(
elem
.
getElementsByClassName
(
className
)[
0
]
.
textContent
.
toLowerCase
()
)
}
function
clickEvent
({
target
})
{
typeFilter
[
target
.
checked
?
"add"
:
"delete"
](
target
.
dataset
.
type
);
filterRows
();
}
const
publisherRadioQuery
=
'input[name="publisher"]:checked'
function
filterRows
()
{
const
str
=
(
search
.
value
||
""
).
toLowerCase
()
const
publisherSelector
=
document
.
querySelector
(
publisherRadioQuery
).
value
;
rowinfo
.
forEach
((
row
)
=>
{
if
(
shouldFilter
(
row
,
publisherSelector
,
str
))
row
.
elem
.
classList
.
remove
(
"filter-hide"
);
else
row
.
elem
.
classList
.
add
(
"filter-hide"
);
});
}
function
shouldFilter
(
row
,
publisher
,
str
)
{
return
(
// Checkboxes
(
!
typeFilter
.
size
||
typeFilter
.
has
(
row
.
elem
.
dataset
.
type
))
// Provider
&&
(
publisher
==
'all'
||
(
publisher
==
'pidgin'
&&
row
.
isTrusted
)
||
(
publisher
==
'community'
&&
!
row
.
isTrusted
)
)
// Search box
&&
(
!
str
||
row
.
head
.
includes
(
str
)
||
row
.
info
.
includes
(
str
)
||
row
.
repo
.
includes
(
str
)
)
)
}
function
debounce
(
t
,
fn
)
{
let
timer
;
return
function
(...
args
)
{
clearTimeout
(
timer
);
timer
=
setTimeout
(()
=>
fn
(...
args
),
t
);
};
}
function
createAndAppend
(
tag
,
elem
=
document
)
{
return
elem
.
appendChild
(
document
.
createElement
(
tag
));
}
});
</
script
>
<
style
>
.
filter-hide
{
display
:
none
;
}
#
plugin-filters
{
text-align
:
right
;
}
#
plugin-filter-search
{
text-align
:
right
;
max-width
:
250
px
;
display
:
inline-block
;
}
#
protocol-selector
label
{
text-align
:
right
;
display
:
inline-block
;
}
#
protocol-selector
input
{
margin
:
8
px
;
display
:
inline-block
;
}
</
style
>