EVOLUTION-NINJA
Edit File: index1.html
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title></title> <link rel="stylesheet" type="text/css" href="css/main.css"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" /> <link rel='shortcut icon' type='image/x-icon' href='images/fave_icon.png' /> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </head> <body> <div class="middle_work"> <div class="container"> <div class="task-info"> <div class="task-info-head"> <div class="task-info-checkbox"> <div class="checkbox"> <label><input type="checkbox" value="">High Priority</label> </div> </div> <div class="task-info-text"> <input type="text" class="form-control" placeholder="Things to do"> </div> </div> <div> <textarea id="txtEditor"></textarea> </div> <div class="task-info-button"> <p> <a class="" data-toggle="collapse" data-target="#demo" role="button"><i class="fa fa-paperclip" aria-hidden="true"></i></a> <a class="" data-toggle="modal" data-target="#myModal" role="button"><i class="fa fa-quote-right" aria-hidden="true"></i></a> <span class="a_click">A</span> </p> </div> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Link</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2">Text:</label> <div class="col-sm-9"> <input type="text" class="form-control" placeholder="Link text"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Link:</label> <div class="col-sm-9"> <input type="text" class="form-control" placeholder="Link URL"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Save</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> <!-------- End model --------> <!------------------------------------ drag and drop Start ----------> <div id="demo" class="collapse"> <form action="./dummy.html" class="dropzone well" id="dropzone"> <div class="fallback"> <input name="file" type="file" multiple="" /> </div> </form> </div> <div id="preview-template" class="hide"> <div class="dz-preview dz-file-preview"> <div class="dz-image"> <img data-dz-thumbnail="" /> </div> <div class="dz-details"> <div class="dz-size"> <span data-dz-size=""></span> </div> <div class="dz-filename"> <span data-dz-name=""></span> </div> </div> <div class="dz-progress"> <span class="dz-upload" data-dz-uploadprogress=""></span> </div> <div class="dz-error-message"> <span data-dz-errormessage=""></span> </div> <div class="dz-success-mark"> <span class="fa-stack fa-lg bigger-150"> <i class="fa fa-circle fa-stack-2x white"></i> <i class="fa fa-check fa-stack-1x fa-inverse green"></i> </span> </div> <div class="dz-error-mark"> <span class="fa-stack fa-lg bigger-150"> <i class="fa fa-circle fa-stack-2x white"></i> <i class="fa fa-remove fa-stack-1x fa-inverse red"></i> </span> </div> </div> </div> <!------------------------------------ drag and drop End ----------> <div class="task-info-link"> <div class="row row_pad"> <div class="col-sm-3 col-lg-2"> <label style="padding-right:5px;">Responsible person</label> </div> <div class="col-sm-5 col-lg-6"> <select multiple="" class="select2" data-placeholder="Click to Choose..."> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> </select> </div> <div class="col-sm-4 col-lg-4"> <a class="" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Created by</a> <a class="" data-toggle="collapse" href="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">Participants</a> </div> </div> <div class="row row_pad"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> <div class="col-sm-3 col-lg-2"> <label>Created by</label> </div> <div class="col-sm-7 col-lg-8"> <select multiple="" class="select2" data-placeholder="Click to Choose..."> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> </select> </div> </div> </div> </div> <div class="row row_pad"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> <div class="col-sm-3 col-lg-2"> <label>Participants</label> </div> <div class="col-sm-7 col-lg-8"> <select multiple="" class="form-control select2" data-placeholder="Click to Choose..."> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> </select> </div> </div> </div> </div> <div class="row row_pad"> <div class="col-sm-3 col-lg-2"> <label>Deadline</label> </div> <div class="col-sm-4 col-lg-5"> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> <link href="css/editor.css" type="text/css" rel="stylesheet"/> <script src="js/editor.js"></script> <script> $(document).ready(function() { $("#txtEditor").Editor(); }); </script> <style> .middle_work { padding-top:20px; padding-bottom:20px; } .task-info-head { border-bottom: 1px solid #edeef0; padding-bottom: 15px; } .task-info-checkbox { float:right; } .task-info-text { overflow:hidden; } .task-info-text > .form-control { width: 100%; height: 32px; border: 1px solid transparent; outline: 0; font-size: 25px; box-shadow: initial; } .task-info-button p a { font-size: 16px; color: #898989; margin-right: 15px; cursor: pointer; } .task-info-button p a:hover { color: #000; text-decoration:none; } .task-info-button { border-bottom: 1px solid #edeef0; margin-bottom: 15px; } .task-info-link a { color:#898989; padding:0px 10px; } .task-info-link a:hover { color:#000; text-decoration:none; } .select2-container--default .select2-selection--multiple { { border-radius: initial !important; } </style> <style> #menuBarDiv_txtEditor { display:none; } #statusbar_txtEditor { display:none; } .a_click { float: right; font-weight:bold; color:#898989; font-size:17px; cursor: pointer; } .a_click:hover { color:#000; } .row_pad { padding:10px 0px; } .select2-container { width:100% !important; } .task-info-link { background:#F0F5F9; padding:0px 10px; } .task-info-button { padding-top:10px; } .select2-container .select2-search--inline .select2-search__field { { margin-top: 0px !important; } input[type="search"] { margin-bottom: 0px !important; } </style> <script> $(document).ready(function(){ $(".a_click").click(function(){ $("#menuBarDiv_txtEditor").toggle(); }); }); </script> <link rel="stylesheet" href="css/dropzone.min.css" /> <script src="js/dropzone.min.js"></script> <script type="text/javascript"> jQuery(function($){ try { Dropzone.autoDiscover = false; var myDropzone = new Dropzone('#dropzone', { previewTemplate: $('#preview-template').html(), thumbnailHeight: 120, thumbnailWidth: 120, maxFilesize: 0.5, //addRemoveLinks : true, //dictRemoveFile: 'Remove', dictDefaultMessage : '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \ <span class="smaller-80 grey">(or click)</span> <br /> \ <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>' , thumbnail: function(file, dataUrl) { if (file.previewElement) { $(file.previewElement).removeClass("dz-file-preview"); var images = $(file.previewElement).find("[data-dz-thumbnail]").each(function() { var thumbnailElement = this; thumbnailElement.alt = file.name; thumbnailElement.src = dataUrl; }); setTimeout(function() { $(file.previewElement).addClass("dz-image-preview"); }, 1); } } }); //simulating upload progress var minSteps = 6, maxSteps = 60, timeBetweenSteps = 100, bytesPerStep = 100000; myDropzone.uploadFiles = function(files) { var self = this; for (var i = 0; i < files.length; i++) { var file = files[i]; totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep))); for (var step = 0; step < totalSteps; step++) { var duration = timeBetweenSteps * (step + 1); setTimeout(function(file, totalSteps, step) { return function() { file.upload = { progress: 100 * (step + 1) / totalSteps, total: file.size, bytesSent: (step + 1) * file.size / totalSteps }; self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent); if (file.upload.progress == 100) { file.status = Dropzone.SUCCESS; self.emit("success", file, 'success', null); self.emit("complete", file); self.processQueue(); } }; }(file, totalSteps, step), duration); } } } //remove dropzone instance when leaving this page in ajax mode $(document).one('ajaxloadstart.page', function(e) { try { myDropzone.destroy(); } catch(e) {} }); } catch(e) { alert('Dropzone.js does not support older browsers!'); } }); </script> <!------------------------ select ------------------> <link rel="stylesheet" href="css/bootstrap-duallistbox.min.css" /> <link rel="stylesheet" href="css/bootstrap-multiselect.min.css" /> <link rel="stylesheet" href="css/select2.min.css" /> <script src="js/jquery.bootstrap-duallistbox.min.js"></script> <script src="js/jquery.raty.min.js"></script> <script src="js/select2.min.js"></script> <script type="text/javascript"> jQuery(function($){ var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>'}); var container1 = demo1.bootstrapDualListbox('getContainer'); container1.find('.btn').addClass('btn-white btn-info btn-bold'); /**var setRatingColors = function() { $(this).find('.star-on-png,.star-half-png').addClass('orange2').removeClass('grey'); $(this).find('.star-off-png').removeClass('orange2').addClass('grey'); }*/ $('.rating').raty({ 'cancel' : true, 'half': true, 'starType' : 'i' /**, 'click': function() { setRatingColors.call(this); }, 'mouseover': function() { setRatingColors.call(this); }, 'mouseout': function() { setRatingColors.call(this); }*/ })//.find('i:not(.star-raty)').addClass('grey'); ////////////////// //select2 $('.select2').css('width','200px').select2({allowClear:true}) $('#select2-multiple-style .btn').on('click', function(e){ var target = $(this).find('input[type=radio]'); var which = parseInt(target.val()); if(which == 2) $('.select2').addClass('tag-input-style'); else $('.select2').removeClass('tag-input-style'); }); ////////////////// $('.multiselect').multiselect({ enableFiltering: true, enableHTML: true, buttonClass: 'btn btn-white btn-primary', templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="fa fa-caret-down"></b></button>', ul: '<ul class="multiselect-container dropdown-menu"></ul>', filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>', filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>', li: '<li><a tabindex="0"><label></label></a></li>', divider: '<li class="multiselect-item divider"></li>', liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>' } }); /////////////////// //typeahead.js //example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/ var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { // the typeahead jQuery plugin expects suggestions to a // JavaScript object, refer to typeahead docs for more info matches.push({ value: str }); } }); cb(matches); } } $('input.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', displayKey: 'value', source: substringMatcher(ace.vars['US_STATES']), limit: 10 }); /////////////// //in ajax mode, remove remaining elements before leaving page $(document).one('ajaxloadstart.page', function(e) { $('[class*=select2]').remove(); $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox('destroy'); $('.rating').raty('destroy'); $('.multiselect').multiselect('destroy'); }); }); </script>