FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена...

38
Произвольная смена дизайна системного скроллбара Кузнецов Дмитрий, разработчик интерфейсов, 2GIS Online

description

Существует несколько десятков JavaScript библиотек для кастомизации скроллбара. Подавляющее их большинство является jQuery плагинами, которые заменяют механизм скролла. Такой подход имеет три серьёзных недостатка: отсутствие кросс-браузерности, потеря особенностей работы скролла на ряде платформ, зависимость от jQuery. Мы предположили, что любая комбинация браузера, операционной системы, «железа» и устройства для скролла удовлетворит пользователя в части механизма скролла лучше, чем самый продвинутый jQuery плагин. В нашем решении механизм скролла не меняется: он остаётся системным даже при отключенном JS. Вдобавок мы предлагаем набор плагинов для лучшего визуального оформления блока со скроллом.

Transcript of FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена...

Page 1: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Произвольная смена дизайнасистемного скроллбара

Кузнецов Дмитрий, разработчик интерфейсов, 2GIS Online

www.princexml.com
Prince - Non-commercial License
This document was created with Prince, a great way of getting web content onto paper.
Page 2: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Структура доклада1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

2

Page 3: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Зачем кастомизировать скроллбар?• Видение дизайнера

• Стратегическая возможность

• Одностраничные приложения

3

Page 4: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

4

Page 5: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

5

Page 6: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

6

Page 7: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

7

Page 8: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

CSS• Только webkit

• Ограничения по расположению скроллбара

• Непростой синтаксис

::-webkit-scrollbar-button:horizontal:decrement:hover {

}

01.

02.

8

Page 9: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

ECMAScript: эмуляция скролла• 40+ готовых решений

• Поддержка всех браузеров

• Подмена механизма скролла

• Трата ресурсов на эмуляцию

9

Page 10: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

ECMAScript: только замена скроллбара• 3 готовых решения

• Большой размер + проблемы с производительностью

• Модификация DOM и манипуляция стилями

• Ограничения по положению скроллбара

10

Page 11: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

11

Page 12: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Расчитываем ширину нативногоскроллбара

DHTML: offsetWidth

Δ = offsetWidth - clientWidth

12

Page 13: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Прячем нативный рисуем свой

13

Page 14: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Максимально свободная кастомизация<div class=" clipper ">

<div class=" scroller ">

Content

</div>

</div>

01.

02.

03.

04.

05.

14

Page 15: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Минимальное вмешательство в DOM• Атрибуты data-*

• Самые необходимые инлайн-стили

• Максимизация управления UI через CSS

15

Page 16: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Максимальное использование CSS• Барон знает о:

DOM-элементах ; CSS-классах ; событиях ; координатах

• Барон ничего не знает о:

opacity ; linear-gradient ; box-shadow ; position

. . .и других свойствах CSS

16

Page 17: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Оптимизация кодаwidth = scroller.offsetWidth

height = scroller.offsetHeight

offset = ['offsetWidth', 'offsetHeight']

size = scroller[ offset [direction]]

01.

02.

03.

04.

17

Page 18: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Независимость$ : function(selector, context) {

return bonzo(qwery(selector, context));

},

event : function(elem, event, func, mode) {

if (mode == 'trigger') mode = 'fire';

bean[mode || 'on'](elem, event, func);

}

01.

02.

03.

04.

05.

06.

07.

18

Page 19: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Расширяемость плагинами$('.clipper').

baron (). fix (). pull (). controls (). test ().

dispose ();

01.

02.

03.

19

Page 20: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

20

Page 21: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Плагин fix

scroller: '.scroller',

bar: '.scroller__bar',

barOnCls: 'baron'

elements: '.header__title',

outside: 'header__title_state_fixed',

before: 'header__title_position_top',

after: 'header__title_position_bottom'

});

.header__title_state_fixed {

position: absolute;

z-index: 1;

}

<div class="header">

<h1 class="header__title"></h1>

</div>

01.

02.

03.

01.

02.

03.

04.

05.

01.

02.

03.

04.

01.

02.

03.

$('.clipper_fix').baron({

}).fix({

CSS

html

The title was quite common

in most European countries

often in a slightly

modified form. In Italian,

the word used was Barone.

The corresponding title in

the Holy Roman Empire was

Freiherr.

Sticky footer

21

Page 22: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Плагин controls

scroller: '.scroller',

bar: '.scroller__bar',

barOnCls: 'baron'

elements: '.header__title',

outside: 'header__title_state_fixed',

before: 'header__title_position_top',

after: 'header__title_position_bottom'

track: '.scroller__track',

forward: '.scroller__up',

backward: '.scroller__down'

});

