Creating Video Code Generator

<script src="//cdn.ckeditor.com/4.15.1/basic/ckeditor.js"></script>
<script>
function setPostBody(){
  var DEVobj = getFormData();
  var postBody = '';
  
  if(DEVobj.videoType=='youtube')
    postBody = '<a><img border="0" src="https://i.ytimg.com/vi/'+DEVobj.videoID+'/mqdefault.jpg" /></a>';

  postBody += '<div class=" __video-id__" data-id="'+DEVobj.videoType+'{'+DEVobj.videoID+'}"></div>';

  var pl =(DEVobj.playlist) ? 'pl':'';
  if(pl)
    postBody += '<div class="__playlist__" data-pl="'+pl+'['+DEVobj.title+']"></div>';
  else
     postBody += '<div class="__playlist__" data-pl=""></div>';
  postBody += '<div class="__description__">'+DEVobj.description+'</div>';
  
  return postBody;
}

function getFormData() {
  var DEVobj = {}; 
  
  DEVobj.videoID = document.forms["DEVForm"]["Video-ID"].value;
  DEVobj.videoType = $("input:radio[name=option]:checked").val();
  DEVobj.playlist = document.forms["DEVForm"]["Playlist"].checked;
  DEVobj.title= document.forms["DEVForm"]["Title"].value;
  DEVobj.description = CKEDITOR.instances.Description.getData();

  return DEVobj;
}

function getValue(){
  var value = document.forms["DEVForm"]["Playlist"].checked;
  if(value ){
    document.forms["DEVForm"]["Title"].disabled = false;
  }
  else{
    document.forms["DEVForm"]["Title"].disabled = true;
  }
}

function postGenerator(){
 $('#gen-code').html(setPostBody());
}

</script><br />
<div id="main-wrapper"><form name="DEVForm" onsubmit="postGenerator();"  target="formDestination"><table><tr> <td class="content-title">ប្រភេទ​វីដេអូ:</td> <td><br />
<input type="radio" name="option" value="youtube" checked> YouTube<br />
<input type="radio" name="option" value="ytpl" > YouTube Playlist<br />
<input type="radio" name="option" value="facebookvid"> Facebook<br />
<input type="radio" name="option" value="googledrive"> Goolge Drive<br />
<input type="radio" name="option" value="dailymotion"> Dailymotion<br />
<input type="radio" name="option" value="vikivid"> Viki<br />
<input type="radio" name="option" value="vimeo"> Vimeo<br />
<input type="radio" name="option" value="ok"> OK<br />
<input type="radio" name="option" value="fembed"> Fembed<br />
<input type="radio" name="option" value="mangovid"> Stream Mango<br />
</td> </tr>
<tr> <td class="content-title">អត្តសញ្ញាណ​វីដេអូ:</td><td><input type="text" name="Video-ID" size="30" required></td> </tr>
<tr> <td class="content-title">បង្កើតភាគ:</td><td><input type="checkbox" name="Playlist" onclick="getValue()"> ចុច​ជ្រើស​រើស​យកដើម្បីបង្កើត​ឬ​បន្ថែម​វីដេអូ​មាន​ច្រើន​ភាគ</td> </tr>
<tr> <td class="content-title">ចំណង​ជើង​:</td><td><input disabled type="text" name="Title" size="30" ></td> </tr>
</table><br />
<div class="content-title">សេចក្តី​អធីប្បាយ​:</div><textarea name="Description" class="CKEditor" rows="10" cols="80"></textarea>
<input style="font:14px OdorMeanChey;padding:5px 10px;margin-top:10px;" type="submit" value="បង្កើតឯកសារវីដេអូ" />    <br />
<iframe name="formDestination" style="visibility: hidden;height:0px"></iframe><br />
</form></div>
<script> 
CKEDITOR.replace( 'Description', {
   width: '100%',     
} );
CKEDITOR.add; 
</script>

ចំលង​កូដ​យក​ទៅ​ចុះ​ផ្សាយៈ
<textarea onclick="this.select();" id="gen-code" cols="120" rows="5" style="max-width:100%; height:"></textarea>

<style>
 #gen-code {
    box-sizing: border-box;
    width: 100%;
   	padding: 20px;
}
</style>

GitHub: "https://github.com/Sokhavuth/newspaper
Heroku: https://khmerweb-newspaper.herokuapp.com/

Comments

Popular posts from this blog