Alfa

In this example below you will see how to do a Alfa with some HTML / CSS and Javascript

Stabil versiyon. Ancak henüz JSOOP edilmedi. Fork edilip JSOOP yazılacak. Sonra devam edilecek

Thumbnail
This awesome code was written by suatatan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright suatatan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Alfa</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <body>
    <header>
      <div id="logo">
      <img src="https://www.notesuat.appspot.com/img/notesuat-logo.jpg">  
      </div>     
      
      <div class="toptoolbar">
        Hello {{name}} Logout
        | Settings
      </div>
      
      <div class="searchpanel">
          <form>
            <input type="text" id="query"  list="oldqueries" placeholder="Search Term"/>
            <input  id="clearquery" type="button" value="Clear"/>
            <datalist id="oldqueries"> 
            </datalist>
            
            
            <div id="quicktags">
            <span class='quicktag'>#genel</span> | 
            <span class='quicktag'>#işnotlarım </span>| 
            <span class='quicktag'>#seyahat </span>| 
            <span class='quicktag'>#okumanotlarım </span>| 
            <span class='quicktag'>#geçici</span>
              
              
            </div>
            
            <!--notesinfo-->
          <div class="infopanel">
            Infopanel
          </div>
            
          </form>
        </div>
         
      
    </header>
    <div class="frame">
      <div class="panel1">
        <form class="newnote">
        
          <div class="inputbox">
          <input placeholder="New note title" type="text" id="note_title"/>
          <br>
          <textarea id="note_text" placeholder="New Note">
            
          </textarea>
          </div>
          <br>
        <!--May be auto save-->
          <input id="addnote"  type="button" value="Add"/>
        </form>
      </div>
      <div class="panel2">
        
        
          
        
        <div class="notespanel">
        
          <!--*-->
          <div class="note">
            <div class="title">Suat ATAN</div>
            <div class="content">Content</div>
          </div>
          
 
      </div>
      
    </div>
  </body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://tinymce.cachefly.net/4.0/tinymce.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/suatatan/alfa-Aawdp */
body, input, textarea{
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 0.9em;
}
#logo{
  float:left;
}
header{
  margin-bottom: 10px;
  
}
input{
font-weight:bold;
}
/*bone*/
.panel2{
  
  

}
.panel1{
  
 
}

header{
  position: fixed;
  height: 150px;
 
}
.inputbox{
  
 
  background-color: white;
}

#note_text,#note_title{
  border: none;
  width: 100%;

}
#note_text{
  /*tinymce sallamaz*/
  height: 380px;
  border: none;
}

.searchpanel{
  float:left;
  padding-left: 5px;
}
.searchpanel #query {
  width: 70%;
}

.notespanel{

  background-color: white;
  overflow: hidden;
}
.note{
  width: 100%;
  
  margin-top: 1px;
  margin-bottom: 1px;
  border: solid 2px #bdc3c7 ;
  background-color: #ecf0f1
  overflow: hidden;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;

}
*{
  oveflow:hidden;
}


