Download os gui - os gui Código Fonte Download

os gui

Outro código-fonte

v0.7.3 Taskbarless Minimization

Baixar

Uma biblioteca para imitar interfaces gráficas do sistema operacional na web

Especificamente, o Windows 98 - por enquanto, pelo menos; Pode ser expandido no futuro.

Esta biblioteca fornece 98.js.org, uma versão baseada na Web do Windows 98, incluindo tinta, bloco de notas, gravador de som e muito mais.

Veja a página inicial para obter mais informações.

Características

Barras de menu, com suporte para caixa de seleção e itens de rádio, estados deficientes, submenus, atalhos de teclado e muito mais
Janelas de aplicativos que você pode arrastar, maximizar, minimizar, fechar e redimensionar
Variantes de diálogo e janela de ferramentas
Animação voadora da barra de título que guia seus olhos durante maximizar/minimizar/restaurar
Contenção de foco: se você guiar ou mudar+guia dentro de uma janela, ela envolve o primeiro/último controle.
Estilos de botão, incluindo botões leves, botões desativados e botões de ação padrão
Estilos de barra de rolagem, específicos para o webkit (no futuro, pode haver uma barra de rolagem personalizada com base em uma biblioteca não invasiva de barra de rolagem, ou estilos que suportam uma biblioteca, onde se espera que use a biblioteca diretamente)
- Setas renderizadas proceduralmente, permitindo diferentes tamanhos de barra de rolagem
- Efeito de inversão ao clicar na faixa de rolagem
Timeable com o Windows .theme & .themepack FILOS NA RUNDO !

Demonstração

Veja demos online aqui

Veja também

98.js, meu desktop da web
Padraigfl/Packard-Belle
Arturbien/React95
REACT95/REACT95

Requisitos

Atualmente, esta biblioteca requer jQuery para a implementação de janelas. As barras de menu não requerem jQuery.

(Eventualmente, quero ter dependências. Até agora, removi o jQuery do código do menu ...)

Configurar

A biblioteca ainda não foi fornecida como um único arquivo conveniente.

Você pode 1. Faça o download do repositório como um arquivo zip, 2. Clone o repositório ou 3. Instale a biblioteca como um pacote NPM.

Você deve incluir scripts para os componentes que deseja usar ( MenuBar.js ou $Window.js ), juntamente com folhas de estilo para layout, um tema e um esquema de cores.

Certifique -se de usar os arquivos CSS compilados, não os arquivos de origem.

Em <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 " >

Em <head> ou <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

Nota : A API provavelmente mudará muito, mas eu mantenho um Changelog.

Estilos de painel e inserção

.inset-deep cria uma borda de 2px
.outset-deep cria uma borda inserida de 2px (como um botão ou janela ou pop-up de menu)
.inset-shallow cria uma borda de 1px
.outset-shallow cria uma borda de 1px

Estilos de botão

Os estilos de botão são aplicados aos elementos button globalmente. (E se você quiser redefini -lo, observe que precisa se livrar do elemento pseudo ::after . @Todo: SCOPE CSS)

Botões de alternância

