diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css index 2793e4ac11871ed2816a20ea8df5d48ecaa8e58d..92a45e4a3fcd897159632416b79330a65a7ebd43 100644 --- a/capsule-prototype/css/online-theme.css +++ b/capsule-prototype/css/online-theme.css @@ -7,6 +7,7 @@ :root { --tab_selector_height: 30px; --rk-light-blue: #559299; + --rk-greyblue: #243538; } .flex-col, .flex-row, .flex-center, .flex { display: flex; } diff --git a/capsule-prototype/css/popup.css b/capsule-prototype/css/popup.css index 8dc528e120ffd1579efbee467872d398e362e2aa..f669cf37fbdaf14e51e6052fe305b19eb2e2aade 100644 --- a/capsule-prototype/css/popup.css +++ b/capsule-prototype/css/popup.css @@ -25,7 +25,7 @@ font-weight: 400; font-size: 1vw; display: inline-block; text-align: center; -background: #243538; +background: var(--rk-greyblue); } */ #popupSettings { @@ -36,7 +36,7 @@ background: #243538; font-size: 1vw; display: inline-block; text-align: left; - background: #243538; + background: var(--rk-greyblue); } #popupSettingsLeft { @@ -197,7 +197,7 @@ background: #243538; text-align: center; } -.popupAlertButton, .popupAddLinkButton, .popupSettingsButton { +.popupAlertButton, .popupAddLinkButton, .popupSettingsButton, #paste_modal button { width: 9vw; font-weight: 400; @@ -246,7 +246,7 @@ font-weight: 400; font-size: 1vw; display: inline-block; text-align: center; -background: #243538; +background: var(--rk-greyblue); /*background-image: -webkit-linear-gradient(right bottom, rgb(20,46,51) 0%, #475457 150%); /*box-shadow: 0px 0px 2px 3px rgba(255,255,255,.1) inset; */ @@ -291,7 +291,7 @@ background: #243538; font-size: 1vw; display: inline-block; text-align: left; - background: #243538; + background: var(--rk-greyblue); } #popupLeft { @@ -712,3 +712,30 @@ color: rgba(255,255,255,.75); /*#FFF; */ } } +#paste_modal { + display: flex; + text-align: center; + align-items: center; + flex-direction: column; + position: absolute; + margin: 10%; + width: 60%; + min-width: 400px; + height: 60%; + min-height: 300px; + background-color: var(--rk-greyblue); + z-index: 50; + + display: none; +} + +#paste_modal div { + width: 80%; + height: 80%; + min-height: 100px; +} + +#paste_modal img { + height: 80%; + width: auto; +} diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html index acdd48571737bcbdc4247225a7af438bb9a73928..974086f6dbc2547515e33cd97988e0c229d5224d 100644 --- a/capsule-prototype/index.html +++ b/capsule-prototype/index.html @@ -195,6 +195,13 @@ <input type="file" name="fileToUpload[]" multiple="multiple" id="left_menu_item_btn_addfile"> </form> + <div id="paste_modal" contenteditable="true"> + <h1>Paste your file here</h1> + <div id='paste_modal_content'></div> + <button class='validate' disabled>validate</button> + <button class='cancel'>cancel/close</button> + </div> + <div id='left_menu' class='flex-col editmode'> <div class='top'> <a class="left_menu_item dropable" href="javascript:window.app.rekall.Rekall('openUrl', window.app.urls.memberHome)"> @@ -219,6 +226,10 @@ <div class="left_menu_item_icn" id="left_menu_item_icn_addnote"></div> <div class="left_menu_item_title">Add Note</div> </div> + <div class="left_menu_item dropable" id="left_menu_item_pastefile" title="PasteFile"> + <div class="left_menu_item_icn" id="left_menu_item_icn_pastefile"></div> + <div class="left_menu_item_title">Paste File</div> + </div> <div class="left_menu_item dropable" id="left_menu_item_addfile" title="AddFile"> <div class="left_menu_item_icn" id="left_menu_item_icn_addfile"></div> <div class="left_menu_item_title">Add File</div> diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 710b59551216bcca234155e95fb234c5f7250318..847e237bbc7cfd3d538beede6d8e15909e3525b6 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -6,6 +6,7 @@ window.onload = function() { pubSub = window.top.PubSub; pubSub.subscribe('mosaic', openMosaic); pubSub.subscribe('video', openVideo); + pubSub.subscribe('paste_modal', togglePasteModal); }; $(document).ready(function() { @@ -325,6 +326,33 @@ function setEditionControls() { uploadFiles($("#left_menu_item_btn_addfile").get(0).files); }); + $("#left_menu_item_pastefile").click(function(event) { pubSub.publish('paste_modal'); }); + $("#paste_modal button.cancel").click(function(event) { pubSub.publish('paste_modal'); }); + + $("#paste_modal_content").on("paste", function(event) { + setTimeout(function() { + var img = $("#paste_modal img"); + if (img.length === 1) { + $("#paste_modal button.validate")[0].attributes.removeNamedItem('disabled'); + } + }); + }); + + $("#paste_modal button.validate").click(function(event) { + var b64img = $("#paste_modal img")[0].src; + var data = b64img.match(/data:([a-z]+)\/([a-z]+);base64,(.*)/); + var type = data[1], subtype = data[2], b64data = data[3]; + var bin_str = atob(b64data); + var n = b64data.length; + var uar = new Uint8Array(n); + while (n--) uar[n] = bin_str.charCodeAt(n); + var file = new File([uar], 'pasted_' + Math.floor(random()*100) + '.' + subtype, {type: type+'/'+subtype}); + $('#left_menu_item_btn_addfile').files += file; + uploadFiles([file]); + pubSub.publish('paste_modal'); + $("#paste_modal button.validate")[0].attributes += 'disabled'; + }); + $("#left_menu_item_addlink").click(function(event){ event.stopPropagation(); rekall.timeline.pause(); @@ -1277,3 +1305,5 @@ $(window).resize(function(e) { } }); $(window).trigger("resize"); + +function togglePasteModal() { $('#paste_modal').toggle(); }