Twitter Bootstrap Integration не работает в Google Chrome

[elkernos]

Не работает выделение и подсветка. Насколько я понял проблема где-то здесь: panel = $('<div class="panel" />'); button = $('<button class="btn btn-default" />'); link_hover = $('<button class="btn btn-link" />').hover(); text_muted = $('<span class="text-muted" />'); disabled = $('<span class="text-muted" />'); selected = $('<div class="alert alert-info" />'); parameters = { $border_radius: '.4em', $background: panel.css('background-color'),

Google Chrome не может получить значение стиля у $('<div class="panel" />') в panel.css('background-color') и далее по коду.

Пример получения значения стиля: http://fiddle.jshell.net/aa42p0o7/3/ - работает в Firefox'е, но не работает в Crome'е.

[nazar-pc]

1) В примере не подключен bootstrap 2) Если его подключить - ваши стили переопределяют стили bootstrap

Можно нормальный пример с PickMeUp?

[elkernos]

1) В примере я указал какая конструкция не работает в Google Chrome, которая используется в коде jquery.pickmeup.twitter-bootstrap.js.

Никак не мог разобраться как jquery.pickmeup.twitter-bootstrap.js выложить, поэтому так: http://jsfiddle.net/ukbpy674/7/

[nazar-pc]

Ветки master и gh-pages одинаковые, так что https://nazar-pc.github.io/PickMeUp/js/jquery.pickmeup.twitter-bootstrap.js, аналогично остальным файлам.

Я поставил тему по-умолчанию: https://jsfiddle.net/ukbpy674/8/ Воспроизводится, видать, они там что-то поменяли, нужно будет глянуть. Если исправите раньше меня - присылайте pull request, буду благодарен.

[EHLOVader]

I am also having this same problem. It appears to be because PMU classes are being pushed into the class name instead of applying styles directly to the dates.

I can't find the point which this switch in behavior was made but no selection styles are shown.

[nazar-pc]

@EHLOVader, look at source code - I'm just creating test element and read which styles were applied. Probably, TB in last versions changed something - we just need to pick another element where to take colors from. Feel free to send pull request for that.

[EHLOVader]

Yup. thanks @nazar-pc I saw @elkernos had included a snippet but digging deeper the source code of the core doesn't appear to work in the same way as the source of the twitter bootstrap extension was designed.

Like you said, you create objects instances to pull the raw styles applied to them. But the core functions in more of a class assignment method.

Pushing classes onto the elements to indicate selected, disabled, etc.

I was actually able to use these to create the styles I needed in my application. Making the twitter bootstrap plugin work with the core as it is now would likely require some huge changes.

[nazar-pc]

I didn't understand exactly what you mean, can you rephrase you thought?

[EHLOVader]

Of course I would. Well I shall try.

tl;dr I agree. I looked at the code and believe I understand how the twitter bootstrap plugin does its magic.

The core of pickmeup uses classes. pmu-selected, pmu-disabled, etc... the twitter bootstrap however uses styles.

I don't think those two methods of performing the update will be compatible. I would think that it would be better to use the twitter classes in place of the pmu- prefix classes.

[nazar-pc]

The core of pickmeup uses classes. pmu-selected, pmu-disabled, etc... the twitter bootstrap however uses styles.

This is why we don't need any additional classes, we just modify stylesheet, but instead of changing variables in SCSS config we pick colors from TB elements. Eventually we have generated on-fly styles for PickMeUp, but using colors from TB.

So, the bug is that we pick wrong elements I guess. It works in the same way for UIkit integration, and can be easily modified to be used with any other CSS framework.

[EHLOVader]

Oh. I see now. :dizzy_face: I wasn't grokking the code as much as I thought. You do throw the styles in the header but you aren't replacing all of the placeholders.

.pickmeup-twitter-bootstrap {
    background:;
    border-radius: .4em;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: none;
    position: absolute
}

.pickmeup-twitter-bootstrap * {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.pickmeup-twitter-bootstrap .pmu-instance {
    display: inline-block;
    height: 13.8em;
    padding: .5em;
    text-align: center;
    width: 15em
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-button {
    color:;
    cursor: pointer;
    outline: 0;
    text-decoration: none
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-today {
    background: $selected_background;
    color: $color_hover
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-button:hover {
    background: $background;
    color:
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-not-in-month {
    color:
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-disabled, .pickmeup-twitter-bootstrap .pmu-instance .pmu-disabled:hover {
    color:;
    cursor: default
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-selected {
    background:;
    color:
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-not-in-month.pmu-selected {
    background: $selected_background
}

.pickmeup-twitter-bootstrap .pmu-instance nav {
    color: $color;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    line-height: 2em
}

.pickmeup-twitter-bootstrap .pmu-instance nav *:first-child :hover {
    color: $color_hover
}

.pickmeup-twitter-bootstrap .pmu-instance nav .pmu-prev, .pickmeup-twitter-bootstrap .pmu-instance nav .pmu-next {
    display: none;
    height: 2em;
    width: 1em
}

.pickmeup-twitter-bootstrap .pmu-instance nav .pmu-month {
    width: 14em
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-years *, .pickmeup-twitter-bootstrap .pmu-instance .pmu-months * {
    display: inline-block;
    line-height: 3.6em;
    width: 3.5em
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-day-of-week {
    color: $not_in_month_hover;
    cursor: default
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-day-of-week *, .pickmeup-twitter-bootstrap .pmu-instance .pmu-days * {
    display: inline-block;
    line-height: 1.5em;
    width: 2em
}

.pickmeup-twitter-bootstrap .pmu-instance .pmu-day-of-week * {
    line-height: 1.8em
}

.pickmeup-twitter-bootstrap .pmu-instance:first-child .pmu-prev, .pickmeup-twitter-bootstrap .pmu-instance:last-child .pmu-next {
    display: block
}

.pickmeup-twitter-bootstrap .pmu-instance:first-child .pmu-month, .pickmeup-twitter-bootstrap .pmu-instance:last-child .pmu-month {
    width: 13em
}

.pickmeup-twitter-bootstrap .pmu-instance:first-child:last-child .pmu-month {
    width: 12em
}

.pickmeup-twitter-bootstrap:not(.pmu-view-days) .pmu-days, .pickmeup-twitter-bootstrap:not(.pmu-view-days) .pmu-day-of-week, .pickmeup-twitter-bootstrap:not(.pmu-view-months) .pmu-months, .pickmeup-twitter-bootstrap:not(.pmu-view-years) .pmu-years {
    display: none
}

Looks like you have just used some _s when they should have been -s

It may be easy to produce a PR for that, now understanding what the real problem was. Let me see.

EDIT: Playing around with it some more. I am finding that those are in there because the .css method isn't pulling the calculated values on elements which are not yet in the documents DOM. Temporarily adding them seems to fix it.

[AlexPa]

Починить нужно) Сколько времени прошло

[nazar-pc]

У меня сейчас в проектах TB не используется, буду рад принять PR с исправлением.

[nazar-pc]

Should be fixed in 4ff48a5