<div class="scroller__track"></div>

<div class="scroller__up"></div>

<div class="scroller__down"></div>

01.

02.

03.

01.

02.

03.

04.

01.

02.

03.

04.

01.

02.

03.

$('.clipper_fix').baron({

}).fix({

}).controls({

CSS

html

22

Page 23: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Плагин test

scroller: '.scroller',

bar: '.scroller__bar',

barOnCls: 'baron'

elements: '.header__title',

outside: 'header__title_state_fixed',

before: 'header__title_position_top',

after: 'header__title_position_bottom'

track: '.scroller__track',

forward: '.scroller__up',

backward: '.scroller__down'

01.

02.

03.

01.

02.

03.

04.

01.

02.

03.

$('.clipper_fix').baron({

}).fix({

}).controls({

}).test()

23

Page 24: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

scroller: '.scroller',

bar: '.scroller__bar',

barOnCls: 'baron'

elements: '.header__title',

outside: 'header__title_state_fixed',

before: 'header__title_position_top',

after: 'header__title_position_bottom'

track: '.scroller__track',

forward: '.scroller__up',

backward: '.scroller__down'

block: '.load',

elements: [{

self: '.load__value',

property: 'width'

}],

limit: 115,

callback: function() {

$('.load').css('background', 'red');

}

01.

02.

03.

01.

02.

03.

04.

01.

02.

03.

01.

02.

03.

04.

05.

06.

07.

08.

09.

$('.clipper_fix').baron({

}).fix({

}).controls({

}).test()

}).pull({

Плагин pull

24

Page 25: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

25

Page 26: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Baron vs jScrollPane

Baron is a title of nobility. In the

kingdom of England, the medieval Latin

word baro, baronis was used originally

to denote a tenant-in-chief of the

early Norman kings who held his lands

by the feudal tenure of "barony" (in

Latin per baroniam), and who was

entitled to attend the Great Council

which by the 13th century had

developed into the Parliament of

England.

The title was quite common in most

European countries often in a slightly

modified form. In Italian, the word

used was Barone. The corresponding

title in the Holy Roman Empire was

Freiherr.

The word baron comes from the Old

French baron, from a Late Latin baro

"man; servant, soldier, mercenary" (so

used in Salic Law; Alemannic Law has

barus in the same sense). Isidore in

the 7th century thought the word was

from Greek βαρύς "heavy" (because of

the "heavy work" done by mercenaries),

but the word is presumably of Old

Frankish origin, cognate with Old

English beorn meaning "warrior,

nobleman"). Cornutus in the first

century already reports a word barones

which he took to be of Gaulish origin.

He glosses it as meaning servos

militum and explains it as meaning

"stupid", by reference to classical

Latin bāro "simpleton, dunce"; because

of this early reference, the word has

also been suggested to derive from an

otherwise unknown Celtic *bar, but OED

takes this to be "a figment".

In the Peerage of England, Peerage of

Ireland, Peerage of Great Britain and

the Peerage of the United Kingdom,

barons form the lowest rank, placed

immediately below viscounts. A female

of baronial rank has the title

baroness. Feudal baronies (or

"baronies by tenure") are now obsolete

in England and without any legal force

but any such historical titles are

held in gross, that is to say are

deemed to be enveloped within a more

modern extant peerage title also held

by the holder, sometimes along with

vestigial manorial rights and tenures

by grand serjeanty.

William I introduced "baron" as a rank

in England to distinguish the men who

had pledged their loyalty to him under

the feudal system. Previously, in the

Anglo-Saxon kingdom of England, the

king's companions held the title of

earl and in Scotland, the title of

thane. All who held their feudal

barony "in-chief of the king", that is

with the king as his immediate

overlord, became alike barones regis

("barons of the king"), bound to

perform a stipulated annual military

service, and obliged to attend his

council. Eventually the greatest of

the nobles, especially those in the

marches, such as the Earls of Chester

or the Bishops of Durham, whose

territories were often deemed

palatinate, that is to say "worthy of

a prince", might refer to their own

tenants as "barons", where lesser

magnates spoke simply of their "men"

(homines).

Initially those who held land directly

from the king by military service,

from earls downwards, all bore alike

the title of baron, which was thus the

factor uniting all members of the

ancient baronage as peers one of

another. Under King Henry II, the

Dialogus de Scaccario already

distinguished between greater barons,

who held per baroniam by knight's

service, and lesser barons, who held

manors. Technically, Lords of Manors

are barons, or freemen, however they

do not use the term as a title. John

Selden in his esteemed work Titles of

Honour writes, "The word Baro (Latin

for Baron) hath been also so much

communicated, that not only all Lords

of Mannors have been from antient

time, and are at this day called

sometimes Barons (as in the stile of

their Court Barons, which is Curia

Baronis, &c. And I have read hors de

son Barony in a barr to an Avowry for

hors de son fee) But also the Judges

of the Exchequer have it from antient

time fixed on them."[4] Within a

century of the Norman Conquest of

1066, as in the case of Thomas Becket

in 1164, there arose the practice of

sending to each greater baron a

personal summons demanding his

attendance at the King's Council,

which evolved into the Parliament and

later into the House of Lords, whilst

as was stipulated in Magna Carta of

1215, the lesser barons of each county

would receive a single summons as a

group through the sheriff, and

representatives only from their number

would be elected to attend on behalf

of the group. These representatives

developed into the Knights of the

Shire, elected by the County Court

presided over by the sheriff, who

themselves formed the precursor of the

House of Commons. Thus appeared a

definite distinction, which eventually

had the effect of restricting to the

greater barons alone the privileges

and duties of peerage.

Later, the king started to create new

baronies in one of two ways: by a writ

of summons directing a chosen man to

attend Parliament, and in an even

later development by letters patent.

Writs of summons became the normal

method in medieval times, displacing

the method of feudal barony, but

creation of baronies by letters patent

is the sole method adopted in modern

times. Since the adoption of summons

by writ, baronies thus no longer

relate directly to land-holding, and

thus no more feudal baronies needed

thenceforth to be created. Following

the Modus Tenendi Parliamenta of 1419,

the Tenures Abolition Act 1660, the

Feudal Tenure Act (1662), and the

Fines and Recoveries Act of 1834,

titles of feudal barony became

obsolete and without legal force.

In the twentieth century Britain

introduced the concept of non-

hereditary life peers. All appointees

to this distinction have been at the

rank of baron. Life-peers are not

counted as part of the aristocracy

although in accordance with the

tradition applied to hereditary peers

they too are formally addressed in

parliament by their peers as "The

Noble Lord".

In addition, baronies are often used

by their holders as subsidiary titles,

for example as courtesy titles for the

son and heir of an Earl or higher

peer.

In Scotland, the rank of baron is a

rank of the ancient feudal nobility of

Scotland and refers to a holder of a

feudal barony, formerly a feudal

superiority over a proper territorial

entity erected into a free barony by a

Crown Charter, and is not usually

considered a rank of Peerage; as such

it can be transferred by either

inheritance or conveyance.

The Scottish equivalent of an English

baron is a Lord of Parliament.

Normally one refers to or addresses

Baron [X] as Lord [X] and his wife as

Lady [X]. In the case of women who

hold baronies in their own right, they

can be referred to as Baroness [X] as

well as Lady [X]. In direct address,

they can also be referred to as My

Lord, Your Lordship, or Your Ladyship,

but never as My Lady (except in the

case of a female judge). The husband

of a Baroness in her own right does

not receive any style in her right.

Children of Barons and Baronesses in

their own right, whether hereditary or

for life, have the style The

Honourable [Forename] [Surname]. After

the death of the father or mother, the

child may continue to use the style

Honourable.

Scottish feudal barons style their

surnames similarly to Clan Chiefs,

with the name of their barony

following their name, as in John Smith

of Edinburgh or John Smith, Baron of

Edinburgh.[5] Most formally, and in

writing, they are styled as The Much

Honoured Baron of Edinburgh. Their

wives are styled Lady Edinburgh, or

The Baroness of Edinburgh. The phrase

Lady of Edinburgh is wrong, if the

lady in question does not hold a

Scottish barony in her own right.

Orally, Scottish barons may be

addressed with the name of their

barony, as in Edinburgh or else as

Baron without anything else following,

which if present would suggest a

peerage barony. Informally, when

referring to a Scots feudal baron in

the third person, the name Laird of

[X] is used or simply [X].

Non-Scottish barons are styled The

Right Honourable The Lord [Barony].

Barons' wives are styled The Right

Honourable The Lady [Barony].

Baronesses in their own right are

either titled The Right Honourable The

Baroness [Barony] or The Right

Honourable The Lady [Barony], mainly

based on personal preference (e.g.,

Margaret, Lady Thatcher and Brenda,

Baroness Hale, both created baronesses

in their own right). Note the order of

the names. 'Lady Margaret Thatcher'

would denote that she was the daughter

of an earl, marquess or duke. Right

Honourable is frequently abbreviated

to Rt Hon. When referred to by the

Sovereign in public instruments, The

Right Honourable is changed to Our

right trusty and well-beloved, with

counsellor attached if they are a

Privy Counsellor.

Courtesy barons are styled simply Lord

[Barony], and their wives are Lady

[Barony]. The style of Right

Honourable and/or the article "The" in

front of the title is not used for

them.

A person holding a peerage in the rank

of baron is entitled to a coronet

bearing six silver balls (called

pearls) around the rim, equally spaced

and all of equal size and height. The

rim itself is neither jeweled, nor

"chased" (which is the case for the

coronets of peers of higher degree).

The actual coronet is mostly worn on

certain ceremonial occasions, such as

the coronation of a new monarch, but a

baron can bear his coronet of rank on

his coat of arms above the shield. In

heraldry, the baron's coronet is shown

with four of the balls visible.

Scottish feudal barons were entitled

to a red cap of maintenance (chapeau)

turned up ermine if petitioning for a

grant or matriculation of a coat of

arms between the 1930s and 2004. This

chapeau is identical to the red cap

worn by an English baron, but without

the silver balls or gilt. This is

sometimes depicted in armorial

paintings between the shield and the

helmet. Additionally, if the baron is

the head of a family he may include a

chiefly coronet which is similar to a

ducal coronet, but with four

strawberry leaves. Because the chapeau

was a relatively recent innovation, a

number of ancient Arms of Scottish

feudal barons do not display the

chapeau. Now Scottish feudal barons

are principally recognised by the

baron's helm, which in Scotland is a

steel helmet with grille of three

grilles, garnished in gold.

Occasionally the great tilting-helm

garnished with gold is shown, or a

helmet befitting a higher rank, if

held.

Baron

Etymology

Barons in the United Kingdom

Scotland

Style of address

Coronet

Baron is a title of nobility. In the

kingdom of England, the medieval Latin

word baro, baronis was used originally

to denote a tenant-in-chief of the

early Norman kings who held his lands

by the feudal tenure of "barony" (in

Latin per baroniam), and who was

entitled to attend the Great Council

which by the 13th century had

developed into the Parliament of

England.

The title was quite common in most

European countries often in a slightly

modified form. In Italian, the word

used was Barone. The corresponding

title in the Holy Roman Empire was

Freiherr.

The word baron comes from the Old

French baron, from a Late Latin baro

"man; servant, soldier, mercenary" (so

used in Salic Law; Alemannic Law has

barus in the same sense). Isidore in

the 7th century thought the word was

from Greek βαρύς "heavy" (because of

the "heavy work" done by mercenaries),

but the word is presumably of Old

Frankish origin, cognate with Old

English beorn meaning "warrior,

nobleman"). Cornutus in the first

century already reports a word barones

which he took to be of Gaulish origin.

He glosses it as meaning servos

militum and explains it as meaning

"stupid", by reference to classical

Latin bāro "simpleton, dunce"; because

of this early reference, the word has

also been suggested to derive from an

otherwise unknown Celtic *bar, but OED

takes this to be "a figment".

In the Peerage of England, Peerage of

Ireland, Peerage of Great Britain and

the Peerage of the United Kingdom,

barons form the lowest rank, placed

immediately below viscounts. A female

of baronial rank has the title

baroness. Feudal baronies (or

"baronies by tenure") are now obsolete

in England and without any legal force

but any such historical titles are

held in gross, that is to say are

deemed to be enveloped within a more

modern extant peerage title also held

by the holder, sometimes along with

vestigial manorial rights and tenures

by grand serjeanty.

William I introduced "baron" as a rank

in England to distinguish the men who

had pledged their loyalty to him under

the feudal system. Previously, in the

Anglo-Saxon kingdom of England, the

king's companions held the title of

earl and in Scotland, the title of

thane. All who held their feudal

barony "in-chief of the king", that is

with the king as his immediate

overlord, became alike barones regis

("barons of the king"), bound to

perform a stipulated annual military

service, and obliged to attend his

council. Eventually the greatest of

the nobles, especially those in the

marches, such as the Earls of Chester

or the Bishops of Durham, whose

territories were often deemed

palatinate, that is to say "worthy of

a prince", might refer to their own

tenants as "barons", where lesser

magnates spoke simply of their "men"

(homines).

Initially those who held land directly

from the king by military service,

from earls downwards, all bore alike

the title of baron, which was thus the

factor uniting all members of the

ancient baronage as peers one of

another. Under King Henry II, the

Dialogus de Scaccario already

distinguished between greater barons,

who held per baroniam by knight's

service, and lesser barons, who held

manors. Technically, Lords of Manors

are barons, or freemen, however they

do not use the term as a title. John

Selden in his esteemed work Titles of

Honour writes, "The word Baro (Latin

for Baron) hath been also so much

