zoxon 5 3 924
Видимо, пользователь решил о себе ничего не говорить.
// Изменяет URL в формате key/value
// Возвращяет изменный URL
function UpdateQueryString(key, value, url) {
if (!url) {
url = window.location.href;
}
var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
var separator = '/';
if (url.match(re)) {
return url.replace(re, '$1' + key + "/" + value + '$2');
}
else {
return url + separator + key + "/" + value;
}
}
Функция на javascript для генерации масива БЭМ модификаторов. Использую такую в jade.
На вход тербует json обьект вида
{
'base': 'block',
'mods': [
'key': 'value',
'key2': 'value2'
]
}
Возвращяет масив вида ['block', 'block_key_value', 'block_key2_value2']
-
var _mods = function (data) {
var mods = [data.base];
if (data.mods) {
data.mods.forEach(function(mod, index) {
if (typeof mod === "string") {
mods.push(mods[0] + '_' + mod);
}
else {
for (var key in mod) {
var val = mod[key];
if (key === "mod") {
mods.push(mods[0] + '_' + val);
}
else {
mods.push(mods[0] + '_' + key + '_' + val);
}
}
}
});
}
return mods;
};
Примеры использования
//- Test 1 key/value
- var myMods = _mods({'base': 'module-name', 'mods': [{'key': 'value'}, {'key2': 'value2'}]});
div(class=myMods)= myMods
//- Test 2 value
- var myMods = _mods({'base': 'module-name', 'mods': ['mod1', 'mod2']});
div(class=myMods)= myMods
//- Test 3 mixed
- var myMods = _mods({'base': 'module-name', 'mods': [{'key': 'value'}, {'key2': 'value2'}, {'mod': 'mod1'}, {'mod': 'mod2'}]});
div(class=myMods)= myMods
//-//////////////////////////////////////////////////////////
//- Mixins
//-//////////////////////////////////////////////////////////
button-style(color, color-hover, background, background-hover, border, border-hover)
&
&:visited
color color
background-color background
if border
border-color border
&:focus
&:hover
&:active
if color-hover
color color-hover
else
color color
if background-hover
background-color background-hover
else
background-color background - 10%
if border-hover
border-color border-hover
else
if border
border-color border - 25%
&:active
background-image none
&.button
&_disabled
&[disabled]
&
&:hover
&:focus
&:active
color color
background-color background
border-color border
button-size(padding, font-size, line-height)
padding padding
font-size font-size
if line-height
line-height line-height
//-//////////////////////////////////////////////////////////
//- Base style
//-//////////////////////////////////////////////////////////
.button
display inline-block
margin-bottom 0
font-weight normal
text-align center
vertical-align middle
touch-action manipulation
cursor pointer
background-image none
border-color transparent
border-style solid
border-width 0
border-radius 0
white-space nowrap
line-height normal
-webkit-user-drag none
-webkit-user-select none
-moz-user-select none
-ms-user-select none
user-select none
box-sizing border-box
text-decoration none
background-color transparent
padding 0
transition 125ms all ease-in-out
&__icon
&__text
display inline-block
vertical-align middle
line-height 1
&__icon + &__text
&__text + &__icon
margin-left 8px
&__icon
fill currentColor
&:focus
&:active:focus
outline thin dotted
outline 5px auto -webkit-focus-ring-color
outline-offset -2px
&:hover
&:focus
color #333333
text-decoration none
&:active
&_active
outline 0
background-image none
box-shadow inset 0 3px 5px rgba(0 0 0 0.125)
&_disabled
&[disabled]
&
&:hover
&:focus
&:active
opacity 0.65
box-shadow none
outline none
a&_disabled
pointer-events none
//- Block button
.button_block
display: block;
width: 100%;
& + &
// margin-top: 10px;
input[type="submit"]&
input[type="reset"]&
input[type="button"]&
width: 100%;
//-//////////////////////////////////////////////////////////
//- Button sizes
//-//////////////////////////////////////////////////////////
.button
.button_size_normal
button-size(
padding: 18px 20px,
font-size: 18px,
line-height: 1.4
)
.button_size_extra-large
button-size(
padding: 26px 32px,
font-size: 22px,
line-height: 1.4
)
.button_size_large
button-size(
padding: 22px 28px,
font-size: 20px,
line-height: 1.4
)
.button_size_small
button-size(
padding: 10px 18px,
font-size: 16px,
line-height: 1.4
)
.button_size_extra-small
button-size(
padding: 6px 12px,
font-size: 14px,
line-height: 1.4
)
//-//////////////////////////////////////////////////////////
//- Styles and colors
//-//////////////////////////////////////////////////////////
// Ghost
.button_style_ghost
border-width 1px
.button_style_ghost.button_color_white
button-style(
color: #fff,
color-hover: #333,
background: transparent,
background-hover: #fff,
border: #fff,
border-hover: #fff
)
.button_style_ghost.button_color_red
button-style(
color: #f05050,
color-hover: #fff,
background: transparent,
background-hover: #f05050,
border: #f05050,
border-hover: #f05050
)
// Solid
.button_style_solid.button_color_light-green
button-style(
color: #545454,
color-hover: false,
background: #dcefd6,
background-hover: false,
border: false,
border-hover: false
)
.button_style_solid.button_color_green
button-style(
color: #fff,
color-hover: false,
background: #52ae32,
background-hover: false,
border: false,
border-hover: false
)
// Transparent
.button_style_transparent.button_color_white
button-style(
color: #fff,
color-hover: false,
background: transparent,
background-hover: false,
border: false,
border-hover: false
)