Descarga os gui - Descargar código fuente de os gui OS

os gui

Otro código fuente

v0.7.3 Taskbarless Minimization

Descargar

Una biblioteca para imitar las interfaces gráficas de usuario del sistema operativo en la web

Específicamente, Windows 98, al menos por ahora; Podría ampliarse en el futuro.

Esta biblioteca potencia 98.js.org, una versión basada en la web de Windows 98, que incluye pintura, bloc de notas, grabadora de sonido y más.

Consulte la página de inicio para obtener más información.

Características

Barras de menú, con soporte para la casilla de verificación y elementos de radio, estados deshabilitados, submenús, atajos de teclado y más
Windows de aplicaciones que puede arrastrar, maximizar, minimizar, cerrar y cambiar el tamaño
Variantes de diálogo y ventana de herramientas
Animación de barra de título volador que guía sus ojos durante maximizar/minimizar/restaurar
Contención de enfoque: si pestaña o cambia+pestaña dentro de una ventana, se envuelve al primer/último control.
Los estilos de botones, incluidos los botones livianos, los botones deshabilitados y los botones de acción predeterminados
Scrollbar Styles, WebKit específico (en el futuro podría haber una barra de desplazamiento personalizada basada en una biblioteca de barra de desplazamiento no intrusiva o estilos que admiten una biblioteca, donde se espera que use la biblioteca directamente)
- Flechas renderizadas en procedimiento, lo que permite diferentes tamaños de asignación de desplazamiento
- Efecto de inversión al hacer clic en la pista de barras de desplazamiento
¡Tema con Windows .theme & .themepack ARCHIVOS EN TIME DE RUNE !

Manifestación

Ver demostraciones en línea aquí

Ver también

98.js, mi escritorio web
Padraigfl/Packard-Belle
Arturbien/React95
React95/react95

Requisitos

Esta biblioteca actualmente requiere jQuery para la implementación de Windows. Las barras de menú no requieren jQuery.

(Eventualmente quiero no tener dependencias. Hasta ahora he eliminado jQuery del código de menú ...)

Configuración

La biblioteca no se proporciona (todavía) como un solo archivo conveniente.

Puede 1. Descargue el repositorio como un archivo zip, 2. Clonar el repositorio o 3. Instale la biblioteca como un paquete NPM.

Debe incluir scripts para los componentes que desea usar ( MenuBar.js o $Window.js ), junto con hojas de estilo para el diseño, un tema y un esquema de color.

Asegúrese de usar los archivos CSS compilados, no los archivos de origen.

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

En <head> o <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 : La API probablemente cambiará mucho, pero mantengo un Changelog.

Estilos de panel e insertado

.inset-deep crea un borde de inserción de 2px
.outset-deep crea un borde de inserción de 2px (como un botón o ventana o ventana emergente de menú)
.inset-shallow crea un borde de inserción de 1px
.outset-shallow crea un borde de entrada de 1px

Estilos de botones

Los estilos de botones se aplican a elementos button a nivel mundial. (Y si alguna vez quieres reiniciarlo, tenga en cuenta que tienes que deshacerte del pseudo elemento ::after también. @Todo: alcance CSS)

Botones de palanca

Para hacer un botón de palanca, agregue la clase .toggle al botón. Haga que se muestre como presionado con la clase .selected . (@Todo: Cambie el nombre de esto .pressed )

Debe usar los estilos junto con los atributos semánticos aria-pressed , aria-haspopup y/o aria-expanded según corresponda.

Botones predeterminados

Puede mostrar el botón es la acción predeterminada agregando .default al botón. Tenga en cuenta que en Windows 98, este estilo se mueve del botón al botón dependiendo del enfoque. Una regla general es que debe estar en el botón que se activará con Enter.

Botones livianos

Puede hacer un botón liviano agregando .lightweight al botón. Los botones livianos son sutiles y no tienen borde hasta que se desplace.

Estados del botón discapacitados

Puede deshabilitar un botón agregando el atributo disabled estándar al botón.

Estados del botón presionado

Puede mostrar un botón como presionado agregando la clase .pressing al botón.
Esto es útil para los botones que se activan por una tecla de tecla.

Estilos de barra de desplazamiento