communicated, that not only all Lords

of Mannors have been from antient

time, and are at this day called

sometimes Barons (as in the stile of

their Court Barons, which is Curia

Baronis, &c. And I have read hors de

son Barony in a barr to an Avowry for

hors de son fee) But also the Judges

of the Exchequer have it from antient

time fixed on them."[4] Within a

century of the Norman Conquest of

1066, as in the case of Thomas Becket

in 1164, there arose the practice of

sending to each greater baron a

personal summons demanding his

attendance at the King's Council,

which evolved into the Parliament and

later into the House of Lords, whilst

as was stipulated in Magna Carta of

1215, the lesser barons of each county

would receive a single summons as a

group through the sheriff, and

representatives only from their number

would be elected to attend on behalf

of the group. These representatives

developed into the Knights of the

Shire, elected by the County Court

presided over by the sheriff, who

themselves formed the precursor of the

House of Commons. Thus appeared a

definite distinction, which eventually

had the effect of restricting to the

greater barons alone the privileges

and duties of peerage.

Later, the king started to create new

baronies in one of two ways: by a writ

of summons directing a chosen man to

attend Parliament, and in an even

later development by letters patent.

Writs of summons became the normal

method in medieval times, displacing

the method of feudal barony, but

creation of baronies by letters patent

is the sole method adopted in modern

