Panacea

Panacea is the collection of vanilla Javascript components and services created to enable our developers to use whatever Javascript framework they want while still maintaining a single codebase for these components and services.

Custom Components

Modals

Dialogs display content in an addtional layer on top of the app. They allow users to immediately address an action without going out of context.

Acknowledgment Dialogue

Dialogs display content in an addtional layer on top of the app. They allow users to immediately address an action without going out of context.

<div class="modal" style="display:block">
    <div class="modal-backdrop fade show"></div>
        <div class="modal-dialog">
            <div class="modal-content fade show">
                <div class="dialog-header"><h3 class="dialog-title">CM 'app'</h3>
                    <button class="close" type="button">
                        <span class="cm-icon cm-icon-close"></span>
                    </button>
                </div>
                <div class="dialog-body">Delete 'object'?</div>
                <div class="dialog-footer">
                    <button class="btn btn-secondary" type="button">Cancel</button>
                    <button class="btn btn-primary" type="button">OK</button>
                </div>
            </div>
        </div>
    </div>

 window.addModal(
    {
        title:'CM \'app\'',
        message:'Delete \'object\'?',
        type:'acknowledgement',
        callbacks:{
            onClose:function(opt){
                console.log('closed',opt);
            },
            onAccept:function(opt){
                console.log('accepted',opt);
            },
            onCancel:function(opt){
                console.log('cancelled',opt);
            }
        }
    }
)

Dialog (with custom buttontexts)

Dialogs display content in an addtional layer on top of the app. They allow users to immediately address an action without going out of context.

<div class="modal" style="display:block">
    <div class="modal-backdrop fade show"></div>
        <div class="modal-dialog">
            <div class="modal-content fade show">
                <div class="dialog-header"><h3 class="dialog-title">A new message</h3>
                    <button class="close" type="button">
                        <span class="cm-icon cm-icon-close"></span>
                    </button>
                </div>
                <div class="dialog-body">I can have any conent inhere I want!</div>
                <div class="dialog-footer">
                    <button class="btn btn-secondary" type="button">Nope</button>
                    <button class="btn btn-primary" type="button">Go ahead!</button>
                </div>
            </div>
        </div>
    </div>

 window.addModal(
    {
        title: 'A new message',
        message: 'This message was created  ' + new Date().toISOString(),
        callbacks: {
            onClose: function (opt) {
                console.log('closed', opt);
            }, onAccept: function (opt) {
                console.log('accepted', opt);
            }, onCancel: function (opt) {
                console.log('cancelled', opt);
            }
        },
        cancelText: 'Nope',
        acceptText: 'Go ahead!'
    }
)