Initial commit: Atomaste website

Atomaste Reference/public_html/wp-content/themes/rara-business/inc/custom-controls/radioimg/class-radio-image-control.php

@@ -0,0 +1,75 @@
+<?php
+/**
+ * Customizer Control: radio-image.
+ *
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! class_exists( 'Rara_Business_Radio_Image_Control' ) ) {
+
+	/**
+	 * Radio Image control (modified radio).
+	 */
+	class Rara_Business_Radio_Image_Control extends WP_Customize_Control {
+
+		public $type = 'radio-image';
+        
+        public $tooltip = '';
+        
+		public function to_json() {
+			parent::to_json();
+			
+            if ( isset( $this->default ) ) {
+				$this->json['default'] = $this->default;
+			} else {
+				$this->json['default'] = $this->setting->default;
+			}
+			
+            $this->json['value']   = $this->value();
+			$this->json['choices'] = $this->choices;
+			$this->json['link']    = $this->get_link();
+            $this->json['id']      = $this->id;
+            $this->json['tooltip'] = $this->tooltip;
+						
+            $this->json['inputAttrs'] = '';
+			foreach ( $this->input_attrs as $attr => $value ) {
+				$this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
+			}
+		}
+        
+        public function enqueue() {            
+            wp_enqueue_style( 'rara-business-radio-image', get_template_directory_uri() . '/inc/custom-controls/radioimg/radio-image.css', null );
+            wp_enqueue_script( 'rara-business-radio-image', get_template_directory_uri() . '/inc/custom-controls/radioimg/radio-image.js', array( 'jquery' ), false, true ); //for radio-image                
+        }
+
+		protected function content_template() {
+			?>
+			<# if ( data.tooltip ) { #>
+				<a href="#" class="tooltip hint--left" data-hint="{{ data.tooltip }}"><span class='dashicons dashicons-info'></span></a>
+			<# } #>
+			<label class="customizer-text">
+				<# if ( data.label ) { #>
+					<span class="customize-control-title">{{{ data.label }}}</span>
+				<# } #>
+				<# if ( data.description ) { #>
+					<span class="description customize-control-description">{{{ data.description }}}</span>
+				<# } #>
+			</label>
+			<div id="input_{{ data.id }}" class="image">
+				<# for ( key in data.choices ) { #>
+					<input {{{ data.inputAttrs }}} class="image-select" type="radio" value="{{ key }}" name="_customize-radio-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}<# if ( data.value === key ) { #> checked="checked"<# } #>>
+						<label for="{{ data.id }}{{ key }}">
+							<img src="{{ data.choices[ key ] }}">
+							<span class="image-clickable"></span>
+						</label>
+					</input>
+				<# } #>
+			</div>
+			<?php
+		}
+	}
+}

Atomaste Reference/public_html/wp-content/themes/rara-business/inc/custom-controls/radioimg/radio-image.css

@@ -0,0 +1,26 @@
+/*Radio Image Button */
+.customize-control-radio-image label {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 10px;
+}
+.customize-control-radio-image input {
+    display: none; 
+}
+.customize-control-radio-image input img {
+    border: 1px solid transparent; 
+}
+.customize-control-radio-image input:checked + label img {
+    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
+    border: 1px solid #3498DB; 
+}
+.customize-control-radio-image input + label .image-clickable {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+}
+/*Radio Image Button Ends */

Atomaste Reference/public_html/wp-content/themes/rara-business/inc/custom-controls/radioimg/radio-image.js

@@ -0,0 +1,16 @@
+wp.customize.controlConstructor['radio-image'] = wp.customize.Control.extend({
+
+	ready: function() {
+
+		'use strict';
+
+		var control = this;
+
+		// Change the value
+		this.container.on( 'click', 'input', function() {
+			control.setting.set( jQuery( this ).val() );
+		});
+
+	}
+
+});