times. Since the adoption of summons

by writ, baronies thus no longer

relate directly to land-holding, and

thus no more feudal baronies needed

thenceforth to be created. Following

the Modus Tenendi Parliamenta of 1419,

the Tenures Abolition Act 1660, the

Feudal Tenure Act (1662), and the

Fines and Recoveries Act of 1834,

titles of feudal barony became

obsolete and without legal force.

In the twentieth century Britain

introduced the concept of non-

hereditary life peers. All appointees

to this distinction have been at the

rank of baron. Life-peers are not

counted as part of the aristocracy

although in accordance with the

tradition applied to hereditary peers

they too are formally addressed in

parliament by their peers as "The

Noble Lord".

In addition, baronies are often used

by their holders as subsidiary titles,

for example as courtesy titles for the

son and heir of an Earl or higher

peer.

In Scotland, the rank of baron is a

rank of the ancient feudal nobility of

Scotland and refers to a holder of a

feudal barony, formerly a feudal

superiority over a proper territorial

entity erected into a free barony by a

Crown Charter, and is not usually

considered a rank of Peerage; as such

it can be transferred by either

inheritance or conveyance.

The Scottish equivalent of an English

baron is a Lord of Parliament.

Normally one refers to or addresses

Baron [X] as Lord [X] and his wife as

