Téléchargement os gui os gui Téléchargement du code source OS GUI

os gui

Autre code source

v0.7.3 Taskbarless Minimization

Télécharger

Une bibliothèque pour imiter les interfaces utilisateur graphiques du système d'exploitation sur le Web

Plus précisément, Windows 98 - pour l'instant au moins; Il pourrait être élargi à l'avenir.

Cette bibliothèque alimente 98.js.org, une version Web de Windows 98, y compris la peinture, le bloc-notes, l'enregistreur sonore, etc.

Voir la page d'accueil pour plus d'informations.

Caractéristiques

Barres de menu, avec prise en charge des éléments de case à cocher et de radio, des états désactivés, des sous-menus, des raccourcis clavier, et plus encore
Les fenêtres de l'application que vous pouvez faire glisser, maximiser, minimiser, fermer et redimensionner
Variants de dialogue et de fenêtre d'outils
Animation de la barre de titres volants qui guide vos yeux pendant maximiser / minimiser / restaurer
Configuration de la mise au point: si vous tabez ou Shift + Tab dans une fenêtre, il s'enroule au premier / dernier contrôle.
Styles de bouton, y compris les boutons légers, les boutons désactivés et les boutons d'action par défaut
Styles de barre de défilement, spécifiques à la webkit (à l'avenir, il pourrait y avoir une barre de défilement personnalisée basée sur une bibliothèque de barre de défilement non intrusive, ou des styles prenant en charge une bibliothèque, où vous êtes censé utiliser la bibliothèque directement)
- Des flèches rendues procédurales, permettant différentes tailles de barre de défilement
- Effet d'inversion lorsque vous cliquez sur Scrollbar Track
Inscrit avec Windows .theme & .themepack Fichiers à l'exécution !

Démo

Voir les démos en ligne ici

Voir aussi

98.js, mon bureau Web
Padraigfl / Packard-Belle
arturbien / react95
React95 / react95

Exigences

Cette bibliothèque nécessite actuellement JQuery pour l'implémentation de fenêtre. Les barres de menu ne nécessitent pas jQuery.

(Finalement, je veux n'avoir aucune dépendance. Jusqu'à présent, j'ai supprimé JQuery du code de menu ...)

Installation

La bibliothèque n'est pas (encore) fournie comme un seul fichier pratique.

Vous pouvez soit 1. Téléchargez le référentiel en tant que fichier zip, 2. Clone le référentiel, ou 3. Installez la bibliothèque en tant que package NPM.

Vous devez inclure des scripts pour les composants que vous souhaitez utiliser ( MenuBar.js ou $Window.js ), ainsi que des feuilles de style pour la mise en page, un thème et un schéma de couleurs.

Assurez-vous d'utiliser les fichiers CSS compilés, pas les fichiers source.

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

Dans <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

Remarque : L'API changera probablement beaucoup, mais je maintiens un modiage.

Styles de panneau et d'encart

.inset-deep crée une bordure insensée de 2px
.outset-deep crée une bordure insettée de 2px (comme un bouton ou une fenêtre ou une fenêtre contextuelle de menu)
.inset-shallow crée une bordure insettée 1px
.outset-shallow crée une bordure de départ 1px

Styles de bouton

Les styles de bouton sont appliqués aux éléments button dans le monde. (Et si jamais vous voulez le réinitialiser, notez que vous devez vous débarrasser de l'élément pseudo ::after aussi. @Todo: Scope CSS)

Bouton à bascule

Pour faire un bouton basculer, ajoutez la classe .toggle au bouton. Faites-le montrer comme pressé avec la classe .selected . (@Todo: Renommer ce .pressed )

Vous devez utiliser les styles avec des attributs sémantiques aria-pressed , aria-haspopup et / ou aria-expanded .

Boutons par défaut

Vous pouvez afficher le bouton est l'action par défaut en ajoutant .default au bouton. Notez que dans Windows 98, ce style passe du bouton à la bouton en fonction de la mise au point. Une règle de base est qu'elle devrait être sur le bouton qui se déclenchera avec Entrée.

Boutons légers

Vous pouvez faire un bouton léger en ajoutant .lightweight au bouton. Les boutons légers sont subtils et n'ont pas de bordure avant de planer.

États du bouton désactivé

Vous pouvez désactiver un bouton en ajoutant l'attribut disabled standard au bouton.

États du bouton appuyé

Vous pouvez afficher un bouton comme appuyé sur la classe .pressing au bouton.
Ceci est utile pour les boutons déclenchés par une touche.

Styles de barre de défilement

Les styles de barre de scroll sont appliqués à l'échelle mondiale, mais ils ont un préfixe -webkit- , donc ils ne fonctionneront que dans des navigateurs "basés sur webkit", en général, comme Chrome, Safari et Opera.

(Peut être remplacé avec ::-webkit-scrollbar et sélecteurs associés (mais pas facilement réinitialisés avec la valeur par défaut du navigateur, sauf -webkit-appearance: scrollbar fonctionne ... @Todo: Scope CSS)

Styles de sélection

Les styles de sélection sont appliqués à l'échelle mondiale.

(Peut être remplacé par ::selection (mais pas facilement réinitialisé avec le navigateur par défaut ... à moins que avec unset ? @Todo: Scope CSS)

`MenuBar(menus)`

Crée un composant de barre de menu.

menus doivent être un objet qui maintient des tableaux de spécifications d'élément de menu, clés par le nom du bouton de menu.

Renvoie un objet avec element de propriété, que vous devez ensuite ajouter au DOM où vous le souhaitez.

Voir des exemples dans le code de démonstration.

`element`

L'élément DOM qui représente la barre de menu.

`closeMenus()`

Ferme tous les menus ouverts.

`setKeyboardScope(...eventTargets)`

Les raccourcis clavier comme Alt seront manipulés au niveau de l'élément (s) ou de l'événement cible (s).

Par défaut, la portée est window (globale), pour le cas d'une application à une seule page où la barre de menu est en haut. Si vous mettez la barre de menu dans une fenêtre, vous devez l'appeler avec l'élément de la fenêtre:

 menu_bar . setKeyboardScope ( $window . element ) ;

Ou mieux encore,

 $window . setMenuBar ( menu_bar ) ;

qui prend en charge la portée du clavier pour vous, tout en fixant la barre de menu à la fenêtre.

Notez que certains comportements du clavier sont toujours gérés si la barre de menu est concentrée.

Remarque également pour iframes, vous devrez peut-être appeler cela avec $window[0], iframe.contentWindow actuellement, mais cela doit être modifié à l'avenir (les événements du clavier doivent être proxés).

Événement: `info`

Peut être utilisé pour implémenter une barre d'état. Une description est fournie comme event.detail.description lors du retour des éléments de menu qui spécifient une description . Par exemple:

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

Événement: `default-info`

Signaux qu'une barre d'état doit être réinitialisée avec un message vide ou par défaut.

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

Spécification de l'élément de menu

Les spécifications de l'élément de menu sont MENU_DIVIDER (une constante indiquant une règle horizontale), soit une spécification de groupe radio, ou un objet avec les propriétés suivantes:

label : une étiquette pour l'article; Les ampères et définissent les clés d'accès (pour utiliser un ampère et usage littéraux, use && )
shortcutLabel (facultatif): un raccourci clavier à afficher pour l'élément, comme "Ctrl + A" (Remarque: vous devez écouter le raccourci vous-même, contrairement aux clés d'accès)
ariaKeyShortcuts (facultatif): aria-keyshortcuts pour l'élément, comme "Control + A Meta + A", pour les lecteurs d'écran. "CTRL" n'est pas valide (vous devez l'épeler), et il est préférable de fournir une alternative pour MacOS, généralement avec la clé de commande équivalente, en utilisant "Meta" (et event.metaKey ).
action (facultatif): une fonction à exécuter lorsque l'élément est cliqué (ne peut spécifier que action ou checkbox )
checkbox (facultatif): un objet spécifiant que cet élément doit se comporter comme une case à cocher.
- check de la propriété de cet objet doit être une fonction qui vérifie si l'élément doit être vérifié ou non, le retour true pour vérification et false non contrôlé. Quel nom mignon.
- toggle de la propriété doit être une fonction qui bascule l'état de l'option, mais vous le stockez; appelé lors du clic.
enabled (facultatif): peut être false pour désactiver inconditionnellement l'élément, ou une fonction qui détermine si l'élément doit être activé, le rendement true pour activer l'élément, false pour désactiver.
submenu (facultatif): un tableau de spécifications d'élément de menu pour créer un sous-menu
description (Facultatif): pour implémenter une barre d'état; Un événement info est émis lorsqu'il a roulé sur l'article avec cette description
value (facultative): pour les éléments radio, la valeur de l'élément; Peut être n'importe quel type, mais === est utilisé pour déterminer si l'élément est vérifié.

Une spécification de groupe radio est un objet avec les propriétés suivantes:

radioItems : un tableau de spécifications d'élément de menu pour créer un groupe de bouton radio. Contrairement à submenu , les éléments sont inclus directement dans ce menu. Il est recommandé de séparer le groupe radio des autres éléments de menu avec un MENU_DIVIDER .
getValue : une fonction qui devrait renvoyer la valeur de l'élément radio sélectionné.
setValue : une fonction qui devrait changer l'état en valeur donnée, d'une manière spécifique à l'application.
ariaLabel (facultatif): une chaîne à utiliser comme aria-label pour le groupe radio (pour l'accessibilité du lecteur d'écran)

Clés d'accès

Les menus peuvent être navigués avec des raccourcis clavier contextuels appelés clés d'accès .

Placez un ampère et une lettre dans un bouton de menu ou l'étiquette d'un élément de menu pour en faire une clé d'accès. Microsoft a une documentation sur les clés d'accès, y compris les directives pour le choix des clés d'accès. Généralement, la première lettre est un bon choix.

Si un élément de menu ne définit pas une clé d'accès, la première lettre de l'étiquette peut être utilisée pour y accéder.

Pour les boutons de menu, vous devez maintenir Alt lorsque vous appuyez sur la touche d'accès du bouton, mais pour les éléments de menu dans les fenêtres de menu, vous devez appuyer directement sur la touche, car Alt fermera les menus.

S'il y a plusieurs éléments de menu avec la même clé d'accès, il se déroulera entre eux sans les activer. Vous devriez essayer de rendre les clés d'accès uniques, y compris entre les clés d'accès définies et les premières lettres des éléments de menu sans clés d'accès définies. (Ce comportement est observé dans Windows 98, dans le menu Favoris de l'Explorer, où vous pouvez faire des signets avec la première lettre correspondant aux clés d'accès des autres éléments de menu.)

Il y a un objet AccessKeys exporté par MenuBar.js , avec des fonctions pour traiter les clés d'accès:

`AccessKeys.escape(label)`

Échappe des ampères et des étiquettes donné, afin qu'ils ne soient pas interprétés comme des clés d'accès.

Ceci est utile pour les menus dynamiques, comme un menu d'historique qui utilise des titres de page comme étiquettes. Vous ne voulez pas que les ampères et les clés d'accès soient interprétées comme des clés d'accès, ou les doubles ampères et les ampères et les ampères.

`AccessKeys.unescape(label)`

UNE-ESPAPES TOUS LES DOUBLE AMPERSANDS DANS LE LABELLE.

Pour le rendu, utilisez plutôt toHTML ou toFragment .

`AccessKeys.has(label)`

Renvoie True si l'étiquette a une clé d'accès.

`AccessKeys.get(label)`

Renvoie la clé d'accès pour l'étiquette donnée, ou null si aucune.

MenuBar gère automatiquement les clés d'accès, mais si vous incluez des clés d'accès pour d'autres éléments de l'interface utilisateur, vous devez les gérer vous-même, et vous pouvez l'utiliser plutôt que de coder dur la clé d'accès, il n'a donc pas besoin d'être modifié à deux endroits.

`AccessKeys.remove(label)`

Supprime l'indicateur de clé d'accès ( & ) de l'étiquette et n'escapent pas les doubles ampères et les deux ampères. Supprime également un indicateur de clé d'accès entre parenthèses, comme "(& n)", comme cas spécial.

`AccessKeys.toText(label)`

Supprime l'indicateur de clé d'accès ( & ) de l'étiquette et n'escapent pas les doubles ampères et les deux ampères. C'est comme toHTML mais pour le texte brut.

Remarque : Bien que les clés d'accès souvent font partie d'un mot, comme "et nouveau", dans les traductions, elles sont souvent indiquées séparément, comme "새로 만들기 만들기 (& n)", car la clé d'accès reste la même, mais la lettre ne fait plus partie du mot (ou même de l'alphabet). Cette fonction ne supprime pas les chaînes comme "(& n)", elle ne supprimera que le "&" et laissera "새로 만들기 (n)". Si vous voulez ce comportement, utilisez AccessKeys.remove(label) .

`AccessKeys.toHTML(label)`

Renvoie HTML (avec une échappement approprié) avec la clé d'accès comme un élément <span class='menu-hotkey'> .

Remarque de sécurité : il est sûr d'utiliser le résultat de cette fonction dans le contenu de l'élément HTML, car il échappe à l'étiquette. Il n'est pas sûr d'utiliser dans une valeur d'attribut, mais ce n'est pas l'utilisation prévue.

Remarque de mise en page : vous pouvez entourer le résultat avec <span style="white-space: pre"> pour empêcher les espaces de l'espace de s'effondrer si la clé d'accès est à côté d'un espace.

`AccessKeys.toFragment(label)`

Renvoie un DocumentFragment avec la touche d'accès en tant qu'élément <span class='menu-hotkey'> .

Remarque de mise en page : vous pouvez entourer le résultat avec <span style="white-space: pre"> pour empêcher les espaces de l'espace de s'effondrer si la clé d'accès est à côté d'un espace.

`$Window(options)`

Crée un composant de fenêtre qui peut être traîné et autres, amené à l'avant lorsque vous cliquez et fermé. Différents types de fenêtres peuvent être créés avec différentes options. Notez que Focus s'enroule dans le contenu d'une fenêtre.

Renvoie un objet jQuery avec des méthodes et des propriétés supplémentaires (voir ci-dessous, après les options).

Le nœud Dom est accessible avec $window.element , et l'objet $Window est accessible à partir du nœud Dom avec element.$window .

options.title : Définit la légende de la fenêtre initiale.

options.icons : spécifie l'icône de la fenêtre à différentes tailles. Passez un objet avec des touches qui sont des tailles dans des pixels (ou "n'importe quel"), et des valeurs qui sont l'URL d'une image, ou un objet avec srcset si vous souhaitez prendre en charge différentes densités de pixels, ou un nœud DOM si vous voulez un contrôle complet (par exemple, pour utiliser un <svg> ou une icône de police ou un emoji).

options.toolWindow : si true , la fenêtre sera une fenêtre d'outil, ce qui signifie qu'il n'aura pas de bouton minimiser ou maximiser, et il sera affiché comme toujours ciblé par défaut. Il aura également un bouton de fermeture plus petit dans les styles par défaut.

options.parentWindow : si spécifié, la fenêtre sera un enfant de cette fenêtre. Pour les fenêtres de l'outil, l'état de mise au point sera partagé avec la fenêtre parent.

options.maximizeButton : Si défini sur false , la fenêtre n'aura pas de bouton maximiser. Vous ne pouvez pas activer cela si toolWindow est true .

options.minimizeButton : Si défini sur false , la fenêtre n'aura pas de bouton minimiser. Vous ne pouvez pas activer cela si toolWindow est true .

options.closeButton : Si défini sur false , la fenêtre n'aura pas de bouton de fermeture.

options.resizable : Si réglé sur true , la fenêtre peut être redimensionnée par les bords et les coins.

options.outerWidth : spécifie la largeur initiale de la fenêtre, y compris les frontières.

options.outerHeight : spécifie la hauteur initiale de la fenêtre, y compris la barre de titre, la barre de menus et les bordures.

options.innerWidth : Spécifie la largeur initiale du contenu de la fenêtre, à l'exclusion des frontières.

options.innerHeight : Spécifie la hauteur initiale du contenu de la fenêtre, à l'exclusion de la barre de titre, de la barre de menu et des bordures

options.minOuterWidth : la largeur extérieure minimale de la fenêtre (lors du redimensionnement), en pixels.

options.minOuterHeight : la hauteur extérieure minimale de la fenêtre (lors du redimensionnement), en pixels.

options.minInnerWidth : la largeur minimale du contenu de la fenêtre (lors du redimensionnement), en pixels.

options.minInnerHeight : la hauteur minimale du contenu de la fenêtre (lors du redimensionnement), en pixels.

options.constrainRect(rect, x_axis, y_axis) : une fonction qui peut être utilisée pour contraindre la fenêtre à un rectangle particulier. Prend et renvoie un objet rectangle avec des propriétés x , y , width et height . x_axis et y_axis Définissez ce qui est traîné: -1 pour la gauche et le haut, 1 pour la droite et le bas, et 0 pour le milieu. Notez que la fenêtre sera toujours limitée pour ne pas dépasser la largeur et la hauteur minimales.

options.iframes : Contient des options pour contrôler l'intégration IFRAME. Par défaut, OS-Gui essaiera d'améliorer les iframes avec la logique pour:

options.iframes.ignoreCrossOrigin : réglé sur true to silence avertissements d'origine croisée pour iframes dans la fenêtre. L'intégration de la mise au point ne peut pas fonctionner pleinement avec les iframes d'origine croisée. Il y aura des cas où la fenêtre n'est pas affichée comme axée lors du clic dans l'IFRAME, et la mise au point ne peut pas être restaurée sur les contrôles dans l'IFRAME.

Renvoie un objet jQuery avec des méthodes et des propriétés supplémentaires:

`title(text)`

Définit le titre, ou si text n'est pas passé, renvoie le titre actuel de la fenêtre.

`close(force=false)`

Ferme la fenêtre.

Si force est true , l'événement "Close" ne sera pas émis et la fenêtre sera fermée immédiatement.

`focus()`

Essaie de concentrer quelque chose dans la fenêtre, dans cet ordre de priorité:

Le dernier contrôle focalisé dans la fenêtre
Un contrôle avec class="default"
Si c'est une fenêtre d'outil, la fenêtre parent
et sinon la fenêtre elle-même (spécifiquement $window.$content )

`blur()`

Supprime la mise au point de la fenêtre. Si la focalisation est à l'extérieur de la fenêtre, elle est restée inchangée.

`minimize()`

Minimise la fenêtre. Si $window.task.$task est défini, il l'utilisera comme cible pour minimiser, sinon la fenêtre minimisera le bas de l'écran.

Le comportement actuel est qu'il bascule la minimisation. Cela pourrait changer à l'avenir.

`maximize()`

Maximise la fenêtre. Bien que maximisée, la fenêtre utilisera position: fixed , donc elle ne fait pas défiler avec la page.

Le comportement actuel est qu'il bascule maximisation. Cela pourrait changer à l'avenir. De plus, s'il est minimisé, il restaurera au lieu de maximiser. Fondamentalement, il fait ce que fait le bouton Maximiser, plutôt que simplement ce que le nom de la méthode suggère.

`unminimize()`

Privé: n'utilisez pas cela. Utilisez restore() à la place.

Restaure la fenêtre de l'état minimisée.

`restore()`

Restaure la fenêtre à partir de l'état minimisé ou maximisé. Si la fenêtre n'est pas minimisée ou maximisée, cette méthode ne fait rien.

`center()`

Centre la fenêtre de la page. Vous devez appeler cela après que le contenu de la fenêtre soit entièrement rendu, ou que vous avez réglé une taille fixe pour la fenêtre.

Si vous avez des images dans la fenêtre, attendez qu'ils se chargent avant de montrer et de centrer la fenêtre ou de définir une taille fixe pour les images.

`applyBounds()`

Convient à la fenêtre dans la page si elle est partiellement hors écran. (Ne redimensionne pas la fenêtre si elle est trop grande; elle va de la droite et du bas de l'écran.)

`bringTitleBarInBounds()`

Repositionne la fenêtre de sorte que la barre de titre se trouve dans les limites de la page, afin qu'elle puisse être traînée.

`bringToFront()`

Amène la fenêtre à l'avant en définissant son z-index à plus grand que n'importe quel z-index mais utilisé par le système de fenêtres.

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

Définit la taille de la fenêtre. PASS { innerWidth, innerHeight } pour spécifier la taille en termes de contenu de la fenêtre, ou { outerWidth, outerHeight } pour spécifier la taille comprenant le cadre de la fenêtre.

(Cela peut être élargi à l'avenir pour permettre à la définition de la position également ...)

`setIcons(icons)`

Modifie les icônes de la fenêtre. icons sont dans le même format que options.icons .

`setTitlebarIconSize(size)`

Définit la taille de l'icône de barre de titre de la fenêtre, en choisissant la taille la plus proche disponible.

`getTitlebarIconSize()`

Renvoie la taille de l'icône de barre de titre de la fenêtre.

`getIconAtSize(size)`

Choisissez la taille de l'icône la plus proche disponible et renvoie un nœud DOM unique (c.-à-d. Cloné), ou null si aucune icône n'est définie.

Cela peut être utilisé pour représenter la fenêtre dans la barre des tâches.

`setMenuBar(menuBar)`

Ajoute la barre de menu à la fenêtre et définit la portée du clavier pour les raccourcis clavier de la barre de menu dans la fenêtre.

Peut être appelé avec null pour supprimer la barre de menu.

`setMinimizeTarget(minimizeTargetElement)`

La cible minimiser (bouton Taskbar) représente la fenêtre lorsqu'elle est minimisée et est utilisée pour l'animation de minimiser et de restaurer. Si minimizeTargetElement est null , la fenêtre minimisera le bas de l'écran (par défaut).

`$Button(text, action)`

Crée un bouton dans la zone de contenu de la fenêtre. Il ferme automatiquement la fenêtre lorsque vous cliquez sur. Il n'y a pas de (bon) moyen d'empêcher cela, car il est destiné uniquement aux boîtes de dialogue.

Si vous avez besoin d'un autre comportement, créez simplement un <button> et ajoutez-le à la zone de contenu de la fenêtre.

Renvoie un objet jQuery.

`addChildWindow($window)`

Privé: n'utilisez pas cela.

Définit une fenêtre comme un enfant. Pour les fenêtres de l'outil, l'état de mise au point sera partagé avec la fenêtre parent.

Ceci est utilisé en interne lorsque vous définissez options.parentWindow ParentWindow lors de la création d'une fenêtre.