tenkuma/PaintPlay
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first

Browse source
This commit is contained in:
adrianvic 2023-12-21 14:33:34 -03:00
commit 59426d62fb
102 changed files with 42796 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

173
JS/CommandBar/CommandBar.css Normal file
View file

@ -0,0 +1,173 @@
.win-commandBar-horiz
{
font-size: 10pt;
margin: 0px 36px 0px 36px;
}
.win-commandBar-horiz[appLayout='0']
{
margin: 0px;
}
.win-commandBar-stack-vert button
{
width: 100%;
}
.win-commandBar-stack-horiz[stack='left']
{
float: left;
}
.win-commandBar-stack-horiz[stack='right']
{
float: right;
}
.win-commandBar-stack-test
{
position: absolute;
visibility: hidden;
}
.win-commandBar-group-horiz
{
display: inline;
}
.minimized *[data-win-minimize]
{
display: none !important;
}
.win-commandBar-command-horiz
{
background-color: transparent;
border: none;
color: #FFFFFF;
height: 88px;
margin: 0px;
padding: 14px 0px 10px 0px !important;
text-align: center;
width: 100px;
}
.win-commandBar-command-horiz div.commandLabel
{
display: inline-block;
font-family: Segoe UI;
font-size: 10pt;
margin-top: 5px;
padding: 0px;
text-align: center;
width: 88px;
}
.win-commandBar-command-horiz img.commandIcon
{
height: 40px;
width: 40px;
}
.win-commandBar-command-vert
{
display: block;
float: none !important;
}
.win-commandBar-hostedCommand-horiz
{
display: inline;
}
.minimized .win-commandBar-rule-horiz
{
margin-bottom: 0px;
}
.win-commandBar-rule-vert
{
background-color: #707070;
height: 1px;
width: 100%;
}
.win-commandBar-rule-horiz
{
background-color: #707070;
border: 0px;
display: inline-block;
height: 40px;
margin: 10px 29px 21px 28px;
padding: 0px;
width: 1px;
}
.win-commandBar-tooltip
{
background-color: #FFFFFF;
border: 1px solid #2A2A2A;
display: inline-block;
max-width: 360px;
min-width: 200px;
padding: 3px 12px 6px 12px;
}
/*
This is the container for the tooltip heading, e.g. "Play Now (Ctrl+P)",
where "Play Now is the title and "(Ctrl+P)" is the shortcut.
*/
.win-commandBar-tooltip-heading
{
display: -ms-box;
overflow: hidden;
}
/*
This is the command title, which can use all of the extra space left once
the shortcut is rendered. If the title is too long to fit in that space
and the tooltip reaches its maximum width, the title is truncated with
an ellipsis.
*/
.win-commandBar-tooltip-title
{
-ms-box-flex: 1;
padding-right: 5px;
}
/*
This is an empty div that keeps the shortcut div pushed against the right
side of the title div.
*/
.win-commandBar-tooltip-flex
{
-ms-box-flex: 1000;
}
.win-commandBar-tooltip-description
{
line-height: 14px;
}
.win-tooltip
{
line-height: normal;
padding: 0px;
background-color: transparent;
border: none;
}
.win-appbar
{
line-height: normal;
}
.win-appbar[transparent='true']
{
background-color: transparent;
}
.win-commandBar-flyout
{
padding: 0px;
}

1821
JS/CommandBar/CommandBar.js Normal file
View file

File diff suppressed because it is too large Load diff

26
JS/CommandBar/Flyout.css Normal file
View file

@ -0,0 +1,26 @@
.win-mediaFlyout
{
border: none;
line-height: normal;
padding: 0px;
}
.win-mediaFlyout-content
{
opacity: 0;
visibility: hidden;
z-index: 1001; /* Should be 1 higher than the background */
}
.win-mediaFlyout-background
{
background-color: rgba(0, 0, 0, 0);
background-image: url(Res/1x1.gif);
background-size: 100%;
height: 100vh;
left: 0;
top: 0;
visibility: hidden;
width: 100vw;
z-index: 1000; /* Z-index of AppBar is 999, flyout needs to be higher */
}