Para fazer um botão de alternância, adicione a classe .toggle ao botão. Faça -o mostrar como pressionado com a classe .selected . (@Todo: renomeie isso .pressed

Você deve usar os estilos juntamente com atributos semânticos aria-pressed , aria-haspopup e/ou aria-expanded conforme apropriado.

Botões padrão

Você pode mostrar o botão é a ação padrão adicionando .default ao botão. Observe que no Windows 98, esse estilo passa de botão para botão, dependendo do foco. Uma regra geral é que ela deve estar no botão que acionará o Enter.

Botões leves

Você pode criar um botão leve adicionando .lightweight ao botão. Os botões leves são sutis e não têm fronteira até o mouse.

Os estados do botão desativado

Você pode desativar um botão adicionando o atributo padrão disabled ao botão.

O botão pressionado afirma

Você pode mostrar um botão como sendo pressionado adicionando a classe .pressing ao botão.
Isso é útil para botões que são acionados por um pressionamento de teclas.

Estilos de barra de rolagem

Os estilos de barra de rolagem são aplicados globalmente, mas eles têm um prefixo -webkit- , para que eles só funcionem em navegadores "baseados em webkit", geralmente, como Chrome, Safari e Opera.

(Pode ser substituído com ::-webkit-scrollbar e seletores relacionados (mas não é facilmente redefinido para o padrão do navegador, a menos que -webkit-appearance: scrollbar Works ... @Todo: Scope CSS)

Estilos de seleção

Os estilos de seleção são aplicados globalmente.

(Pode ser substituído com ::selection (mas não é facilmente redefinido para o padrão do navegador ... a menos que unset

`MenuBar(menus)`

Cria um componente da barra de menus.

menus devem ser um objeto segurando matrizes de especificações do item de menu, com o nome do botão de menu.

Retorna um objeto com element da propriedade, que você deve anexar ao DOM onde deseja.

Veja exemplos no código de demonstração.

`element`

O elemento DOM que representa a barra de menus.

`closeMenus()`

Fecha todos os menus que estão abertos.

`setKeyboardScope(...eventTargets)`

As teclas de atalho como o ALT serão tratadas no nível do (s) elemento (s) ou alvo (s) de eventos.

Por padrão, o escopo é window (global), para o caso de um aplicativo de uma página em que a barra de menus está na parte superior. Se você estiver colocando a barra de menus em uma janela, deve ligar para o elemento da janela:

 menu_bar . setKeyboardScope ( $window . element ) ;

ou melhor ainda,

 $window . setMenuBar ( menu_bar ) ;

que cuida do escopo do teclado para você, enquanto anexa a barra de menus na janela.

Observe que algum comportamento do teclado é sempre tratado se a barra de menus tiver foco.

Observe também para iframes, pode ser necessário ligar para isso com $window[0], iframe.contentWindow atualmente, mas isso deve ser alterado no futuro (os eventos do teclado devem ser proxiados).

Evento: `info`

Pode ser usado para implementar uma barra de status. Uma descrição é fornecida como event.detail.description ao rolar itens de menu que especificam uma description . Por exemplo:

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

Evento: `default-info`

Sinaliza que uma barra de status deve ser redefinida para em branco ou uma mensagem padrão.

 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.
} ) ;

Especificação do item do menu

As especificações do item de menu são MENU_DIVIDER (uma constante indicando uma regra horizontal) ou uma especificação do grupo de rádio ou um objeto com as seguintes propriedades:

label : um rótulo para o item; AMPERSANDS Definir teclas de acesso (para usar um ampersa literal e, use && )
shortcutLabel (Opcional): Um atalho de teclado para mostrar o item, como "Ctrl+A" (Nota: você precisa ouvir o atalho, diferentemente das teclas de acesso)
ariaKeyShortcuts (Opcional): aria-keyshortcuts para o item, como "Control+A meta+A", para leitores de tela. "Ctrl" não é válido (você deve soletrar) e é melhor fornecer uma alternativa para o macOS, geralmente com a chave de comando equivalente, usando "meta" (e event.metaKey ).
action (Opcional): uma função a ser executada quando o item é clicado (pode especificar apenas action ou checkbox )
checkbox (opcional): um objeto especificando que este item deve se comportar como uma caixa de seleção.
- check da propriedade deste objeto deve ser uma função que verifique se o item deve ser verificado ou não, retornando true para verificado e false para não verificado. Que nome fofo.
- toggle da propriedade deve ser uma função que alterna o estado da opção, no entanto, você está armazenando; chamado quando clicado.
enabled (opcional): pode ser false para desativar incondicionalmente o item ou uma função que determina se o item deve ser ativado, retornando true para ativar o item, false para desativar.
submenu (opcional): uma variedade de especificações do item de menu para criar um submenu
description (Opcional): para implementar uma barra de status; Um evento info é emitido ao rolar sobre o item com esta descrição
value (Opcional): Para itens de rádio, o valor do item; pode ser qualquer tipo, mas === é usado para determinar se o item está verificado.

Uma especificação do grupo de rádio é um objeto com as seguintes propriedades:

radioItems : uma matriz de especificações do item de menu para criar um grupo de botões de rádio. Ao contrário submenu , os itens estão incluídos diretamente neste menu. Recomenda -se separar o grupo de rádio de outros itens de menu com um MENU_DIVIDER .
getValue : uma função que deve retornar o valor do item de rádio selecionado.
setValue : uma função que deve alterar o estado para o valor fornecido, de maneira específica do aplicativo.
ariaLabel (OPCIONAL): Uma string a ser usada como aria-label para o grupo de rádio (para a acessibilidade do leitor de tela)

Chaves de acesso

Os menus podem ser navegados com teclas de atalho contextuais conhecidas como chaves de acesso .

Coloque um ampers e antes de uma carta em um botão de menu ou rótulo do item de menu para torná -lo uma chave de acesso. A Microsoft possui documentação sobre chaves de acesso, incluindo diretrizes para escolher as chaves de acesso. Geralmente, a primeira letra é uma boa escolha.

Se um item de menu não definir uma chave de acesso, a primeira letra do rótulo poderá ser usada para acessá -la.

Para os botões do menu, você precisa segurar o ALT ao pressionar a tecla de acesso do botão, mas para os itens de menu nos pop -ups de menu, você deve pressionar a tecla diretamente, pois o ALT fechará os menus.

Se houver vários itens de menu com a mesma tecla de acesso, ele percorrerá entre eles sem ativá -los. Você deve tentar tornar as teclas de acesso exclusivas, incluindo as teclas de acesso definidas e as primeiras letras dos itens de menu sem chaves de acesso definidas. (Esse comportamento é observado no Windows 98, no menu Favoritos do Explorer, onde você pode fazer marcadores com a primeira letra que corresponde às teclas de acesso de outros itens de menu.)

Existe um objeto AccessKeys exportado pelo MenuBar.js , com funções para lidar com as chaves de acesso:

`AccessKeys.escape(label)`

Escapa de amperas e no rótulo fornecido, para que não sejam interpretados como teclas de acesso.

Isso é útil para menus dinâmicos, como um menu de história que usa títulos de página como rótulos. Você não deseja que os eragens sejam intimamente interpretados como chaves de acesso, ou amperas duplos para serem interpretados como um único ampérs e.

`AccessKeys.unescape(label)`

On-Escape todos os dois e duplos de e-mails no rótulo.

Para renderizar, use toHTML ou toFragment .

`AccessKeys.has(label)`

Retorna true se o rótulo tiver uma chave de acesso.

`AccessKeys.get(label)`

Retorna a chave de acesso para o rótulo fornecido, ou nulo, se não.

MenuBar lida com as teclas de acesso automaticamente, mas se você estiver incluindo teclas de acesso para outros elementos da interface do usuário, precisará lidar com elas você mesmo, e poderá usá-lo em vez de codificar a tecla de acesso, para que ela não precise ser alterada em dois lugares.

`AccessKeys.remove(label)`

Remove o indicador de chave de acesso ( & ) do rótulo e não-escapa qualquer amperagem dupla. Também remove um indicador de chave de acesso entre parênteses, como "(& n)", como um caso especial.

`AccessKeys.toText(label)`

Remove o indicador de chave de acesso ( & ) do rótulo e não-escapa qualquer amperagem dupla. É como toHTML , mas para texto simples.

Nota : Embora as teclas de acesso geralmente façam parte de uma palavra, como "& new", nas traduções, elas geralmente são indicadas separadamente, como "새로 만들기 (& n)", uma vez que a tecla de acesso permanece a mesma, mas a letra não faz mais parte da palavra (ou mesmo o alfabeto). Esta função não remove strings como "(& n)", removerá apenas o "&" e deixará "새로 만들기 (n)". Se você quiser esse comportamento, use AccessKeys.remove(label) .

`AccessKeys.toHTML(label)`

Retorna o HTML (com escape adequado) com a tecla de acesso como um elemento <span class='menu-hotkey'> .

Nota de segurança : é seguro usar o resultado dessa função no conteúdo do elemento HTML, pois escapa do rótulo. Não é seguro usar um valor de atributo, mas esse não é o uso pretendido.

Nota de layout : você pode querer cerca o resultado com <span style="white-space: pre"> para impedir que o espaço em branco desmoronize se a chave de acesso estiver próxima a um espaço.

`AccessKeys.toFragment(label)`

Retorna um DocumentFragment com a chave de acesso como um elemento <span class='menu-hotkey'> .

Nota de layout : você pode querer cerca o resultado com <span style="white-space: pre"> para impedir que o espaço em branco desmoronize se a chave de acesso estiver próxima a um espaço.

`$Window(options)`

Cria um componente de janela que pode ser arrastado e tal, trazido para a frente quando clicado e fechado. Diferentes tipos de janelas podem ser criados com diferentes opções. Observe que o foco envolve o conteúdo de uma janela.

Retorna um objeto jQuery com métodos e propriedades adicionais (veja abaixo, após opções).

O nó DOM pode ser acessado com $window.element , e o objeto $Window pode ser acessado no nó DOM com o element.$window .

options.title : define a legenda inicial da janela.

options.icons : Especifica o ícone da janela em tamanhos diferentes. Passe um objeto com teclas que são tamanhos em pixels (ou "qualquer"), e valores que são o URL de uma imagem ou um objeto com srcset se você deseja suportar diferentes densidades de pixels, ou um nó DOM, se você deseja controle total (por exemplo, use um <svg> ou um ícone da font ou um emoji).

options.toolWindow : Se true , a janela será uma janela de ferramenta, o que significa que não terá um botão Minimize ou maximizar e será mostrado como sempre focado por padrão. Ele também terá um botão de fechamento menor nos estilos padrão.

options.parentWindow : Se especificado, a janela será filho desta janela. Para janelas de ferramentas, o estado de foco será compartilhado com a janela dos pais.

options.maximizeButton : Se definido como false , a janela não terá um botão de maximizar. Você não pode habilitar isso se toolWindow for true .

options.minimizeButton : Se definido como false , a janela não terá um botão de minimizar. Você não pode habilitar isso se toolWindow for true .

options.closeButton : Se definido como false , a janela não terá um botão de fechar.

options.resizable : Se definido como true , a janela pode ser redimensionada pelas bordas e cantos.

options.outerWidth : especifica a largura inicial da janela, incluindo bordas.

options.outerHeight : Especifica a altura inicial da janela, incluindo barra de título, barra de menus e bordas.

options.innerWidth : Especifica a largura inicial do conteúdo da janela, excluindo fronteiras.

options.innerHeight : Especifica a altura inicial do conteúdo da janela, excluindo a barra de título, a barra de menus e as fronteiras

options.minOuterWidth : a largura externa mínima da janela (quando redimensiona), em pixels.

options.minOuterHeight : A altura externa mínima da janela (ao redimensionar), em pixels.

options.minInnerWidth : a largura mínima do conteúdo da janela (ao redimensionar), em pixels.

options.minInnerHeight : A altura mínima do conteúdo da janela (ao redimensionar), em pixels.

options.constrainRect(rect, x_axis, y_axis) : uma função que pode ser usada para restringir a janela a um retângulo específico. Pega e retorna um objeto retângulo com propriedades x , y , width e height . x_axis e y_axis definem o que está sendo arrastado: -1 para esquerda e superior, 1 para direito e inferior e 0 para o meio. Observe que a janela sempre será restringida a não superar a largura e a altura mínima.

options.iframes : contém opções para controlar a integração do iframe. Por padrão, o OS-GUI tentará aprimorar o iFRames com a lógica para:

options.iframes.ignoreCrossOrigin : defina como true para silenciar avisos de origem cruzada para iframes dentro da janela. A integração do foco não pode trabalhar completamente com os iFrames cruzados. Haverá casos em que a janela não será mostrada como focada ao clicar no iframe, e o foco não pode ser restaurado para controles no iframe.

Retorna um objeto jQuery com métodos e propriedades adicionais:

`title(text)`

Define o título, ou se text não for passado, retorna o título atual da janela.

`close(force=false)`

Fecha a janela.

Se force for true , o evento "fechado" não será emitido e a janela será fechada imediatamente.

`focus()`

Tenta concentrar algo dentro da janela, nesta ordem de prioridade:

O último controle focado dentro da janela
Um controle com class="default"
Se for uma janela de ferramenta, a janela dos pais
e, caso contrário, a própria janela (especificamente $window.$content )

`blur()`

Remove o foco da janela. Se o foco estiver fora da janela, ele permanece inalterado.

`minimize()`

Minimiza a janela. Se $window.task.$task estiver definida, ele o usará como um alvo para minimizar, caso contrário, a janela minimizará a parte inferior da tela.

O comportamento atual é que ele alterna a minimização. Isso pode mudar no futuro.

`maximize()`

Maximiza a janela. Embora maximizado, a janela usará position: fixed , para que não role com a página.

O comportamento atual é que ele alterna a maximização. Isso pode mudar no futuro. Além disso, se minimizado, restaurará em vez de maximizar. Basicamente, faz o que o botão Maximize faz, em vez de simplesmente o que o nome do método sugere.

`unminimize()`

Privado: não use isso. Use restore() em vez disso.

Restaura a janela do estado minimizado.

`restore()`

Restaura a janela do estado minimizado ou maximizado. Se a janela não for minimizada ou maximizada, esse método não fará nada.

`center()`

Centra a janela da página. Você deve chamar isso após o conteúdo da janela ser totalmente renderizado, ou você definiu um tamanho fixo para a janela.

Se você tiver imagens na janela, aguarde que elas carreguem antes de mostrar e centralizar a janela ou definir um tamanho fixo para as imagens.

`applyBounds()`

Se encaixa na janela dentro da página, se estiver parcialmente fora da tela. (Não redimensione a janela se for muito grande; sairá da direita e da tela.)

`bringTitleBarInBounds()`

Reposiciona a janela para que a barra de título fique dentro dos limites da página, para que possa ser arrastada.

`bringToFront()`

Traz a janela para a frente, definindo seu z-index como maior que qualquer z-index ainda usado pelo sistema de janelas.

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

Define o tamanho da janela. Passe { innerWidth, innerHeight } para especificar o tamanho em termos do conteúdo da janela, ou { outerWidth, outerHeight } para especificar o tamanho, incluindo o quadro da janela.

(Isso pode ser expandido no futuro para permitir a definição da posição também ...)

`setIcons(icons)`

Altera o ícone (s) da janela. icons estão no mesmo formato que options.icons .

`setTitlebarIconSize(size)`

Define o tamanho do ícone da barra de título da janela, escolhendo o tamanho mais próximo disponível.

`getTitlebarIconSize()`

Retorna o tamanho do ícone da barra de título da janela.

`getIconAtSize(size)`

Escolha o tamanho mais próximo do ícone disponível e retorna um nó DOM exclusivo (ou seja, clonado) ou null se nenhum ícones for definido.

Isso pode ser usado para representar a janela na barra de tarefas.

`setMenuBar(menuBar)`

Anexa a barra de menus na janela e define o escopo do teclado para as teclas de atalho da barra de menus para a janela.

Pode ser chamado com null para remover a barra de menus.

`setMinimizeTarget(minimizeTargetElement)`

O destino minimize (botão da barra de tarefas) representa a janela quando minimizado e é usado para animar minimizar e restaurar. Se minimizeTargetElement for null , a janela minimizará a parte inferior da tela (o padrão).

`$Button(text, action)`

Cria um botão na área de conteúdo da janela. Ele fecha automaticamente a janela quando clicado. Não existe uma maneira (boa) de impedir isso, pois se destina apenas a diálogos.

Se você precisar de outro comportamento, basta criar um <button> e adicioná -lo à área de conteúdo da janela.

Retorna um objeto jQuery.

`addChildWindow($window)`

Privado: não use isso.

Define uma janela quando criança. Para janelas de ferramentas, o estado de foco será compartilhado com a janela dos pais.

Isso é usado internamente quando você define options.parentWindow ao criar uma janela.