demo_priority.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ComponentManger | Demo</title>
    <link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>

    <style type="text/css">
        * {
            font-family: 'Crimson Text', serif;
        }

        button {
            font-size: 1rem;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
    <script src="src/manager.js"></script>
    <script src="demo/jquery.informer.js"></script>
    <script src="demo/jquery.fakeLatin.js"></script>
  </head>

  <body>
    <h1>Demo</h1>
    <button id="addComponent">Add block with nested components</button>
    <button id="removeComponent">Remove last block</button>

    <div id="component-container"></div>

    <script type="text/javascript">
        // Register a component that reads the public fields of the jQuery plugin which lives on its inner <div>
        ComponentManager.register(
            'informer',
            function(addedNode) {
                // If the plugins uses options, those can be passed to the plugin here
                $(addedNode).informer();
            },
            function(removedNode) {
                // Call the destructor to allow the plugin to tear down
                $(removedNode).data('plugin_informer').destroy();
            },
            20
        );

        // Register a component: a simple jQuery plugin that displays parts of "lorem ipsum"
        ComponentManager.register(
            'fakelatin',
            function(addedNode) {
                $(addedNode).fakeLatin();
            },
            function(removedNode) {
                $(removedNode).data('plugin_fakeLatin').destroy();
            },
            10
        );


        // Tell the component manager to start listening for changes to the DOM
        ComponentManager.init();


        // UI code for this demo
        var addComponent = function() {
            var divElement = document.createElement('div');

            divElement.innerHTML = '<div data-component-name="informer"><p></p><blockquote data-component-name="fakelatin"></blockquote></div>';

            document.body.querySelector('#component-container').appendChild(divElement);
        };

        var removeComponent = function () {
            var container = document.body.querySelector('#component-container');
            var components = container.childNodes;

            if (components.length) {
                container.removeChild(components[components.length - 1]);
            }
        };

        document.querySelector('#addComponent').addEventListener('click', addComponent, false);
        document.querySelector('#removeComponent').addEventListener('click', removeComponent, false);
    </script>
  </body>

</html>