Скачать os gui - Скачать исходный код os gui

os gui

Другой исходный код

v0.7.3 Taskbarless Minimization

Скачать

Библиотека для имитации графических пользовательских интерфейсов операционной системы в Интернете

В частности, Windows 98 - По крайней мере, по крайней мере; Это может быть расширен в будущем.

Эта библиотека поддерживает 98.js.org, веб-версия Windows 98, включая краску, блокнот, звуковой рекордер и многое другое.

Смотрите домашнюю страницу для получения дополнительной информации.

Функции

Стоки меню, с поддержкой флажок и радиоэлементов, состояний отключений, подменга
Приложения Windows, которые вы можете перетаскивать, максимизировать, минимизировать, закрывать и изменить размер
Варианты диалога и окна инструмента
Анимация по лету титула, которая направляет ваши глаза во время максимизации/минимизации/восстановления
Соблюдение фокусировки: если вы вкладка или вкладка Shift+в окне, он оборачивается до первого/последнего элемента управления.
Кнопки кнопок, включая легкие кнопки, отключенные кнопки и кнопки действий по умолчанию
Стили прокрутки, специфичные для Webkit (в будущем может появиться пользовательская прокрутка на основе неинтрузивной библиотеки Scrollbar или стилей, поддерживающих библиотеку, где вы ожидаете напрямую использовать библиотеку)
- Процедурно отображаемые стрелки, позволяющие иметь различные размеры прокрутки
- Эффект инверсии при нажатии на трек Scrollbar
Распространенные с Windows .theme & .themepack файлы во время выполнения !

Демо

Смотрите демо онлайн здесь

Смотрите также

98.js, мой веб -столик
Padraigfl/Packard-Belle
Arturbien/React95
React95/React95

Требования

Эта библиотека в настоящее время требует jQuery для окончательной реализации. Меню не требуют jQuery.

(В конце концов я хочу не иметь никаких зависимостей. Пока я удалил jQuery из кода меню ...)

Настраивать

Библиотека (пока) не предоставлена в виде единого удобного файла.

Вы можете либо 1. Загрузите репозиторий в виде файла ZIP, 2. Клонировать репозиторий, либо 3. Установите библиотеку в виде пакета NPM.

Вы должны включить сценарии для компонентов, которые вы хотите использовать ( MenuBar.js или $Window.js ), а также стиль таблиц для макета, темы и цветовой схемы.

Обязательно используйте скомпилированные файлы CSS, а не исходные файлы.

В <head> :

 < link href =" os-gui/layout.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-98.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-default.css " rel =" stylesheet " type =" text/css " >

В <head> или <body> :

 < script src =" os-gui/MenuBar.js " > </ script >

< script src =" lib/jquery.js " > </ script > <!-- required by $Window.js -->
< script src =" os-gui/$Window.js " > </ script >

API

Примечание : API, скорее всего, сильно изменится, но я поддерживаю изменение изменений.

Панель и стили вставки

.inset-deep создает вставную границу 2PX
.outset-deep создает вставную границу 2PX (например, кнопка или окно или всплывающее окно меню)
.inset-shallow создает вставную границу 1PX
.outset-shallow создает границу 1PX

Кнопки стили

Стили кнопок применяются к элементам button во всем мире. (И если вы когда -нибудь захотите его сбросить, обратите внимание, что вы должны избавиться от псевдо -элемента ::after . @Todo: Scope CSS)

Переверните кнопки