Los estilos de barra de desplazamiento se aplican a nivel mundial, pero tienen un prefijo -webkit- , por lo que solo funcionarán en navegadores "basados en WebKit", generalmente, como Chrome, Safari y Opera.

(Se puede anular con ::-webkit-scrollbar y selectores relacionados (pero no se restablecen fácilmente al valiente por el navegador, a menos que -webkit-appearance: scrollbar funciona ... @Todo: alcance CSS)

Estilos de selección

Los estilos de selección se aplican a nivel mundial.

(Se puede anular con ::selection (pero no restablecer fácilmente el valor predeterminado del navegador ... a menos que con unset ? @Todo: alcance CSS)

`MenuBar(menus)`

Crea un componente de barra de menú.

menus deben ser un objeto que mantenga una matriz de especificaciones del elemento del menú, con el nombre del botón del menú.

Devuelve un objeto con element de propiedad, que luego debe agregar al DOM donde lo desea.

Ver ejemplos en el código de demostración.

`element`

El elemento DOM que representa la barra de menú.

`closeMenus()`

Cierra cualquier menús que estén abiertos.

`setKeyboardScope(...eventTargets)`

Las teclas de acceso rápido como ALT se manejarán en el nivel de los elementos dados o los objetivos del evento.

Por defecto, el alcance es window (global), para el caso de una aplicación de una sola página donde la barra de menú está en la parte superior. Si está colocando la barra de menú en una ventana, debe llamar a esto con el elemento de la ventana:

 menu_bar . setKeyboardScope ( $window . element ) ;

o mejor aún,

 $window . setMenuBar ( menu_bar ) ;

que se encarga del alcance del teclado para usted, mientras adjunta la barra de menú a la ventana.

Tenga en cuenta que algún comportamiento del teclado siempre se maneja si la barra de menú tiene enfoque.

Nota También para Iframes, es posible que deba llamar a esto con $window[0], iframe.contentWindow actualmente, pero esto debería cambiarse en el futuro (los eventos de teclado deben estar representados).

Evento: `info`

Se puede utilizar para implementar una barra de estado. Se proporciona una descripción como event.detail.description al rodar los elementos del menú que especifican una description . Por ejemplo:

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

Evento: `default-info`

Señala que una barra de estado debe restablecerse a un mensaje en blanco o predeterminado.

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

Especificación del elemento del menú

Las especificaciones del elemento del menú son MENU_DIVIDER (una constante que indica una regla horizontal), o una especificación de grupo de radio, o un objeto con las siguientes propiedades:

label : una etiqueta para el elemento; Ampersands definen las claves de acceso (para usar un ampers y literalmente, usar && )
shortcutLabel (opcional): un atajo de teclado para mostrar el elemento, como "Ctrl+A" (nota: debe escuchar el atajo usted mismo, a diferencia de las teclas de acceso)
ariaKeyShortcuts (opcional): aria-keyshortcuts para el elemento, como "Control+A Meta+A", para los lectores de pantalla. "CTRL" no es válido (debes deletrearlo), y es mejor proporcionar una alternativa para MacOS, generalmente con la clave de comando equivalente, usando "meta" (y event.metaKey ).
action (opcional): una función para ejecutar cuando se hace clic en el elemento (solo puede especificar action o checkbox )
checkbox (opcional): un objeto que especifica que este elemento debe comportarse como una casilla de verificación.
- check de la propiedad de este objeto debe ser una función que verifique si el elemento debe verificarse o no, devolviendo true para verificar y false para no verificar. Qué nombre tan cursi.
- La toggle de propiedad debe ser una función que alterne el estado de la opción, sin embargo, lo está almacenando; llamado cuando se hace clic.
enabled (opcional): puede ser false para deshabilitar incondicionalmente el elemento, o una función que determina si el elemento debe estar habilitado, devolviendo true para habilitar el elemento, false para deshabilitar.
submenu (opcional): una variedad de especificaciones del elemento del menú para crear un submenú
description (opcional): para implementar una barra de estado; Se emite un evento info al rodar sobre el artículo con esta descripción
value (opcional): para elementos de radio, el valor del elemento; puede ser cualquier tipo, pero === se usa para determinar si el elemento está marcado.

Una especificación de grupo de radio es un objeto con las siguientes propiedades:

radioItems : una variedad de especificaciones del elemento del menú para crear un grupo de botones de radio. A diferencia de submenu , los elementos se incluyen directamente en este menú. Se recomienda separar el grupo de radio de otros elementos del menú con un MENU_DIVIDER .
getValue : una función que debería devolver el valor del elemento de radio seleccionado.
setValue : una función que debería cambiar el estado al valor dado, de manera específica de la aplicación.
ariaLabel (opcional): una cadena para usar como aria-label para el grupo de radio (para la accesibilidad del lector de pantalla)

Llaves de acceso

Los menús se pueden navegar con teclas de acceso rápido contextuales conocidas como claves de acceso .

Coloque un ampersand antes de una letra en un botón de menú o etiqueta del elemento de menú para que sea una tecla de acceso. Microsoft tiene documentación sobre claves de acceso, incluidas las pautas para elegir claves de acceso. Generalmente la primera letra es una buena opción.

Si un elemento de menú no define una tecla de acceso, la primera letra de la etiqueta se puede usar para acceder a él.

Para los botones de menú, debe mantener al ALT al presionar la tecla de acceso del botón, pero para los elementos del menú en las ventanas emergentes del menú debe presionar la tecla directamente, ya que ALT cerrará los menús.

Si hay múltiples elementos de menú con la misma tecla de acceso, se despegará entre ellos sin activarlos. Debe intentar hacer que las teclas de acceso sean únicas, incluso entre las teclas de acceso definidas y las primeras letras de los elementos del menú sin claves de acceso definidas. (Este comportamiento se observa en Windows 98, en el menú de favoritos de Explorer, donde puede hacer marcadores con la primera letra que coincide con las teclas de acceso de otros elementos del menú).

Hay un objeto AccessKeys exportado por MenuBar.js , con funciones para tratar con claves de acceso:

`AccessKeys.escape(label)`

Escapa de ampersands en la etiqueta dada, para que no se interpreten como claves de acceso.

Esto es útil para menús dinámicos, como un menú de historia que utiliza títulos de página como etiquetas. No desea que los amperandos sean interpretados espuriosamente como claves de acceso, o ampersands dobles se interpreten como un solo ampersand.

`AccessKeys.unescape(label)`

Descapites todos los amperandos dobles en la etiqueta.

Para representar, use toHTML o toFragment .

`AccessKeys.has(label)`

Devuelve verdadero si la etiqueta tiene una clave de acceso.

`AccessKeys.get(label)`

Devuelve la clave de acceso para la etiqueta dada, o nulo si no.

MenuBar maneja las teclas de acceso automáticamente, pero si incluye claves de acceso para otros elementos de interfaz de usuario, debe manejarlas usted mismo, y puede usar esto en lugar de codificar la clave de acceso, por lo que no es necesario cambiar en dos lugares.

`AccessKeys.remove(label)`

Elimina el indicador de clave de acceso ( & ) de la etiqueta y no recauda cualquier amperantador doble. También elimina un indicador clave de acceso entre paréntesis, como "(& n)", como un caso especial.

`AccessKeys.toText(label)`

Elimina el indicador de clave de acceso ( & ) de la etiqueta y no recauda cualquier amperantador doble. Esto es como toHTML pero para texto sin formato.

Nota : Si bien las claves de acceso a menudo son parte de una palabra, como "y nueva", en las traducciones a menudo se indican por separado, como "새로 만들기 만들기 (& n)", ya que la clave de acceso permanece igual, pero la letra ya no es parte de la palabra (o incluso el alfabeto). Esta función no elimina cadenas como "(& n)", eliminará solo el "&" y dejará "새로 만들기 (n)". Si desea ese comportamiento, use AccessKeys.remove(label) .

`AccessKeys.toHTML(label)`

Devuelve HTML (con un escape adecuado) con la tecla de acceso como un elemento <span class='menu-hotkey'> .

Nota de seguridad : es seguro usar el resultado de esta función en el contenido del elemento HTML, ya que escapa de la etiqueta. No es seguro usarlo en un valor de atributo, pero este no es el uso previsto.

Nota de diseño : es posible que desee rodear el resultado con <span style="white-space: pre"> para evitar que el espacio en blanco se derrumbe si la tecla de acceso está al lado de un espacio.

`AccessKeys.toFragment(label)`

Devuelve un DocumentFragment con la tecla de acceso como un elemento <span class='menu-hotkey'> .

Nota de diseño : es posible que desee rodear el resultado con <span style="white-space: pre"> para evitar que el espacio en blanco se derrumbe si la tecla de acceso está al lado de un espacio.

`$Window(options)`

Crea un componente de ventana que se puede arrastrar y tal, traído al frente cuando se hace clic y se cierre. Se pueden crear diferentes tipos de ventanas con diferentes opciones. Tenga en cuenta que el enfoque se envuelve dentro del contenido de una ventana.

Devuelve un objeto jQuery con métodos y propiedades adicionales (ver a continuación, después de las opciones).

Se puede acceder al nodo DOM con $window.element , y se puede acceder al objeto $Window desde el nodo DOM con el element.$window .

options.title : Establece el título de ventana inicial.

options.icons : Especifica el icono de la ventana en diferentes tamaños. Pase un objeto con claves que son tamaños en píxeles (o "cualquiera"), y valores que son la URL de una imagen, o un objeto con srcset si desea admitir diferentes densidades de píxeles, o un nodo DOM si desea un control completo (por ejemplo, usar un <svg> o un icono de fuente o un emoji).

options.toolWindow : si es true , la ventana será una ventana de herramienta, lo que significa que no tendrá un botón minimizar o maximizar, y se mostrará como siempre enfocado de forma predeterminada. También tendrá un botón de cierre más pequeño en los estilos predeterminados.

options.parentWindow : si se especifica, la ventana será un niño de esta ventana. Para las ventanas de herramientas, el estado de enfoque se compartirá con la ventana principal.

options.maximizeButton : si se establece en false , la ventana no tendrá un botón Maximizar. No puede habilitar esto si toolWindow es true .

options.minimizeButton : si se establece en false , la ventana no tendrá un botón de minimización. No puede habilitar esto si toolWindow es true .

options.closeButton : si se establece en false , la ventana no tendrá un botón de cierre.

options.resizable true

options.outerWidth : Especifica el ancho inicial de la ventana, incluidos los bordes.

options.outerHeight : Especifica la altura inicial de la ventana, incluida la barra de título, la barra de menú y los bordes.

options.innerWidth Innernwidth: Especifica el ancho inicial del contenido de la ventana, excluyendo los bordes.

options.innerHeight

options.minOuterWidth : el ancho externo mínimo de la ventana (al cambiar el tamaño), en píxeles.

options.minOuterHeight MinouterHeight: la altura externa mínima de la ventana (al cambiar el tamaño), en píxeles.

options.minInnerWidth MininnerWidth: el ancho mínimo del contenido de la ventana (al cambiar el tamaño), en píxeles.

options.minInnerHeight : la altura mínima del contenido de la ventana (al cambiar el tamaño), en píxeles.

options.constrainRect(rect, x_axis, y_axis) : una función que se puede usar para restringir la ventana a un rectángulo particular. Toma y devuelve un objeto rectángulo con propiedades x , y , width y height . x_axis y y_axis Definen lo que se está arrastrando: -1 para izquierda y superior, 1 para la derecha e inferior, y 0 para el medio. Tenga en cuenta que la ventana siempre estará limitada para no moverse más allá del ancho y la altura mínimo.

options.iframes : contiene opciones para controlar la integración de iframe. Por defecto, OS-GUI intentará mejorar iFrames con Logic a:

options.iframes.ignoreCrossOrigin : Establecer en Silence para silenciar advertencias de origen cruzado para iframes dentro de la ventana. La integración de enfoque no puede funcionar completamente con iframes de origen cruzado. Habrá casos en los que la ventana no se muestra como enfocada al hacer clic en el iframe, y el enfoque no se puede restaurar a los controles dentro del iframe.

Devuelve un objeto jQuery con métodos y propiedades adicionales:

`title(text)`

Establece el título, o si no se pasa text , devuelve el título actual de la ventana.

`close(force=false)`

Cierra la ventana.

Si force es true , el evento "Cerrar" no se emitirá, y la ventana se cerrará de inmediato.

`focus()`

Intenta enfocar algo dentro de la ventana, en este orden de prioridad:

El último control enfocado dentro de la ventana
Un control con class="default"
Si es una ventana de herramienta, la ventana principal
y de lo contrario la ventana en sí (específicamente $window.$content )

`blur()`

Elimina el enfoque de la ventana. Si el enfoque está fuera de la ventana, queda sin cambios.

`minimize()`

Minimiza la ventana. Si $window.task.$task se define, lo usará como objetivo para minimizar, de lo contrario, la ventana se minimizará en la parte inferior de la pantalla.

El comportamiento actual es que alterna la minimización. Esto puede cambiar en el futuro.

`maximize()`

Maximiza la ventana. Mientras se maximice, la ventana usará position: fixed , por lo que no se desplazará con la página.

El comportamiento actual es que alterna la maximización. Esto puede cambiar en el futuro. Además, si se minimiza, se restaurará en lugar de maximizar. Básicamente, hace lo que hace el botón Maximizar, en lugar de simplemente lo que sugiere el nombre del método.

`unminimize()`

Privado: no uses esto. Use restore() en su lugar.

Restaura la ventana del estado minimizado.

`restore()`

Restaura la ventana del estado minimizado o maximizado. Si la ventana no se minimiza o maximiza, este método no hace nada.

`center()`

Centra la ventana en la página. Debe llamar a esto después de que el contenido de la ventana esté completamente renderizado, o ha establecido un tamaño fijo para la ventana.

Si tiene imágenes en la ventana, espere a que se carguen antes de mostrar y centrar la ventana, o defina un tamaño fijo para las imágenes.

`applyBounds()`

Se adapta a la ventana dentro de la página si está parcialmente fuera de pantalla. (No cambia el tamaño de la ventana si es demasiado grande; saldrá a la derecha e inferior de la pantalla).

`bringTitleBarInBounds()`

Reposiciona la ventana para que la barra de título esté dentro de los límites de la página, para que se pueda arrastrar.

`bringToFront()`

Lleva la ventana al frente estableciendo su z-index en más grande que cualquier z-index aún utilizado por el sistema de ventanas.

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

Establece el tamaño de la ventana. Pase { innerWidth, innerHeight } para especificar el tamaño en términos del contenido de la ventana, o { outerWidth, outerHeight } para especificar el tamaño, incluido el marco de la ventana.

(Esto puede ampliarse en el futuro para permitir establecer la posición también ...)

`setIcons(icons)`

Cambia los icono (s) de la ventana. icons están en el mismo formato que options.icons .

`setTitlebarIconSize(size)`

Establece el tamaño del ícono de la barra de título de la ventana, eligiendo el tamaño más cercano que está disponible.

`getTitlebarIconSize()`

Devuelve el tamaño del icono de la barra de título de la ventana.

`getIconAtSize(size)`

Elige el tamaño del icono más cercano que está disponible y devuelve un nodo DOM único (es decir, clonado), o null si no se definen iconos.

Esto se puede usar para representar la ventana en la barra de tareas.

`setMenuBar(menuBar)`

Agrega la barra de menú a la ventana y establece el alcance del teclado para las teclas de acceso rápido de la barra de menú en la ventana.

Se puede llamar con null para eliminar la barra de menú.

`setMinimizeTarget(minimizeTargetElement)`

El objetivo de minimizar (botón de la barra de tareas) representa la ventana cuando se minimiza y se usa para animar minimizar y restaurar. Si minimizeTargetElement es null , la ventana se minimizará en la parte inferior de la pantalla (el valor predeterminado).

`$Button(text, action)`

Crea un botón en el área de contenido de la ventana. Cierra automáticamente la ventana cuando se hace clic. No hay una (buena) forma de evitar esto, ya que está destinado solo a los diálogos.

Si necesita algún otro comportamiento, simplemente cree un <button> y agréguelo al área de contenido de la ventana.

Devuelve un objeto jQuery.

`addChildWindow($window)`

Privado: no uses esto.

Define una ventana cuando era niño. Para las ventanas de herramientas, el estado de enfoque se compartirá con la ventana principal.

Esto se usa internamente cuando establece options.parentWindow ParentWindow al crear una ventana.