Lady [X]. In the case of women who

hold baronies in their own right, they

can be referred to as Baroness [X] as

well as Lady [X]. In direct address,

they can also be referred to as My

Lord, Your Lordship, or Your Ladyship,

but never as My Lady (except in the

case of a female judge). The husband

of a Baroness in her own right does

not receive any style in her right.

Children of Barons and Baronesses in

their own right, whether hereditary or

for life, have the style The

Honourable [Forename] [Surname]. After

the death of the father or mother, the

child may continue to use the style

Honourable.

Scottish feudal barons style their

surnames similarly to Clan Chiefs,

with the name of their barony

following their name, as in John Smith

of Edinburgh or John Smith, Baron of

Edinburgh.[5] Most formally, and in

writing, they are styled as The Much

Honoured Baron of Edinburgh. Their

wives are styled Lady Edinburgh, or

The Baroness of Edinburgh. The phrase

Lady of Edinburgh is wrong, if the

lady in question does not hold a

Scottish barony in her own right.

Orally, Scottish barons may be

addressed with the name of their

barony, as in Edinburgh or else as

Baron without anything else following,

which if present would suggest a

peerage barony. Informally, when

referring to a Scots feudal baron in

the third person, the name Laird of

[X] is used or simply [X].

Non-Scottish barons are styled The

Right Honourable The Lord [Barony].

Barons' wives are styled The Right

Honourable The Lady [Barony].

Baronesses in their own right are

either titled The Right Honourable The

Baroness [Barony] or The Right

Honourable The Lady [Barony], mainly

based on personal preference (e.g.,

Margaret, Lady Thatcher and Brenda,

Baroness Hale, both created baronesses

in their own right). Note the order of

the names. 'Lady Margaret Thatcher'

would denote that she was the daughter

of an earl, marquess or duke. Right

Honourable is frequently abbreviated

to Rt Hon. When referred to by the

Sovereign in public instruments, The

Right Honourable is changed to Our

right trusty and well-beloved, with

counsellor attached if they are a

Privy Counsellor.

Courtesy barons are styled simply Lord

[Barony], and their wives are Lady

[Barony]. The style of Right