Чтобы сделать кнопку переключения, добавьте класс .toggle в кнопку. Сделайте это показывать, как .selected с помощью класса. (@Todo: переименовать это .pressed

Вы должны использовать стили вместе с атрибутами с семантической aria-pressed , aria-haspopup и/или aria-expanded ариями.

Кнопки по умолчанию

Вы можете показать кнопку - это действие по умолчанию, добавив .default в кнопку. Обратите внимание, что в Windows 98 этот стиль перемещается от кнопки на кнопку в зависимости от фокуса. Правило большого пальца заключается в том, что оно должно быть на кнопке, которая будет запускать с помощью Enter.

Легкие кнопки

Вы можете сделать легкую кнопку, .lightweight кнопку. Легкие кнопки тонкие и не имеют границы до пары.

Отключенные кнопки состояния

Вы можете отключить кнопку, добавив атрибут «Стандартный disabled к кнопке.

Нажатые кнопки состояния

Вы можете показать кнопку, которая нажата, добавив кнопку. .pressing класс в кнопку.
Это полезно для кнопок, которые запускаются клавишным.

Стили прокрутки

Стили Scrollbar применяются во всем мире, но у них есть префикс -webkit- , поэтому они будут работать только в браузерах «на основе веб-сайта», таких как Chrome, Safari и Opera.

(Можно переопределить с ::-webkit-scrollbar и связанные селекторы (но не легко сбросить в браузер по умолчанию, если только -webkit-appearance: scrollbar работает ... @Todo: Scope CSS)

Стили отбора

Стили отбора применяются во всем мире.

(Можно ли переопределить с помощью ::selection (но нелегко сбросить в браузер по умолчанию ... если не с unset ? @Todo: Scope CSS)

`MenuBar(menus)`

Создает компонент бара меню.

menus должно быть объектом, удерживающим массивы спецификаций пункта меню, под названием «Имя меню».

Возвращает объект с element свойства, который вы должны добавить в DOM, где вы этого хотите.

Смотрите примеры в демо -коде.

`element`

Элемент DOM, который представляет строку меню.

`closeMenus()`

Закрывает любые меню, которые открыты.

`setKeyboardScope(...eventTargets)`

Hotkeys, такие как Alt, будут обрабатываться на уровне заданных элементов (-ов) или целевых (ах) событий.

По умолчанию область применения- window (Global), для случая приложения на одну страницу, где строка меню находится наверху. Если вы помещаете строку меню в окно, вы должны позвонить в это с элементом окна:

 menu_bar . setKeyboardScope ( $window . element ) ;

или еще лучше,

 $window . setMenuBar ( menu_bar ) ;

который заботится о сфере клавиатуры для вас, прикрепляя строку меню к окну.

Обратите внимание, что некоторое поведение клавиатуры всегда обрабатывается, если в базе меню сосредоточено.

Примечание также для iframes, вам может потребоваться позвонить в это с помощью $window[0], iframe.contentWindow в настоящее время, но это должно быть изменено в будущем (события клавиатуры должны быть прокси -прокси).

Событие: `info`

Можно использовать для реализации строки состояния. Описание предоставляется как event.detail.description при перевороте элементов меню, которые указывают description . Например:

 menubar . element . addEventListener ( "info" , ( event ) => {
	statusBar . textContent = event . detail ?. description || "" ;
} ) ;

Событие: `default-info`

Сигнализирует о том, что строка состояния должна быть сброшена в бланк или сообщение по умолчанию.

 menubar . element . addEventListener ( "default-info" , ( event ) => {
	statusBar . textContent = "" ;

	// or:
	statusBar . textContent = "For Help, click Help Topics on the Help Menu." ;
	// like in MS Paint (and JS Paint)

	// or:
	statusBar . textContent = "For Help, press F1." ;
	// like WordPad

	// or perhaps even:
	statusBar . innerHTML = "For Help, <a href='docs'>click here</a>" ;
	// Note that a link is not a common pattern, and it could only work for the default text;
	// for menu item descriptions the message in the status bar is transient, so
	// you wouldn't be able to reach it to click on it.
} ) ;

Спецификация пункта меню

Спецификации пункта меню являются либо MENU_DIVIDER (постоянная, указывающая горизонтальное правило), либо спецификацией радио группы, либо объектом со следующими свойствами:

label : этикетка для элемента; Ampersands определяют клавиши доступа (для использования буквального Ampersand, использовать && )
shortcutLabel (необязательно): сочетание клавиатуры, чтобы показать элемент, например, «Ctrl+A» (примечание: вам нужно прослушать ярлык самостоятельно, в отличие от клавиш доступа)
ariaKeyShortcuts (необязательно): aria-keyshortcuts для элемента, например «Control+A Meta+A», для считывателей экрана. «CTRL» недопустим (вы должны это изложить), и лучше всего предоставить альтернативу для macOS, обычно с эквивалентным командным ключом, используя «Meta» (и event.metaKey ).
action (необязательно): функция для выполнения при нажатии на элемент (может указать только action или checkbox )
checkbox (необязательный): объект, указывающий, что этот элемент должен вести себя как флажок.
- check свойств этого объекта должна быть функцией, которая проверяет , следует ли проверять элемент или нет, возвращая true для проверки и false для неконтролируемой. Какое симпатичное имя.
- toggle свойств должно быть функцией, которая переключает состояние опции, однако вы его храните; вызывается при нажатии.
enabled (необязательно): может быть false , чтобы безоговорочно отключить элемент, или функцию, которая определяет, должен ли элемент быть включен, возвращая true , чтобы включить элемент, false , чтобы отключить.
submenu (необязательно): массив спецификаций пункта меню для создания подменю
description (необязательно): для реализации строки состояния; info событие испускается при переворачивании элемента с этим описанием
value (необязательно): для радиоэлементов значение элемента; может быть любой тип, но === используется для определения того, проверяется ли элемент.

Спецификация радио группы - это объект со следующими свойствами:

radioItems : Массив спецификаций пункта меню для создания радиобатчевой группы. В отличие от submenu , предметы включены непосредственно в это меню. Рекомендуется отделить радио -группу от других пунктов меню с MENU_DIVIDER .
getValue : функция, которая должна вернуть значение выбранного элемента радио.
setValue : функция, которая должна изменить состояние на заданное значение, специфичным для приложения.
ariaLabel (необязательно): строка для использования в качестве aria-label для радиопомощной группы (для доступности для чтения экрана)

Ключи доступа

Меню можно ориентироваться с контекстуальными горячими клавишами, известными как клавиши доступа .

Поместите Ampersand перед буквой в кнопке меню или на метке пункта меню, чтобы сделать его ключом доступа. Microsoft имеет документацию по ключам доступа, включая руководящие принципы для выбора ключей доступа. Как правило, первая буква - хороший выбор.

Если элемент меню не определяет ключ доступа, первая буква метки может использоваться для доступа к нему.

Для кнопок меню вам нужно удерживать Alt при нажатии клавиши доступа кнопки, но для элементов меню во всплывающих окне меню вы должны напрямую нажать клавишу, так как ALT закроет меню.

Если есть несколько элементов меню с одним и тем же ключом доступа, он будет циклироваться между ними, не активируя их. Вы должны попытаться сделать клавиши доступа уникальными, в том числе между определенными клавишами доступа и первыми буквами пунктов меню без определенных клавиш доступа. (Такое поведение наблюдается в Windows 98, в фаворитном меню Explorer, где вы можете сделать закладки с первой буквой, соответствующей ключам доступа других пунктов меню.)

Существует объект AccessKeys , экспортируемый MenuBar.js , с функциями для работы с клавишами доступа:

`AccessKeys.escape(label)`

Выбегает Ampersands в данном этикетке, так что они не интерпретируются как клавиши доступа.

Это полезно для динамических меню, например, меню истории, которое использует титулы страниц в качестве метки. Вы не хотите, чтобы Ampersands были усердно интерпретированы как клавиши доступа, или двойные амперсанды, которые были интерпретированы как единый амперс и.

`AccessKeys.unescape(label)`

Не-эскапты все двойные амперсанды на этикетке.

Для рендеринга используйте вместо этого toHTML или toFragment .

`AccessKeys.has(label)`

Возвращает True, если у метки есть ключ доступа.

`AccessKeys.get(label)`

Возвращает ключ доступа для данной метки или NULL, если нет.

MenuBar обрабатывает клавиши доступа автоматически, но если вы включаете клавиши доступа к другим элементам пользовательского интерфейса, вам нужно обрабатывать с ними самостоятельно, и вы можете использовать это, а не жестко кодировать ключ доступа, поэтому с ним не нужно менять в двух местах.

`AccessKeys.remove(label)`

Удаляет индикатор ключа доступа ( & ) с метки и не собирает любые двойные амперсанды. Также удаляет индикатор ключей доступа в скобках, например, «(& n)», в качестве особого случая.

`AccessKeys.toText(label)`

Удаляет индикатор ключа доступа ( & ) с метки и не собирает любые двойные амперсанды. Это похоже toHTML что для простого текста.

Note : while often access keys are part of a word, like "&New", in translations they are often indicated separately, like "새로 만들기 (&N)", since the access key stays the same, but the letter is no longer part of the word (or even the alphabet). Эта функция не удаляет строки, как «(& n)», она удалит только «&» и оставит «새로 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 만들기 Если вы хотите такое поведение, используйте AccessKeys.remove(label) .

`AccessKeys.toHTML(label)`

Возвращает HTML (с надлежащим выходом) с ключом доступа в качестве элемента <span class='menu-hotkey'> .

Примечание безопасности : безопасно использовать результат этой функции в содержании элемента HTML, поскольку она избегает метки. Это не безопасно использовать в значении атрибута, но это не предполагаемое использование.

ПРИМЕЧАНИЕ <span style="white-space: pre">

`AccessKeys.toFragment(label)`

Возвращает DocumentFragment с ключом доступа в качестве элемента <span class='menu-hotkey'> .

ПРИМЕЧАНИЕ <span style="white-space: pre">

`$Window(options)`

Создает компонент окна, который можно перетащить вокруг и тому подобное, принесено на переднюю часть при нажатии и закрыто. Различные типы окон могут быть созданы с разными параметрами. Обратите внимание, что фокус завершается в контенте окна.

Возвращает объект jQuery с дополнительными методами и свойствами (см. Ниже, после опций).

Узел DOM можно получить с помощью $window.element , а объект $Window можно получить из узла DOM с element.$window .

options.title : устанавливает начальную подпись окна.

options.icons : указывает значок окна в разных размерах. Пропустите объект с клавишами, которые размещаются в пикселях (или «любом»), и значениями, которые являются URL -адресом изображения, или объектом с srcset , если вы хотите поддержать различные плотности пикселей, или узел DOM, если вы хотите полного элемента управления (например, для использования <svg> или знака Font или Emoji).

options.toolWindow : Если true , окно будет окном инструмента, что означает, что он не будет иметь кнопку с минимизацией или максимизацией, и оно будет показано как всегда сфокусированным по умолчанию. У него также будет кнопка закрытия меньшего размера в стилях по умолчанию.

options.parentWindow : если указано, окно будет ребенком этого окна. Для окон инструментов состояние фокуса будет передано родительскому окну.

options.maximizeButton : Если установлено на false , у окна нет кнопки Majorize. Вы не можете включить это, если toolWindow true .

options.minimizeButton : Если установлено на false , у окна нет кнопки минимизации. Вы не можете включить это, если toolWindow true .

options.closeButton : Если установлено на false , у окна нет кнопки закрытия.

options.resizable true

options.outerWidth : указывает начальную ширину окна, включая границы.

options.outerHeight .

options.innerWidth : указывает начальную ширину содержимого окна, исключая границы.

options.innerHeight : указывает начальную высоту содержимого окна, исключая панель заголовка, панель меню и границы

options.minOuterWidth : минимальная внешняя ширина окна (при изменении размера), в пикселях.

options.minOuterHeight : минимальная внешняя высота окна (при изменении размера), в пикселях.

options.minInnerWidth : минимальная ширина содержимого окна (при изменении размера), в пикселях.

options.minInnerHeight : минимальная высота содержимого окна (при изменении размера), в пикселях.

options.constrainRect(rect, x_axis, y_axis) : функция, которую можно использовать для ограничения окна до определенного прямоугольника. Берет и возвращает объект прямоугольника со свойствами x , y , y, width и height . x_axis и y_axis определяют, что перетаскивают: -1 для левого и верхнего, 1 для правого и внизу и 0 для середины. Обратите внимание, что окно всегда будет ограничено, чтобы не пройти мимо минимальной ширины и высоты.

options.iframes : содержит параметры для управления интеграцией IFRAME. По умолчанию OS-Gui попытается улучшить iframes с помощью логики:

options.iframes.ignoreCrossOrigin : установить на True to Silend Silend Cross-Origin предупреждения для iframes в окне. Фокус интеграция не может полностью работать с перекрестными ифраминами. Будут случаи, когда окно не отображается так же, как сфокусировано при щелчке в iframe, и фокус не может быть восстановлен для элементов управления в IFRAME.

Возвращает объект jQuery с дополнительными методами и свойствами:

`title(text)`

Устанавливает заголовок, или если text не пройден, возвращает текущее заголовок окна.

`close(force=false)`

Закрывает окно.

Если force true , событие «Закрыть» не будет исчезло, и окно будет немедленно закрыто.

`focus()`

Пытается сосредоточить что -то в окне, в этом порядке приоритета:

Последний целенаправленный контроль в окне
Управление с class="default"
Если это окно инструмента, родительское окно
и в противном случае само окно (в частности $window.$content )

`blur()`

Удаляет фокус из окна. Если фокус находится вне окна, он остается без изменений.

`minimize()`

Минимизирует окно. Если $window.task.$task определено, она будет использовать это в качестве цели для минимизации, в противном случае окно сведет к минимуму до нижней части экрана.

Текущее поведение заключается в том, что оно переключает минимизацию. Это может измениться в будущем.

`maximize()`

Максимизирует окно. В то время как максимизированное, окно будет использовать position: fixed , поэтому оно не будет прокручивать с страницей.

Текущее поведение заключается в том, что он переключает максимизацию. Это может измениться в будущем. Кроме того, если минимизировать, он восстановится вместо максимизации. По сути, он делает то, что делает кнопка Maximize, а не просто то, что предлагает имя метода.

`unminimize()`

Частный: не используйте это. Вместо этого используйте restore() .

Восстанавливает окно из минимизированного состояния.

`restore()`

Восстанавливает окно из минимизированного или максимизированного состояния. Если окно не минимизировано или максимизировано, этот метод ничего не делает.

`center()`

Сосредоточено на окне на странице. Вы должны позвонить в это после того, как содержимое окна полностью отображается, или вы установили фиксированный размер для окна.

Если у вас есть изображения в окне, подождите, пока они загружаются перед отображением и центрированием окна, или определите фиксированный размер для изображений.

`applyBounds()`

Подходит к окну на странице, если оно частично за кадром. (Не изменяйте размер окна, если оно слишком велик; оно уйдет с правой и нижней части экрана.)

`bringTitleBarInBounds()`

Перестранивает окно так, чтобы строка заголовка находилась в пределах границ страницы, чтобы его можно было перетаскивать.

`bringToFront()`

Приносит окно к передней части, установив его z-index больше, чем любой z-index но используется в системе окна.

`setDimensions({ innerWidth, innerHeight, outerWidth, outerHeight })`

Устанавливает размер окна. Пропустите { innerWidth, innerHeight } , чтобы указать размер в терминах содержимого окна или { outerWidth, outerHeight } чтобы указать размер, включая окно.

(Это может быть расширено в будущем, чтобы также установить позицию ...)

`setIcons(icons)`

Изменяет значок (ы) окна. icons находятся в том же формате, что и options.icons .

`setTitlebarIconSize(size)`

Устанавливает размер значка с заглавным строением окна, выбирая ближайший размер, который доступен.

`getTitlebarIconSize()`

Возвращает размер значка с заглавным строением окна.

`getIconAtSize(size)`

Выбирает ближайший размер значка, который доступен, и возвращает уникальный узел DOM (то есть клонирован) или null если не определены значки.

Это можно использовать для представления окна на панели задач.

`setMenuBar(menuBar)`

Добавляет панель меню в окно и устанавливает сферу клавиатуры для горячих клавишных стержней в окно.

Можно вызвать с null , чтобы удалить строку меню.

`setMinimizeTarget(minimizeTargetElement)`

Минимизация цели (кнопка задач) представляет окно при минимизировании и используется для анимирования минимизации и восстановления. Если minimizeTargetElement является null , окно сведет к минимуму до нижней части экрана (по умолчанию).

`$Button(text, action)`

Создает кнопку в области содержания окна. Он автоматически закрывает окно при нажатии. Нет (хорошего) способа предотвратить это, так как это предназначено только для диалогов.

Если вам нужно какое -либо другое поведение, просто создайте <button> и добавьте его в область содержимого окна.

Возвращает объект jQuery.

`addChildWindow($window)`

Частный: не используйте это.

Определяет окно в детстве. Для окон инструментов состояние фокуса будет передано родительскому окну.

Это используется внутри, когда вы устанавливаете options.parentWindow при создании окна.