.toptoolbar{
  height: 20px;
  background-color: #ecf0f1;
  margin-bottom: 15px;

}
.infopanel{
  background-color: #ecf0f1;
  width: 100%;
  margin-top:20px;
  
  height:20px;
}
.note>.title{
  font-weight:bold;
}
#note_text{
  height: 140px;
}
.quicktag{
  /*border: 1px solid gray;*/
  padding: 0.5em;
  font-size: 10px;

}
.quicktag:hover{
  background-color: #d35400;
}
#quicktags{
  padding: 1px 0px 1px 0px;
  float:left;
}
/*TinyMce Modern*/
*[class*='mce-'] { -webkit-border-radius: 0!important; -moz-border-radius: 0!important; border-radius: 0!important; }
.mce-throbber { background: #fff; }
.mce-tinymce button, .mce-panel button { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.mce-panel { background: #fff; filter: none; border: 0 solid #fff; }
.mce-in .mce-panel { background: #f3f3f3; border-top: 1px solid #ddd; }
.mce-edit-area { border: 1px solid #ddd!important; }
.mce-btn-group .mce-first, .mce-btn-group .mce-last { border: 0!important; }
.mce-toolbar .mce-btn button { padding-top: 3px; padding-bottom: 3px; }
.mce-toolbar .mce-btn i { color: #555; }
.mce-toolbar .mce-btn: hover i { color: #333; }
.mce-toolbar .mce-btn, .mce-toolbar .mce-btn.mce-disabled { background: none!important; filter: none!important; border: 0; -webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow: none!important; }
.mce-toolbar .mce-btn.mce-disabled { opacity: .4!important; filter: alpha(opacity=40)!important; }
.mce-toolbar .mce-btn.mce-active { background: #eee!important; }
.mce-floatpanel { -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.3); -moz-box-shadow: 0 3px 7px rgba(0,0,0,.3); box-shadow: 0 3px 7px rgba(0,0,0,.3); }
.mce-btn { background: #f0f0f0; }
.mce-btn: hover { background: #e9e9e9; }
.mce-primary { background: #7fba00; }
.mce-primary: hover, .mce-primary: focus { background: #88ca00; }
.mce-primary: active { background: #555; }
.mce-textbox { -webkit-transition: none; transition: none; }
.mce-textbox: focus { border-color: #38add7; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.mce-menu-item: hover, .mce-menu-item.mce-selected, .mce-menu-item: focus { background: #eee; }
.mce-menu-item: hover .mce-text, .mce-menu-item.mce-selected .mce-text { color: #333; }

/*Downloaded from https://www.codeseek.co/suatatan/alfa-Aawdp */
/*Rich text*/
tinymce.init({
  
  selector:'#note_text',
  statusbar: false,
  menubar : false,
  setup: function(ed) {
    ed.on('keyup', function(e) {
        //console.log('Editor contents was modified. Contents: ' + ed.getContent());
        /*autosave function*/
       localStorage.note_text=ed.getContent();
       
    });
  }
});




function ictanitim(){
//note_text tanıtımı
  $("#note_text").html("Notunuz");
  
}
ictanitim();

/*AutoSave Local*/
/*Saves last note title*/
$("#note_title").keyup(function(){
  var note_title=$("#note_title").val();
  localStorage.note_title=note_title;
});
/*Saving of note_text in function init of tinymce*/

/*Reloading autosaved note when starting app*/
$(document).ready(function(){
  if(localStorage.note_title){
    $("#note_title").val(localStorage.note_title);
  }
  if(localStorage.note_text){
    
  }
  //set note css
  
  
  
  
});


/*QuickTag*/
$(".quicktag").click(function(){
  var query=$(this).html();
$(".note").not(":contains('"+query+"')").hide();
  var resultcount=$(".note:visible").length;

  $(".infopanel").html(resultcount+" result found from your query:"+query);
  
  $("#query").val(query);
});


//tinyMCE.get('note_text').setContent('AnyCountryName');
/**Quick Filter-Live Search******************/
$("#query").keyup(function(){
  var query=$(this).val();
  $(".note").not(":contains('"+query+"')").hide();
  var resultcount=$(".note:visible").length;

    $(".infopanel").html(resultcount+" result found from your query:"+query);
  
  /*back silme tusu-firefoxda calismadi #FIXME*/
  if (event.keyCode == 8) {
    $(".note").show();
    var query=$(this).val();
    $(".note").not(":contains('"+query+"')").hide();
    
    $(".notespanel>.info").html(resultcount+" result found");
    
  }
});
$("#clearquery").click(function(){
  $(".note").show();
  /*adding old query to queue*/
  var query=$("#query").val();
 
  /*oldquery creation over datalist*/
  if(localStorage.OLDQUERIES){
    
  }
  else{
      localStorage.OLDQUERIES="<option></option>";
  }
 
  localStorage.OLDQUERIES="<option  value='"+query+"'>"+localStorage.OLDQUERIES;
  
  $("#query").val("");
  $(".notespanel .info").html("All notes are shown");
  
});
/*********************************************/

/*renew oldqueries over datalist*/
$("#query").mouseover(function(){
$("#oldqueries").html(localStorage.OLDQUERIES);
});


/**note-smalltoolbox**/
var notetoolbox="\
             <span class='makered'></span>\
             <span class='delete'>Delete</span>&nbsp; \
             <span class='update'>Update</span>";

$(".note").prepend(notetoolbox);

             
/*addnote*************************************/
$("#addnote").click(function(){
  //first save function
  var note_title=$("#note_title").val();
  var note_text=tinymce.get('note_text').getContent();
  //alert(note_text);
  ///CREATE NOTE
  
  var note_object="<div class='title'>"+note_title+"</div><div class='content'>"+note_text+"</div>";
  var note_capsule="<div class='note'>"+note_object+window.notetoolbox+"</div>";
  $(".notespanel").prepend(note_capsule);
  
});
/*****************************************/


/*delete operation for veteran and new-generated object*/
$(document).on('click', '.delete', function(event) {
     /*hide and remove*/
  $(this).parent(".note").hide("slow", function(){ $target.remove(); });
});

/*Update note*/
$(document).on('click', '.update', function(event) {

  var title=$(this).parent(".note").find(".title").html();
  var content=$(this).parent(".note").find(" .content").html();
  $("#note_title").val(title);
  tinymce.get('note_text').setContent(content);
  
});




//JS USER EXPERIENCE CUSTOMISATION



//FIXED-FIXME jquery on. to new generated object
//FIXME: AUTORECORDING
//DONE-TODO: UPDATE
//FIXME: datalist clicked

Comments