Honourable and/or the article "The" in

front of the title is not used for

them.

A person holding a peerage in the rank

of baron is entitled to a coronet

bearing six silver balls (called

pearls) around the rim, equally spaced

and all of equal size and height. The

rim itself is neither jeweled, nor

"chased" (which is the case for the

coronets of peers of higher degree).

The actual coronet is mostly worn on

certain ceremonial occasions, such as

the coronation of a new monarch, but a

baron can bear his coronet of rank on

his coat of arms above the shield. In

heraldry, the baron's coronet is shown

with four of the balls visible.

Scottish feudal barons were entitled

to a red cap of maintenance (chapeau)

turned up ermine if petitioning for a

grant or matriculation of a coat of

arms between the 1930s and 2004. This

chapeau is identical to the red cap

worn by an English baron, but without

the silver balls or gilt. This is

sometimes depicted in armorial

paintings between the shield and the

helmet. Additionally, if the baron is

the head of a family he may include a

chiefly coronet which is similar to a

ducal coronet, but with four

strawberry leaves. Because the chapeau

was a relatively recent innovation, a

number of ancient Arms of Scottish

feudal barons do not display the

chapeau. Now Scottish feudal barons

are principally recognised by the

baron's helm, which in Scotland is a

steel helmet with grille of three

grilles, garnished in gold.

Occasionally the great tilting-helm

garnished with gold is shown, or a

helmet befitting a higher rank, if

held.

Baron

Etymology

Barons in the United Kingdom

Scotland

Style of address

Coronet

Сравнили механику baron и jScrollPane

26

Page 27: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

На самом деле нет

27

Page 28: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Что можно сравнитьBaron jScrollPane

Общий размер (gzip, kB) 2.11 + 4.47 4.52 + 30.1

DOM 0 +9

Расположение скроллбара Свободное Фиксированное

Механизм Нативный Эмуляция

Поддержка overflow: scroll все браузеры

Быстрый старт Сложнее Просто

28

Page 29: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

29

Page 30: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

HTML<div class=" clipper ">

<div class=" scroller ">

Content

</div>

</div>

<div class=" scroller__bar "></div>

01.

02.

03.

04.

05.

06.

30

Page 31: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

CSS. clipper {

overflow: hidden;

position: relative;

}

. scroller {

overflow-y: scroll;

}

. scroller::-webkit-scrollbar {

width: 0;

}

. scroller__bar {

position: absolute;

}

01.

02.

03.

04.

05.

06.

07.

08.

09.

10.

11.

12.

13.

31

Page 32: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Код$('.profit').baron({

scroller: '.scroller',

bar: $('.profit .scroller__bar'),

barOnCls: 'baron'

});

01.

02.

03.

04.

05.

32

Page 33: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Profit

Baron is a title of nobility. In the kingdom of England, the

medieval Latin word baro, baronis was used originally to denote a

tenant-in-chief of the early Norman kings who held his lands by

the feudal tenure of "barony" (in Latin per baroniam), and who was

entitled to attend the Great Council which by the 13th century had

developed into the Parliament of England.

The title was quite common in most European countries often in a

slightly modified form. In Italian, the word used was Barone. The

corresponding title in the Holy Roman Empire was Freiherr.

The word baron comes from the Old French baron, from a Late Latin

baro "man; servant, soldier, mercenary" (so used in Salic Law;

Alemannic Law has barus in the same sense). Isidore in the 7th

century thought the word was from Greek βαρύς "heavy" (because of

the "heavy work" done by mercenaries), but the word is presumably

of Old Frankish origin, cognate with Old English beorn meaning

"warrior, nobleman"). Cornutus in the first century already

reports a word barones which he took to be of Gaulish origin. He

glosses it as meaning servos militum and explains it as meaning

"stupid", by reference to classical Latin bāro "simpleton, dunce";

because of this early reference, the word has also been suggested

to derive from an otherwise unknown Celtic *bar, but OED takes

this to be "a figment".

In the Peerage of England, Peerage of Ireland, Peerage of Great

Britain and the Peerage of the United Kingdom, barons form the

lowest rank, placed immediately below viscounts. A female of

baronial rank has the title baroness. Feudal baronies (or

"baronies by tenure") are now obsolete in England and without any

legal force but any such historical titles are held in gross, that

is to say are deemed to be enveloped within a more modern extant

peerage title also held by the holder, sometimes along with

vestigial manorial rights and tenures by grand serjeanty.

William I introduced "baron" as a rank in England to distinguish

the men who had pledged their loyalty to him under the feudal

system. Previously, in the Anglo-Saxon kingdom of England, the

king's companions held the title of earl and in Scotland, the

