Material & ventana de diálogo estilo de macOS en JavaScript-VtWindow

Vista prévia

Descripción

VtWindow (Virtual Windows) is a JavaScript plugin to display web content in Google Material or macOS style dialog windows with drag, resize, fullscreen, maximize, close capabilities.

Funcionamiento

Cargue la hoja de estilos principal y el tema CSS de su elección en el HTML.

<link rel="stylesheet" href="vtwindow.css">
<link rel="stylesheet" href="vtwindow-theme.material.css">
<link rel="stylesheet" href="vtwindow-theme.osx.css">

Cargue los iconos de material para las ventanas de material.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Cargue el código JavaScript ' vtwindow. js ' al final de la página HTML.

<script src="vtwindow.js"></script>

Cree las plantillas para las ventanas de diálogo.

<template id="m">

<div role="dialog" aria-label="" class="vt-window-material">



<div name="header" class="valign-wrapper deep-purple">





<span name="title">${content.title}</span>





<span name="controls">







<button name="popout" class="btn-flat" title="Deattatch"><i class="material-icons">launch</i></button>







<button name="minimize" class="btn-flat" title="Minimize"><i class="material-icons">remove</i></button>







<button name="maximize" class="btn-flat" title="Maximize"><i class="material-icons">zoom_out_map</i></button>







<button name="close" class="btn-flat" title="Close"><i class="material-icons">close</i></button>





</span>



</div>



<div name="body">





${content.body}





<input type="text">



</div>



<div name="footer">





<div name="grab"></div>



</div>

</div>
</template>

<template id="osx">

<div role="dialog" aria-label="" class="vt-window-osx">



<div name="header" class="">





<span name="title">${content.title}</span>





<span name="controls">







<button name="close" class="" title="Close"></button>







<button name="minimize" class="" title="Minimize"></button>







<button name="maximize" class="" title="Maximize"></button>







<button name="popout" class="" title="Deattatch"></button>





</span>



</div>



<div name="body">





${content.body}





<input type="text">



</div>



<div name="footer">





<div name="grab"></div>



</div>

</div>
</template>

Cree una nueva ventana virtual y especifique la plantilla que desea utilizar.

// VtWindow(content, options)
var macOS = new VtWindow(null, {


 template: osx.innerHTML
});

var googleMaterial = new VtWindow({



 title: 'Material Window',



 body: '<div style="padding: 10px; text-align: center; width: 100%;"><h4>Hello World!</h4></div>'


 }, {



 template: m.innerHTML


}
);

Todas las opciones predeterminadas para personalizar la ventana virtual.

var options = {




// top position


top: 10,



// left position


left: 10,



// width


width: 400,



// height


height: 300,



// enable/disable


closable: true,


maximizable: true,


minimizable: true,


deatachable: false, //needs polishing


resizable: true,



// preserve window order after focusing (disable if you need to use iframes inside windows)


preserveFocusOrder: true,



 // mount on new


autoMount: false,



 // Turn on optimazations for low end devices


lowEnd: false,



// Where the window should be mounted to (cannot be changed after instantiation)


container: document.body,



// Template used to construct the window


template: /*html*/`



<div role="dialog" aria-label="">




<div name="header">





<span name="title"><!-- title --></span>





<span name="controls">






<button name="popout">^</button>






<button name="maximize">+</button>






<button name="minimize">_</button>






<button name="close">x</button>





</span>




</div>




<div name="body">





<!-- body -->




</div>




<div name="footer">





<div name="grab"></div>




</div>



</div>



`,

}

Funciones de devolución de llamada.

var options = {




onMinimize: null,


onMaximize: null,


onMount: null,


onUnmount: null,


onShow: null,


onHide: null,


onPopout: null,


onExitPopout: null,


onFocus: null,


onBlur: null,

}

API methods.

myInstance.mount();
myInstance.setTitle('myInstance');
myInstance.setBody(`<div style="padding: 10px; text-align: center; width: 100%;"><h4>Hello World!</h4><p>Try the manipulating the <var>myInstance</var> object on console</p></div>`);
myInstance.top = 220;
myInstance.left = 220;
myInstance.width = 374;
myInstance.height = 206;
myInstance.closable = false;
myInstance.focus();
...

Registro de cambios

09/24/2018

• Actualización de JS