ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / keebchat.com / themes / default / apps / main

<div class="right-sb-container sidebar" id="right-sb-container" data-app="right-sidebar">
	<div class="sidebar__inner">
		<div class="main-search-bar-container">
			<form class="form" id="vue-main-search-app" v-on:submit="search_onsubmit" autocomplete="off">
				<div class="input-holder">	
					<input v-model="search_query" v-on:input="search" type="text" class="form-control" placeholder="<?php echo cl_translate("Search for people, hashtags.."); ?>">
					<a href="#">
						<?php echo cl_ikon('search'); ?>
					</a>
					<span class="spinner-icon" v-if="searching">
						<?php echo cl_ikon('spinner-icon'); ?>
					</span>
					<span v-on:click="cancel" class="clear-result" v-else-if="search_result">
						<?php echo cl_ikon('close'); ?>
					</span>
				</div>
				<div class="search-result-holder" v-show="search_result">
					<div class="search-result-body">
						<ul class="result-list" data-an="result"></ul>
					</div>
					<div class="search-result-footer" v-bind:class="{'disabled': (advanced_search != true) }">
						<a v-bind:href="search_page_url" data-spa="true">
							<?php echo cl_translate('Advanced search'); ?>
						</a>
					</div>
				</div>
			</form>
		</div>
		<div class="topical-posts">
			<div class="topical-posts__header">
				<h4>
					<?php echo cl_translate("Hot topics for you"); ?>
				</h4>
			</div>
			<?php if (not_empty($cl['hot_topics'])): ?>
				<div class="topical-posts__body">
					<?php foreach ($cl['hot_topics'] as $row): ?>
						<div class="topical-posts__item">
							<a class="htag" href="<?php echo($row['url']); ?>" data-spa="true">
								<b>#</b>
								
								<strong>
									<?php echo($row['tag']); ?>
								</strong>
								
								<span>(<?php echo($row['total']); ?> <?php echo cl_translate("Posts"); ?>)</span>
							</a>
						</div>
					<?php endforeach; ?>
				</div>
				<div class="topical-posts__footer">
					<a href="<?php echo cl_link("trending"); ?>" data-spa="true">
						<?php echo cl_translate("Show more"); ?>
					</a>
				</div>
			<?php else: ?>
				<div class="topical-posts__placeholder">
					<?php echo cl_translate("Here will be a (#hashtag) list of the most relevant topics and events"); ?>
				</div>
			<?php endif; ?>
		</div>
		<?php echo cl_template('main/footer'); ?>
		<?php if (not_empty($cl["gads_vert"])): ?>
			<div class="cl-google-ads">
				<?php echo $cl["gads_vert"]; ?>
			</div>
		<?php endif; ?>
	</div>
</div>

<script>
	new Vue({
		el: "#vue-main-search-app",
		data: {
			searching: false,
			search_query: "",
			advanced_search: false,
			search_result: false
		},
		computed: {
			search_page_url: function() {
				if (this.search_query.length > 2) {
					var search_htags_url = "<?php echo cl_link("search/htags?q={0}"); ?>";
					var search_users_url = "<?php echo cl_link("search/people?q={0}"); ?>";
					this.advanced_search = true;

if (this.search_query.charAt(0) == '#') {
						return search_htags_url.format(this.search_query.replace('#',''));
					}
					else {
						return search_users_url.format(this.search_query);
					}
				}
				else {

this.advanced_search = false;

return "javascript:void(0);";
				}
			},
			query_type: function() {
				if (this.search_query.charAt(0) == '#') {
					return 'htags';
				}

else {
					return 'users';
				}
			}
		},
		methods: {
			search_onsubmit: function(e = false) {
				e.preventDefault();

this.search();
			},
			search: function() {
				if (this.search_query.length > 2) {
					var _app_ = this;
					delay(function() {
						$.ajax({
							url: '<?php echo cl_link("native_api/main/search"); ?>',
							type: 'GET',
							dataType: 'json',
							data: {
								query: _app_.search_query.replace('#',''),
								type: _app_.query_type
							},
							beforeSend: function() {
								_app_.searching = true;
							}
						}).done(function(data) {
							if (data.status == 200) {
								_app_.search_result = true;
								$(_app_.$el).find('[data-an="result"]').html($(data.html));
							}
							else {
								$(_app_.$el).find('[data-an="result"]').empty('');
								_app_.search_result = false;
							}
						}).always(function() {
							_app_.searching = false;
						});
					}, 800);
				}
			},
			cancel: function() {
				var _app_             = this;
				_app_.searching       = false;
				_app_.search_query    = "";
				_app_.advanced_search = false;
				_app_.search_result   = false;
				
				$(_app_.$el).find('[data-an="result"]').empty('');
			}
		}
	});
</script>

[+] includes
[-] footer.phtml [edit]
[+] ..
[-] left_sidebar_guest.phtml [edit]
[-] content.phtml [edit]
[-] right_sidebar.phtml [edit]
[+] modals
[-] footer_mobile.phtml [edit]
[-] left_sidebar.phtml [edit]
[-] bottom_navbar.phtml [edit]
[+] scripts