title of thane. All who held their feudal barony "in-chief of the

king", that is with the king as his immediate overlord, became

alike barones regis ("barons of the king"), bound to perform a

stipulated annual military service, and obliged to attend his

council. Eventually the greatest of the nobles, especially those

in the marches, such as the Earls of Chester or the Bishops of

Durham, whose territories were often deemed palatinate, that is to

say "worthy of a prince", might refer to their own tenants as

"barons", where lesser magnates spoke simply of their "men"

(homines).

Initially those who held land directly from the king by military

service, from earls downwards, all bore alike the title of baron,

which was thus the factor uniting all members of the ancient

baronage as peers one of another. Under King Henry II, the

Dialogus de Scaccario already distinguished between greater

barons, who held per baroniam by knight's service, and lesser

barons, who held manors. Technically, Lords of Manors are barons,

or freemen, however they do not use the term as a title. John

Selden in his esteemed work Titles of Honour writes, "The word

Baro (Latin for Baron) hath been also so much communicated, that

not only all Lords of Mannors have been from antient time, and are

at this day called sometimes Barons (as in the stile of their

Court Barons, which is Curia Baronis. And I have read hors de son

Barony in a barr to an Avowry for hors de son fee) But also the

Judges of the Exchequer have it from antient time fixed on

them."[4] Within a century of the Norman Conquest of 1066, as in

the case of Thomas Becket in 1164, there arose the practice of

sending to each greater baron a personal summons demanding his

attendance at the King's Council, which evolved into the

Parliament and later into the House of Lords, whilst as was

stipulated in Magna Carta of 1215, the lesser barons of each

county would receive a single summons as a group through the

sheriff, and representatives only from their number would be

elected to attend on behalf of the group. These representatives

developed into the Knights of the Shire, elected by the County

Court presided over by the sheriff, who themselves formed the

precursor of the House of Commons. Thus appeared a definite

distinction, which eventually had the effect of restricting to the

greater barons alone the privileges and duties of peerage.

Later, the king started to create new baronies in one of two ways:

by a writ of summons directing a chosen man to attend Parliament,

and in an even later development by letters patent. Writs of

summons became the normal method in medieval times, displacing the

method of feudal barony, but creation of baronies by letters

patent is the sole method adopted in modern times. Since the

adoption of summons by writ, baronies thus no longer relate

directly to land-holding, and thus no more feudal baronies needed

thenceforth to be created. Following the Modus Tenendi Parliamenta

of 1419, the Tenures Abolition Act 1660, the Feudal Tenure Act

(1662), and the Fines and Recoveries Act of 1834, titles of feudal

barony became obsolete and without legal force.

In the twentieth century Britain introduced the concept of non-

hereditary life peers. All appointees to this distinction have

been at the rank of baron. Life-peers are not counted as part of

the aristocracy although in accordance with the tradition applied

to hereditary peers they too are formally addressed in parliament

by their peers as "The Noble Lord".

In addition, baronies are often used by their holders as

subsidiary titles, for example as courtesy titles for the son and

heir of an Earl or higher peer.

In Scotland, the rank of baron is a rank of the ancient feudal

nobility of Scotland and refers to a holder of a feudal barony,

formerly a feudal superiority over a proper territorial entity

erected into a free barony by a Crown Charter, and is not usually

considered a rank of Peerage; as such it can be transferred by

either inheritance or conveyance.

The Scottish equivalent of an English baron is a Lord of

Parliament.

Normally one refers to or addresses Baron [X] as Lord [X] and his

wife as Lady [X]. In the case of women who hold baronies in their

own right, they can be referred to as Baroness [X] as well as Lady

[X]. In direct address, they can also be referred to as My Lord,

Your Lordship, or Your Ladyship, but never as My Lady (except in

the case of a female judge). The husband of a Baroness in her own

right does not receive any style in her right. Children of Barons

and Baronesses in their own right, whether hereditary or for life,

have the style The Honourable [Forename] [Surname]. After the

death of the father or mother, the child may continue to use the

style Honourable.

Scottish feudal barons style their surnames similarly to Clan

Chiefs, with the name of their barony following their name, as in

John Smith of Edinburgh or John Smith, Baron of Edinburgh.[5] Most

formally, and in writing, they are styled as The Much Honoured

Baron of Edinburgh. Their wives are styled Lady Edinburgh, or The

Baroness of Edinburgh. The phrase Lady of Edinburgh is wrong, if

the lady in question does not hold a Scottish barony in her own

right. Orally, Scottish barons may be addressed with the name of

their barony, as in Edinburgh or else as Baron without anything

else following, which if present would suggest a peerage barony.

Informally, when referring to a Scots feudal baron in the third