319
JS/CommandBar/Flyout.js Normal file
View file

@ -0,0 +1,319 @@
////////////////////////////////////////////////////////////
//// © Microsoft. All rights reserved. ////
////////////////////////////////////////////////////////////
/// <reference path="WinLib/Js/animations.js" />
/// <reference path="WinLib/Js/base.js" />
/// <reference path="WinLib/Js/ui.js" />
(function (WinNS) {
var Utilities = WinJS.Utilities;
var WinUI = WinJS.UI;
var Animation = WinJS.UI.Animation;
var elementIsInvalid = "Invalid argument: Control expects a valid DOM element as the first argument.";
var systemMargin = 20; // flyout cannot get closer than 45px to the edge of the screen
var Controls = WinJS.Namespace.defineWithParent(WinNS, "MediaApp.Controls", {
Anchor: {
topLeft: "topLeft",
topRight: "topRight",
bottomRight: "bottomRight",
bottomLeft: "bottomLeft"
},
Flyout: WinJS.Class.define(function (element, options) {
if (!element) {
throw new Error(elementIsInvalid);
}
// Configure host element
if (this === window || this === Controls) {
var flyout = WinUI.getControl(element);
if (flyout) {
return flyout;
} else {
return new Controls.Flyout(element, options);
}
}
// Attach the JS object to the host DOM element.
WinUI.setControl(element, this);
this._anchor = "topLeft";
this._content = null;
this._position = { x: 0, y: 0 };
this._element = element;
Utilities.addClass(this.element, "win-mediaFlyout");
// Process options
this.anchor = options.anchor;
this.position = options.position;
// Create UI elements
var that = this;
this._backgroundDiv = document.createElement("div");
this._backgroundDiv.className = "win-mediaFlyout-background";
this._backgroundDiv.style.position = "absolute";
this._backgroundDiv.addEventListener("click", function () {
that.dismiss();
}, false);
this._contentDiv = document.createElement("div");
this._contentDiv.className = "win-mediaFlyout-content";
this._contentDiv.role = "dialog";
this._contentDiv.setAttribute("aria-label", options.ariaLabel || "Dialog");
this._contentDiv.style.position = "absolute";
this._contentDiv.addEventListener("focus", function () {
that._fireEvent("focus", null);
}, false);
this._escPressed = function (event) {
if (event.key === "Esc") {
event.stopPropagation();
window.removeEventListener("keypress", arguments.callee, false);
that.dismiss();
}
};
this.element.appendChild(this._contentDiv);
this.element.appendChild(this._backgroundDiv);
},
{
// Public properties
element: {
get: function () {
return this._element;
}
},
content: {
get: function () {
return this._content;
},
set: function (val) {
var oldSize = { height: this.height, width: this.width };
if (this._content) {
document.body.appendChild(this._content);
}
this._content = val;
var newSize = { height: this.height, width: this.width };
this._fireEvent("contentupdate", null);
if (oldSize.height !== newSize.height ||
oldSize.width !== newSize.width) {
this._fireEvent("resize", null);
}
}
},
height: {
get: function () {
return this._content ? this._content.offsetHeight : 0;
}
},
width: {
get: function () {
return this._content ? this._content.offsetWidth : 0;
}
},
anchor: {
get: function () {
return this._anchor;
},
set: function (val) {
if (Controls.Anchor[val]) {
this._anchor = val;
}
}
},
position: {
get: function () {
return this._position;
},
set: function (val) {
if (val && typeof val.x === "number") {
this._position.x = val.x;
}
if (val && typeof val.y === "number") {
this._position.y = val.y;
}
}
},
// Public methods
show: function MediaFlyout_show() {
if (this._content) {
Utilities.empty(this._contentDiv);
this._contentDiv.appendChild(this._content);
var posX = 0,
posY = 0,
viewportWidth = window.innerWidth,
viewportHeight = window.innerHeight;
posX = this._position.x || 0;
posY = this._position.y || 0;
// Make sure the target position is within the margins
if (posX < systemMargin) {
posX = systemMargin;
} else if (posX > viewportWidth - systemMargin) {
posX = viewportWidth - systemMargin;
}
if (posY < systemMargin) {
posY = systemMargin;
} else if (posY > viewportHeight - systemMargin) {
posY = viewportHeight - systemMargin;
}
// Compute the upper left corner coords
switch (this._anchor) {
case Controls.Anchor.topRight:
posX -= this.width;
break;
case Controls.Anchor.bottomRight:
posX -= this.width;
posY -= this.height;
break;
case Controls.Anchor.bottomLeft:
posY -= this.height;
break;
}
// Ensure a good on-screen fit
if (this._anchor === Controls.Anchor.topLeft || this._anchor === Controls.Anchor.bottomLeft) {
if (posX + this.width > viewportWidth - systemMargin) {
// If it will fit, flip horizontally
if (posX - this.width > systemMargin) {
posX -= this.width;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.width = viewportWidth - posX - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
if (this._anchor === Controls.Anchor.topLeft || this._anchor === Controls.Anchor.topRight) {
if (posY + this.height > viewportHeight - systemMargin) {
// If it will fit, flip vertically
if (posY - this.height > systemMargin) {
posY -= this.height;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.height = viewportHeight - posY - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
if (this._anchor === Controls.Anchor.bottomLeft || this._anchor === Controls.Anchor.bottomRight) {
if (posY < systemMargin) {
// If it will fit, flip vertically
if (posY + this.height < viewportHeight - systemMargin) {
posY += this.height;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.height = posY - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
if (this._anchor === Controls.Anchor.topRight || this._anchor === Controls.Anchor.bottomRight) {
if (posX < systemMargin) {
// If it will fit, flip horizontally
if (posX + this.width < viewportWidth - systemMargin) {
posX += this.width;
} else {
// Otherwise, size the container and make it scroll
this._contentDiv.style.width = posX - systemMargin + "px";
this._contentDiv.style.overflow = "auto";
}
}
}
this._contentDiv.style.left = posX + "px";
this._contentDiv.style.top = posY + "px";
this._contentDiv.style.opacity = 1;
this._contentDiv.style.visibility = "visible";
this._backgroundDiv.style.visibility = "visible";
var that = this;
window.addEventListener("keypress", that._escPressed, false);
Animation.showPopup(this._contentDiv, { top: "0px", left: "0px" })
.then(function () {
that._fireEvent("show", null);
});
}
},
dismiss: function MediaFlyout_dismiss() {
this._contentDiv.style.opacity = 0;
this._contentDiv.style.visibility = "hidden";
this._backgroundDiv.style.visibility = "hidden";
var that = this;
// TODO: restore once animations complete correctly
/// Animation.hidePopup(this._contentDiv, { top: "0px", left: "0px" })
/// .then(function () {
/// that._fireEvent("dismiss", null);
/// });
this._fireEvent("dismiss", null);
},
addEventListener: function MediaFlyout_addEventListener(type, listener, useCapture) {
this.element.addEventListener(type, listener, useCapture);
},
removeEventListener: function MediaFlyout_removeEventListener(type, listener, useCapture) {
this.element.removeEventListener(type, listener, useCapture);
},
// Private methods
// Raises an event to external listeners with the specified name and payload
_fireEvent: function MediaFlyout_fireEvent(eventName, payload) {
if (document.createEvent) {
var eventObject = document.createEvent("Event");
eventObject.initEvent(eventName, true, false);
if (payload !== undefined) {
eventObject.payload = payload;
}
this.element.dispatchEvent(eventObject);
}
}
})
});
})(WinJS);