Window - Documentation | www.HtmlElements.com

Overview

Smart.Window represents a custom element which acts as a draggable and resizable HTML container that sits ontop of the page.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.window.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class
    • smart.button.js - the JS file containing the definition for the buttons inside the header of the window.
    • smart.window.js - the JS file containing the element definition.

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #window is a smart-window tag.

      import {smartWindow} from "../../source/modules/smart.window.js";
      
      Smart('#window', class {
      get properties() {
      	return {
      		opened: true
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const window = document.querySelector("#window"); and set the properties like that:
      const window = document.querySelector("#window");
      
      window.opened = true;
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #window is a DIV tag.

      import {smartWindow} from "../../source/modules/smart.window.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const window = new smartWindow('#window', {
         		opened: true
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html>
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <script type="text/javascript" src="../../source/smart.element.js"></script>
       <script type="text/javascript" src="../../source/smart.button.js"></script>
       <script type="text/javascript" src="../../source/smart.window.js"></script>
      </head>
      <body>
       <smart-window opened></smart-window>
      </body>
      </html>
      

      Demo

      The opened attribue is applied in order to show the window element. By default the property is not applied and the window is not visible.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const window = document.createElement('smart-multiline-text-box');

Append it to the DOM:
document.body.appendChild(window);

Remove it from the DOM:
window.parentNode.removeChild(window);

Set a property:
window.propertyName = propertyValue;

Get a property value:
const propertyValue = window.propertyName;

Invoke a method:
window.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

window.addEventListener(eventName, eventHandler);

Remove Event Listener:
window.removeEventListener(eventName, eventHandler, true);

Appearance

Smart.Window element represents a blank HTML container that can be used as a window for other elements, a modal that prompts for something while blocking the UI in the background or just a simple prompt panel asking for user permission. The appearance of the window depends on user preferences.


The element can appear as closed or opened. Opened means the element is visible while closed means hidden. To open a window simply set the opened attribute or call the open() method:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.window.js"></script>
 <script>
     window.onload = function () {
        document.querySelector('smart-window').open();
     }
 </script>
</head>
<body>
 <smart-window></smart-window>
</body>
</html>

Demo

To close the window simply remove the opened attribute or call the close() method.


The window element has three sections: header, content and footer. All three of them are completely customizable.

The Header usually holds a label that represents the name of the window:

<smart-window opened label="New Window"></smart-window>

Demo

However the user can change the content of The Header to include any HTML code by passing an HTML Tempalte element to the headerTemplate property like so:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.window.js"></script>
 <style>
     .glyphicon-cloud {
        margin-right: 5px;
     }
 </style>
</head>
<body>
 <template id="headerTemplate">
     <span class="glyphicon glyphicon-cloud"></span>
     <span>Window</span>
 </template>

 <smart-window opened header-template="headerTemplate"></smart-window>
</body>
</html>

Demo

The Content section is the main section of the element. Here the user can store anything he desires in two ways:

  1. Place any HTML content between the opening and closing breckets of the element in the initialization code, like so:
    <smart-window opened>
     <section>
        <h3>What is Lorem Ipsum?</h3>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         </p>
      </section>
     </smart-window>
    

    Demo

  2. Change the content of the window at any time ( after the element has been initialized and ready) using the innerHTML property:
    <!DOCTYPE html>
    <html>
    <head>
     <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
     <script type="text/javascript" src="../../source/smart.element.js"></script>
     <script type="text/javascript" src="../../source/smart.button.js"></script>
     <script type="text/javascript" src="../../source/smart.window.js"></script>
     <script>
        window.onload = function () {
            document.querySelector('smart-window').innerHTML = `
            <section>
             <h2>What is Lorem Ipsum?</h2>
             <p>
             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
             </p>
             </section>`;
            }
     </script>
    </head>
    <body>
     <smart-window opened></smart-window>
    </body>
    </html>
    

    Notice how we apply the changes during the window.onload. This is the stage at which the custom elements are initialized and ready to accept changes.

    Demo

The Footer section of the element can also be customized using HTML Template:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.window.js"></script>
 <style>
     smart-window {
         --smart-window-header-height: 40px;
         --smart-window-footer-height: 40px;
         --smart-window-default-height: 200px;
     }

    smart-window .smart-footer {
        display: flex;
        justify-content: space-evenly;
     }

     smart-window .smart-footer smart-button {
        height: 100%;
     }
 </style>
</head>
<body>
 <template id="footerTemplate">
     <smart-button>No</smart-button>
     <smart-button>Yes</smart-button>
 </template>

 <smart-window opened footer-template="footerTemplate">
    <h2>Want to learn more?</h2>
</smart-window>
</body>
</html>

Demo

Modal Windows are used when the user wants to block the UI in the background. In order to enable that functionality of the element simply add the modal attribute to the HTML tag of the element:

<smart-window opened modal>Modal Window</smart-window>

Demo

Or set the modal property via Javascript:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.window.js"></script>
 <script>
     window.onload = function () {
        document.querySelector('smart-window').modal = true;
     }
 </script>
</head>
<body>
 <smart-window opened>Modal Window</smart-window>
</body>
</html>

Demo

Behavior

Smart.Window can be dragged or resized inside the container of it's parent element. Dragging is enabled by default while resizing is not.

To enable resizing the user has to apply the property resizable to the element either in the HTML tag of the element or via javascript:

<smart-window opened resizable></smart-window>

Demo

The window can be resized from any of it's sides or corners.

However there is a property that controls the resizing behavior called resizeMode.

Two modes are available:

  • default - the window can be resized from any side or corner.
  • corner - the window can be resized only from the bottom-right corner.

Changing the reseizeMode is as easy as the any other property:

<smart-window opened resizable resize-mode="corner"></smart-window>

Demo

Window dragging can be disabled by applying the pinned property:

<smart-window opened pinned></smart-window>

Demo


Or calling the pin() method:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.window.js"></script>
 <script>
     window.onload = function () {
        document.querySelector('smart-window').pin();
     }
 </script>
</head>
<body>
 <smart-window opened></smart-window>
</body>
</html>                    

Demo

To allow dragging again simply remove the pinned attribute or call the unpin() method.


The window can fill the entire screen if necessary. This can be accomplished via the maximized property or by calling the maximize() method just like in the example above.

<smart-window maximized opened></smart-window>

Demo

To restore the window size back to normal remove the maximized property or call the restore() method.


Smart.Window can be collapsed by applying the collapsed property or calling the collapse() method. When collapsed the only visible part of the window is the header section.

<smart-window collapsed opened></smart-window>

Demo

In order to restore the window to it's full size, remove the collapsed attribute or call the restore() method.

Keyboard Support

Smart.Window implements the following keys:

Key Action
Arrow Up / Arrow Down / Arrow Left/ Arrow Right Move the window according to the direction.
Ctrl + Arrow Up / Arrow Down / Arrow Left/ Arrow Right Resize the window according to the direction.
Alt + Arrow Up / Arrow Down Maximize/Restore the window.
Ctrl + P Pin/Unpin the window
Ctrl + C Collapse/Uncollapse the window

Styling

Smart.Window uses the following CSS variables for styling:

  • --smart-window-default-height - sets the height of the element.
  • --smart-widnow-default-width - sets the width of the element.
  • --smart-window-header-height - sets the height of the header of the element.
  • --smart-window-min-width - sets the min-width of the window element.
  • --smart-window-footer-height - sets the height of the footer the element.

Here's how to apply the variables:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.window.js"></script>
 <style>
     smart-window {
         --smart-window-default-height: 150px;
         --smart-widnow-default-width: 200px;
         --smart-window-header-height: 30px;
     }
 </style>
</head>
<body>
 <smart-window opened></smart-window>
</body>
</html>

Demo