person, the name Laird of [X] is used or simply [X].

Non-Scottish barons are styled The Right Honourable The Lord

[Barony]. Barons' wives are styled The Right Honourable The Lady

[Barony]. Baronesses in their own right are either titled The

Right Honourable The Baroness [Barony] or The Right Honourable The

Lady [Barony], mainly based on personal preference (e.g.,

Margaret, Lady Thatcher and Brenda, Baroness Hale, both created

baronesses in their own right). Note the order of the names. 'Lady

Margaret Thatcher' would denote that she was the daughter of an

earl, marquess or duke. Right Honourable is frequently abbreviated

to Rt Hon. When referred to by the Sovereign in public

instruments, The Right Honourable is changed to Our right trusty

and well-beloved, with counsellor attached if they are a Privy

Counsellor.

Courtesy barons are styled simply Lord [Barony], and their wives

are Lady [Barony]. The style of Right Honourable and/or the

article "The" in front of the title is not used for them.

A person holding a peerage in the rank of baron is entitled to a

coronet bearing six silver balls (called pearls) around the rim,

equally spaced and all of equal size and height. The rim itself is

neither jeweled, nor "chased" (which is the case for the coronets

of peers of higher degree).

The actual coronet is mostly worn on certain ceremonial occasions,

such as the coronation of a new monarch, but a baron can bear his

coronet of rank on his coat of arms above the shield. In heraldry,

the baron's coronet is shown with four of the balls visible.

Scottish feudal barons were entitled to a red cap of maintenance

(chapeau) turned up ermine if petitioning for a grant or

matriculation of a coat of arms between the 1930s and 2004. This

chapeau is identical to the red cap worn by an English baron, but

without the silver balls or gilt. This is sometimes depicted in

armorial paintings between the shield and the helmet.

Additionally, if the baron is the head of a family he may include

a chiefly coronet which is similar to a ducal coronet, but with

four strawberry leaves. Because the chapeau was a relatively

recent innovation, a number of ancient Arms of Scottish feudal

barons do not display the chapeau. Now Scottish feudal barons are

principally recognised by the baron's helm, which in Scotland is a

steel helmet with grille of three grilles, garnished in gold.

Occasionally the great tilting-helm garnished with gold is shown,

or a helmet befitting a higher rank, if held.

Baron

Etymology

Barons in the United Kingdom

Scotland del

Scotland del

Scotland

Style of address

Coronet

33

Page 34: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Итого• Свободная CSS-кастомизация скроллбара

• Автоматическая поддержка всего где есть overflow: scroll

• Fallback - нативный скроллбар

• Размер с зависимостями: от 6 кБ в gzip

• Система плагинов + 4 плагина в коробке

34

Page 35: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

<div><img src="//mc.yandex.ru/watch/837864" style="position:absolute; left:-9999px;" alt=""/></div>

Загрузка карты...

35

Поиск проезда

Ваш маршрут в 4 шага

Даже 2ГИС не знает ответана Ваш вопрос

— Проверьте, все ли названия написаны верно;— Уточните адрес в справочнике организаций;— Выберите место на карте и перетащите маркер.

Как сюда добраться, пока не знаетдаже 2ГИС

Мы уже работаем над этим. А пока вы можете заказатьтакси.

Пожалуйста, укажите обе точкимаршрута

Что-то пошло не так. Повторитезапрос через несколько минут

Начальная и конечная точкимаршрута совпадают. Попробуйтееще раз.

Вы искали как проехать от до .

Расстояние между выбранными пунктамимы рекомендуем пройти пешком. Это полезно дляздоровья и не займёт много времени.

Очистить

Введите адрес или место, откуда вы едете,в поле А; либо укажите точку на карте

Точно также укажите куда вы хотите попасть

Нажмите на кнопку «Проложить маршрут»

Выберите подходящий вам вариант маршрута

Поиск в справочнике

А

Б

← К результатам поиска

НайтиОпределение вашего города...

Page 36: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

В планах• Плагин для мега-быстрого старта

• Плагин для ликвидации зависимостей

• Ваши идеи?

• Автоматическое тестирование

36

Page 37: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

Автотесты (Phantom JS)

37

• Прогон всех тестов при коммите

• Отнимает 3-5 секунд + 5 минут просмотра тестов в реальных

браузерах

• Невозможно просмотреть или забыть тест

Page 38: FrontTalks: Дмитрий Кузнецов (2ГИС), «Произвольная смена дизайна системного скроллбара»

About

Кузнецов Дмитрий, разработчик интерфейсов 2GIS Online

[email protected]

github.com/Diokuz/baron

habrahabr.ru/company/2gis

38