Skip to content

Commit ff40534

Browse files
Oleg GribWeiwu Zhang
Oleg Grib
authored and
Weiwu Zhang
committed
added upload/download XML and filters
1 parent b76b3eb commit ff40534

File tree

7 files changed

+1035
-365
lines changed

7 files changed

+1035
-365
lines changed

‎bootstrap-js/active-negotiation.html‎

Lines changed: 169 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="no-js">
33
<head>
44
<meta charset="UTF-8"/>
5-
<link rel="tokenscript" href="EntryToken.xml"/>
5+
<!-- <link rel="tokenscript" href="EntryToken.xml"/>-->
66
<link rel="tokenscript" href="BOOKY.xml"/>
77
<!-- since we are demonstrating active negotiation here, there is no meta-data declared in this example
88
-->
99

1010
<title>Showing the cards in a web page</title>
1111
<link rel="stylesheet" href="ts.css">
12-
<script type="text/javascript" src="web3.min.js"></script>
13-
<script type="text/javascript" src="ethers-5.0.umd.min.js"></script>
12+
<script type="text/javascript" src="inc/web3.min.js"></script>
13+
<script type="text/javascript" src="inc/ethers-5.0.umd.min.js"></script>
1414
<script type="text/javascript" src="tokenscript-bootstrap.js"></script>
15+
<script type="text/javascript">(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
1516
<script type="text/javascript">
1617
// the following event is triggered every time when a token is negotiated
1718
// and that is why an event listener is used in place of a promise;
@@ -41,7 +42,11 @@
4142
// OG: I think we can use TokenCard method to re-render iframe, because some logic makes network requests and parse XML (it takes some time and load network). So TokenCard constructor will parse XML and load external data and negotiate() method will rerender iframe
4243
console.log('Btn clicked');
4344
// Negotiator.negotiate('entrytoken', 'l=Syndey');
44-
Negotiator.selectTokenFromList('l=Syndey');
45+
46+
let optionsTextarea = document.getElementById('token_filter');
47+
let filter = optionsTextarea ? optionsTextarea.value : '';
48+
Negotiator.selectTokenFromList(filter);
49+
4550

4651
document.getElementById("enter_button").onclick = (event) => {
4752
console.log('click fired');
@@ -53,7 +58,142 @@
5358
)
5459
*/
5560
};
61+
62+
63+
64+
5665
}
66+
window.addEventListener('load',()=>{
67+
document.getElementById("token_filter_submit").onclick = (event) => {
68+
// console.log('submit fired');
69+
let optionsTextarea = document.getElementById('token_filter');
70+
let filter = optionsTextarea ? optionsTextarea.value : '';
71+
Negotiator.renegotiateAll(filter);
72+
73+
};
74+
document.getElementById("token_url_submit").onclick = async (event) => {
75+
// console.log('submit fired');
76+
let optionsTextarea = document.getElementById('token_filter');
77+
let filter = optionsTextarea ? optionsTextarea.value : '';
78+
79+
let urlNode = document.getElementById('token_url');
80+
let url = urlNode ? urlNode.value : '';
81+
82+
if (url){
83+
let response = await fetch(url);
84+
let fileContent = await response.text();
85+
86+
await Negotiator.parseXMLFromText(fileContent);
87+
}
88+
89+
};
90+
91+
( function ( document, window, index )
92+
{
93+
// feature detection for drag&drop upload
94+
var isAdvancedUpload = function()
95+
{
96+
var div = document.createElement( 'div' );
97+
return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;
98+
}();
99+
100+
101+
// applying the effect for every form
102+
var forms = document.querySelectorAll( '#upload_box' );
103+
Array.prototype.forEach.call( forms, function( form )
104+
{
105+
var input = form.querySelector( 'input[type="file"]' ),
106+
label = form.querySelector( 'label' ),
107+
errorMsg = form.querySelector( '.box__error span' ),
108+
restart = form.querySelectorAll( '.box__restart' ),
109+
droppedFiles = false,
110+
showFiles = function( files )
111+
{
112+
label.textContent = files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
113+
},
114+
triggerFormSubmit = function()
115+
{
116+
var event = document.createEvent( 'HTMLEvents' );
117+
event.initEvent( 'submit', true, false );
118+
form.dispatchEvent( event );
119+
};
120+
121+
// letting the server side to know we are going to make an Ajax request
122+
var ajaxFlag = document.createElement( 'input' );
123+
ajaxFlag.setAttribute( 'type', 'hidden' );
124+
ajaxFlag.setAttribute( 'name', 'ajax' );
125+
ajaxFlag.setAttribute( 'value', 1 );
126+
form.appendChild( ajaxFlag );
127+
128+
// automatically submit the form on file select
129+
input.addEventListener( 'change', function( e )
130+
{
131+
showFiles( e.target.files );
132+
133+
134+
});
135+
136+
// drag&drop files if the feature is available
137+
if( isAdvancedUpload )
138+
{
139+
form.classList.add( 'has-advanced-upload' ); // letting the CSS part to know drag&drop is supported by the browser
140+
141+
[ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( function( event )
142+
{
143+
form.addEventListener( event, function( e )
144+
{
145+
// preventing the unwanted behaviours
146+
e.preventDefault();
147+
e.stopPropagation();
148+
});
149+
});
150+
[ 'dragover', 'dragenter' ].forEach( function( event )
151+
{
152+
form.addEventListener( event, function()
153+
{
154+
form.classList.add( 'is-dragover' );
155+
});
156+
});
157+
[ 'dragleave', 'dragend', 'drop' ].forEach( function( event )
158+
{
159+
form.addEventListener( event, function()
160+
{
161+
form.classList.remove( 'is-dragover' );
162+
});
163+
});
164+
form.addEventListener( 'drop', function( e )
165+
{
166+
droppedFiles = e.dataTransfer.files; // the files that were dropped
167+
showFiles( droppedFiles );
168+
Object.keys(droppedFiles).forEach(async key=>{
169+
let file = droppedFiles[key];
170+
const fileContent = await file.text();
171+
// console.log(fileContent);
172+
await Negotiator.parseXMLFromText(fileContent);
173+
})
174+
});
175+
}
176+
177+
178+
// restart the form if has a state of error/success
179+
Array.prototype.forEach.call( restart, function( entry )
180+
{
181+
entry.addEventListener( 'click', function( e )
182+
{
183+
e.preventDefault();
184+
form.classList.remove( 'is-error', 'is-success' );
185+
input.click();
186+
});
187+
});
188+
189+
// Firefox focus bug fix for file input
190+
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
191+
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
192+
193+
});
194+
}( document, window, 0 ));
195+
})
196+
57197

58198
</script>
59199
</head>
@@ -64,5 +204,29 @@ <h2>Token Card</h2>
64204
<p><button id="enter_button">Enter</button></p>
65205
<p><button id="new_token" onclick="negotiate()">
66206
Click here to start choosing a token</button></p>
207+
208+
<form class="box" id="upload_box" method="post" action="" enctype="multipart/form-data">
209+
<div class="box__input">
210+
<svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43"><path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z" /></svg>
211+
<input type="file" name="files[]" id="file" class="box__file" data-multiple-caption="{count} files selected" multiple />
212+
<label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
213+
</div>
214+
<div class="box__uploading">Uploading&hellip;</div>
215+
<div class="box__success">Done! <a href="" class="box__restart" role="button">Upload more?</a></div>
216+
<div class="box__error">Error! <span></span>. <a href="https://css-tricks.com/examples/DragAndDropFileUploading//?submit-on-demand" class="box__restart" role="button">Try again!</a></div>
217+
</form>
218+
219+
<div class="remote-download-box box">
220+
<h4>You can add token filter string here</h4>
221+
<input id="token_url" type="text">
222+
<div class="submit_btn" id="token_url_submit">Download remote token</div>
223+
</div>
224+
225+
<div class="options-box box">
226+
<h4>You can add token filter string here</h4>
227+
<textarea id="token_filter" placeholder="example: (&(!(price<=4444))(|(locality=Jensen)(locality=Sydney)(locality=Babs J*)((locality=Sy*))))"></textarea>
228+
<div class="submit_btn" id="token_filter_submit">Renegotiate All tokens with current filter</div>
229+
</div>
230+
67231
</body>
68232
</html>

bootstrap-js/ethers-5.0.umd.min.js renamed to bootstrap-js/inc/ethers-5.0.umd.min.js

File renamed without changes.

bootstrap-js/web3.min.js renamed to bootstrap-js/inc/web3.min.js

File renamed without changes.

‎bootstrap-js/passive-negotiation.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,19 @@
88
<!-- this is for token negotiation! -->
99
<!-- OG: meta tag allow only "scheme,name,http-equiv,content,charset". we can use "name,content" to stay document valid-->
1010
<!-- <meta name="token" content="entry-token"/>-->
11-
<!-- <meta name="token.filter" content="objectClass=entrytoken"/>-->
12-
<meta name="token.filter" content="objectClass=booky"/>
11+
<meta name="token.filter" content="objectClass=entrytoken"/>
12+
<!-- <meta name="token.filter" content="objectClass=booky"/>-->
1313
<!-- <meta name="token-expiry" content=">=2018-04-04"/>-->
1414
<!-- if without linked TokenScript, consider a synax like this
1515
<meta tokens-accepted="ethereum:1/0x63cCEF733a093E5Bd773b41C96D3eCE361464942/"/>
1616
-->
1717
<title>Showing the cards in a web page</title>
1818
<link rel="stylesheet" href="ts.css">
19-
<script type="text/javascript" src="web3.min.js"></script>
20-
<script type="text/javascript" src="ethers-5.0.umd.min.js"></script>
21-
<script type="text/javascript" src="tokenscript-bootstrap.js"></script>
19+
<script type="text/javascript" src="inc/web3.min.js"></script>
20+
<!-- <script type="text/javascript" src="inc/require.js"></script>-->
21+
<script type="text/javascript" src="inc/ethers-5.0.umd.min.js"></script>
22+
<!-- <script type="module" src="tokenscript-bootstrap.js" ></script>-->
23+
<script type="text/javascript" src="tokenscript-bootstrap.js" ></script>
2224
<script type="text/javascript">
2325
// the following event is triggered every time when a token is negotiated
2426
// and that is why an event listener is used in place of a promise;

0 commit comments

Comments
 (0)