Added notepad behaviour

afzalex · Nov 26, 2022 · 3ce7b12 · 3ce7b12
1 parent af10707
commit 3ce7b12
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 20 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -43,12 +43,12 @@ <h2 class="col-xs-12 text-center">
  </h2>
  </div> -->
  <div class="row">
- <div class="col-xs-12 col-sm-6 col-md-6 col-lg-8 header-left">
+ <div class="col-xs-12 col-sm-6 col-md-6 col-lg-7 header-left">
  <h1><a href="/contact/" style="color: inherit">Mohammad Afzal</a></h1>
  <h2>Product Development Engineer in Calibo</h2>
  <h4 class="download no-print"><a href="https://raw.githubusercontent.com/afzalex/about/fzbot/docs/assets/resume.pdf"><strong>Download Resume</strong></a></h4>
  </div>
- <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 header-right">
+ <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5 header-right">
  <ul class="icons no-print">
  <li>
  <a target="_blank" href="https://www.linkedin.com/in/afzalex/"
@@ -95,7 +95,9 @@ <h4 class="download no-print"><a href="https://raw.githubusercontent.com/afzalex
  Phone : (+91) 7222876247 | (+91) 6350382083
  </p>
  <p>
- Website : <a href="https://afzalex.com">https://afzalex.com</a> | <a href="https://technotes.afzalex.com">Technotes</a>
+ Website : <a href="https://afzalex.com">https://afzalex.com</a> | 
+ <a href="https://technotes.afzalex.com">Technotes</a> | 
+ <a href="./notepad">Notepad</a>
  </p>
  </div>
  </div>

diff --git a/docs/notepad/index.html b/docs/notepad/index.html
@@ -150,12 +150,14 @@
 
 <body>
 
- <div class="container cover-header-contianer">
+ <div class="container cover-header-contianer" style="margin-top: 10px;">
 
  <div class="row">
  <div class="col-xs-12 text-center cover-header">
- <h1>FZ Notepad</h1>
- <h4 class="cover-contact"><a href="mailto: [email protected]">[email protected]</a> | (+91) 7222876247</h4>
+ <h1 style="font-size: 3em; float: left;">Notepad</h1>
+ <h4 class="cover-contact" style="text-align: right; font-family: monospace; font-size: 15px;">
+ <a href="mailto: [email protected]" style="font-family: monospace;">[email protected]</a> | (+91) 7222876247
+ </h4>
  <hr>
  </div>
  </div>
@@ -166,12 +168,11 @@ <h4 class="cover-contact"><a href="mailto: [email protected]">[email protected]<
 
  <div class="container">
  <div>
- <div class="cover-para" contenteditable="true">
- I am writing to apply for the position of <span contenteditable="true">Software Developer</span>
- in your organisation. I am a Full Stack Developer in Enbraun, India with an experience of more than 3
- years. I graduated my "Bachelor of Technology" from "Uttarakhand Technical University", India.
- During my graduation I was working as a freelancer, and after that was professionaly working as
- full stack developer.
+ <div class="cover-para" contenteditable="false">
+ <div style="text-align: center;">
+ Wait...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
+ Loading data ...
+ </div>
  </div>
  </div>
  </div>
@@ -187,10 +188,11 @@ <h4 class="cover-contact"><a href="mailto: [email protected]">[email protected]<
 
  gtag('config', 'UA-136552115-1');
  </script>
+ <script src="https://unpkg.com/rxjs@%5E7/dist/bundles/rxjs.umd.js"></script>
  <script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
- import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore-lite.js';
+ import { getFirestore, doc, getDoc, setDoc } from 'https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore-lite.js';
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -211,14 +213,37 @@ <h4 class="cover-contact"><a href="mailto: [email protected]">[email protected]<
  const db = getFirestore(app);
 
 
- // Get a list of cities from your database
- async function getCities(db) {
- const citiesCol = collection(db, 'cities');
- const citySnapshot = await getDocs(citiesCol);
- const cityList = citySnapshot.docs.map(doc => doc.data());
- return cityList;
+ // // Get a list of cities from your database
+ // async function getCities(db) {
+ // const citiesCol = collection(db, 'cities');
+ // const citySnapshot = await getDocs(citiesCol);
+ // const cityList = citySnapshot.docs.map(doc => doc.data());
+ // return cityList;
+ // }
+ // getCities(db);
+
+ const notepad = await getDoc(doc(db, 'notepad', 'main'))
+ const coverParaElem = document.querySelector('.cover-para')
+ if(notepad.exists()) {
+ coverParaElem.setAttribute('contenteditable', true)
+ coverParaElem.innerHTML = notepad.data().content
+ coverParaElem.focus()
+
+ document.execCommand('selectAll', false, null);
+ document.getSelection().collapseToEnd();
+
+ rxjs.fromEvent(coverParaElem, 'input')
+ .pipe(rxjs.debounceTime(2500))
+ .subscribe(e => {
+ setDoc(doc(db, 'notepad', 'main'), {
+ content: coverParaElem.innerHTML
+ }).then(e => {
+ console.log(e)
+ })
+ })
+ } else {
+ console.log('Not found anything.')
  }
- getCities(db);
  </script>
 </body>