Feature/image search added | User can search images directly from the page/post editor Window.

creativecommons.php

@@ -25,6 +25,7 @@
 require_once CCPLUGIN__DIR . 'includes/class-creativecommons.php';
 require_once CCPLUGIN__DIR . 'widgets/creativecommons-widget.php';
 require CCPLUGIN__DIR . 'includes/class-creativecommons-image.php';
+include CCPLUGIN__DIR . 'includes/image-search-creativecommons.php';
 
 // Instantiate classes.
 CreativeCommons::get_instance()->init();

includes/assets/image-search-script.js

@@ -0,0 +1,69 @@
+
+document.addEventListener("DOMContentLoaded", ccimage_modal);
+
+function loadIframe(){
+	let srcUrl = 'https://ccsearch.creativecommons.org/search?q=';
+	document.getElementById('cc-image-iframe').src=srcUrl;
+
+	//on iframe loaded display loader none;
+	document.getElementById('cc-image-iframe').onload = function(){
+		document.getElementById('cc-image-iframe-loader-gif').style.display = "none";
+	};
+}
+
+function ccimage_modal(){
+
+// Get the modal
+var modal = document.getElementById("CC-Image-Modal");
+
+// Get the button that opens the modal
+var btn = document.getElementById("open-ccimage-modal");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("ccmodal-close")[0];
+
+// When the user clicks the button, open the modal 
+
+
+btn.onclick = function() {
+  modal.style.display = "block";
+
+}
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}
+
+// display api-data in model
+/*let searchBtn = document.getElementById("cc-search-btn");
+searchBtn.onclick = function() {  loadapidata();}
+function loadapidata() {
+
+	let key = document.getElementById("cc-search-key").value;
+
+	fetch('https://api.creativecommons.engineering/v1/images?q='+ key )
+  .then((response) => {
+    return response.json();
+  })
+  .then((data) => {
+	  var childdiv = document.createElement('p');
+    for(i=0; i<=data.results.length;i++){
+		childdiv.innerHTML = data.results[i].title;
+		document.getElementById("cc-api-data").appendChild(childdiv);
+	}
+  });
+
+} */
+
+//load iframe after dom loaded completely
+setTimeout(loadIframe, 2000);
+
+}

includes/assets/image-search-style.css

@@ -0,0 +1,103 @@
+/* The Modal (background) */
+.ccmodal {
+  display: none; 
+  position: fixed; 
+  z-index: 10000000; 
+  padding-top: 0; 
+  padding-bottom: 0;
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: rgb(0,0,0); 
+  background-color: rgba(0,0,0,0.8); 
+}
+
+/* Modal Content */
+.ccmodal-content {
+  background-color: white;
+  margin: auto;
+  padding: 0px;
+  height: 98%;
+  padding-bottom: 0px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+/* The Close Button */
+.ccmodal-close {
+  color: #ff6933;
+  float: right;
+  font-size: 50px;
+  font-weight: bold;
+  position: absolute;
+  right: 11%;
+}
+
+.ccmodal-close:hover,
+.ccmodal-close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* css loader */
+
+@keyframes loader {
+   from {transform: scale(0, 0);}
+   to {transform: scale(1, 1);}
+}
+@-webkit-keyframes loader {
+   from {-webkit-transform: scale(0, 0);}
+   to {-webkit-transform: scale(1, 1);}
+}
+
+.cc-image-iframe-loader-gif {
+   display:inline-block;
+   font-size:0px;
+   padding:0px;
+   left: 50%;
+   top:50%;
+   position: absolute;
+}
+.cc-image-iframe-loader-gif span {
+   vertical-align:middle;
+   border-radius:100%;
+
+   display:inline-block;
+   width:10px;
+   height:10px;
+   margin:3px 2px;
+   -webkit-animation:loader 0.8s linear infinite alternate;
+   animation:loader 0.8s linear infinite alternate;
+}
+.cc-image-iframe-loader-gif span:nth-child(1) {
+   -webkit-animation-delay:-1s;
+   animation-delay:-1s;
+  background:rgba(245, 103, 115,0.6);
+}
+.cc-image-iframe-loader-gif span:nth-child(2) {
+   -webkit-animation-delay:-0.8s;
+   animation-delay:-0.8s;
+  background:rgba(245, 103, 115,0.8);
+}
+.cc-image-iframe-loader-gif span:nth-child(3) {
+   -webkit-animation-delay:-0.26666s;
+   animation-delay:-0.26666s;
+  background:rgba(245, 103, 115,1);
+}
+.cc-image-iframe-loader-gif span:nth-child(4) {
+   -webkit-animation-delay:-0.8s;
+   animation-delay:-0.8s;
+  background:rgba(245, 103, 115,0.8);
+
+}
+.cc-image-iframe-loader-gif span:nth-child(5) {
+   -webkit-animation-delay:-1s;
+   animation-delay:-1s;
+  background:rgba(245, 103, 115,0.4);
+}
+
+

includes/image-search-creativecommons.php

@@ -0,0 +1,57 @@
+<?php
+defined('ABSPATH') || exit;
+define('CCPLUGIN_URI', plugin_dir_url(__FILE__));
+
+//add a image search button to the window
+function ccimage_add_button($editor_id)
+{
+    echo ' <a href="#cc-image-modal" id="open-ccimage-modal" data-editor="' . $editor_id . '" class="cc-image-btn wp-core-ui button" title="Insert CC license Image">Insert CC license Image</a>';
+}
+add_action('media_buttons', 'ccimage_add_button');
+
+//enqueue script and stylesheet for button and modal window
+function ccimage_load_scripts()
+{
+    wp_enqueue_script('ccimagescript', CCPLUGIN_URI . '/assets/image-search-script.js', array(), false, false);
+    wp_enqueue_style('ccimagestyle', CCPLUGIN_URI . '/assets/image-search-style.css');
+
+}
+
+add_action('admin_enqueue_scripts', 'ccimage_load_scripts');
+
+
+//modal window to show iframe content on button click
+
+function ccimage_modal_content()
+{
+    ?>
+
+		<!-- The Modal -->
+		<div id="CC-Image-Modal" class="ccmodal">
+
+		  <!-- Modal content -->
+		  <div class="ccmodal-content">
+			<span class="ccmodal-close">&times;</span>
+			<div class="cc-image-iframe-loader-gif" id="cc-image-iframe-loader-gif">
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>	
+			<iframe src="" id="cc-image-iframe" style="border:0px # none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="98%" width="100%" allowfullscreen></iframe>
+			<!-- <input type="text" name="key" id="cc-search-key" placeholder="your search query"></input>
+			<button name="cc-search" id="cc-search-btn">Search</button> -->
+
+			<!-- class to display api data 
+			<div id="cc-api-data" class="cc-api-data"> -->
+
+			</div>
+		</div>
+
+
+		</div>
+
+		<?php
+}
+add_action( 'admin_footer', 'ccimage_modal_content' );