function modelView(){
this.container = $("<div id='model-view-container' class='suri-model-view'></div>"); this.dataWrapper = $("<div id='model-view-data-wrapper' class='suri-model-view' ></div>"); this.launch = function(){
// remove previous
removeModelView(); setContainer(this.container); setDataWrapper(this.dataWrapper);
// on window resize change the dimensions of container
$(window).resize(function(){ var tmp = $(window); $('#model-view-container').css({ 'min-height': tmp.height(), 'min-width': tmp.width() }); });
// cross button css and js
$('.cross-button').on({ 'mouseenter': function(){ $(this).css({'color':'green'}); }, 'mouseout': function(){ $(this).css({ 'color': 'red' }); }, 'mouseup': function(){ removeModelView(); } }); }; this.setData = function(data){ var $data = $("<div id='data-holder-model' ></div>").append(data); $data.css({ 'margin': '20px 20px 20px 20px' }); this.dataWrapper.append($data); }; function setDataWrapper($dataWrapper){ $dataWrapper.find('#data-holder-model').before("<span class='cross-button' style='font-family: sans-serif;font-size: 15px;float: right;margin-top: 3px;margin-right: 5px;cursor: pointer;color: red' >X</span>"); var window_height = $(window).height(); $dataWrapper.css({ 'display': 'inline-block', 'min-height': '200px', 'min-width': '200px', 'border': '1px lightgray solid', 'box-shadow': '0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15)', 'max-width': '80%', 'border-radius': '6px', 'background-color': 'white', 'color': 'black' }); $dataWrapper = $("<div class='suri-model-view' id='data-wrap-holder'></div>").append($dataWrapper); $dataWrapper.css({ 'text-align': 'center', 'position': 'fixed', 'z-index': 15, 'width': '100%', 'max-height': (window_height - 0.3 * window_height) + 'px' , 'top': '20%', 'overflow-y': 'scroll' }); $('body').append($dataWrapper); } function setContainer(container){ var tmp = $(window); container.css({ 'min-height': tmp.height()+'px', 'min-width': tmp.width()+'px', 'position': 'fixed', 'z-index': 10, 'top': '0px', 'background-color': 'white', 'opacity': 0.8 }); $('body').append(container); }
// remove the model
function removeModelView(){ $('.suri-model-view').remove(); }
}