@extends('admin.partial.template-full') @section('section') <div class="title d-flex justify-content-between align-items-center"> <div> <h3 class="font-weight-bold d-inline-block">Discover Category</h3> <p class="lead mb-0">ID: #{{$category->id}}</p> </div> <div> <a class="btn btn-outline-primary btn-sm py-1" href="{{route('admin.discover')}}">Back</a> </div> </div> <hr> <form class="px-md-5 cc-form" method="post"> <div class="form-group row"> <label for="categoryName" class="col-sm-2 col-form-label font-weight-bold">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="categoryName" placeholder="Nature" autocomplete="off" value="{{$category->name}}"> <p class="form-text small font-weight-bold text-muted">Slug: /discover/c/{{$category->slug}}</p> </div> </div> <div class="form-group row"> <label for="categoryName" class="col-sm-2 col-form-label font-weight-bold">Media ID</label> <div class="col-sm-10"> <input type="text" class="form-control" id="categoryMedia" placeholder="1" autocomplete="off" value="{{$category->media_id}}"> <p class="form-text small font-weight-bold text-muted">Media ID is used for category thumbnail image</p> </div> </div> <div class="form-group row"> <label for="categoryActive" class="col-sm-2 col-form-label font-weight-bold">Active</label> <div class="col-sm-10"> <div class="custom-control custom-switch pt-2"> <input type="checkbox" class="custom-control-input" id="categoryActive" {{$category->active ?'checked=""':''}}> <label class="custom-control-label" for="categoryActive"></label> </div> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label font-weight-bold">Rules</label> <div class="col-sm-10"> <div class="custom-control custom-switch pt-2"> <input type="checkbox" class="custom-control-input" id="categoryNsfw" {{!$category->no_nsfw ?'checked=""':''}}> <label class="custom-control-label" for="categoryNsfw">Allow NSFW</label> </div> <div class="custom-control custom-switch pt-2"> <input type="checkbox" class="custom-control-input" id="categoryType" {{$category->photos_only ?'checked=""':''}}> <label class="custom-control-label" for="categoryType">Photos Only</label> </div> <div class="custom-control custom-switch pt-2"> <input type="checkbox" class="custom-control-input" id="categoryLocal" {{$category->local_only ?'checked=""':''}}> <label class="custom-control-label" for="categoryType">Local Posts Only</label> </div> </div> </div> <hr> <div class="form-group row"> <label for="categoryName" class="col-sm-2 col-form-label font-weight-bold">Hashtags</label> <div class="col-sm-10"> <input type="text" class="form-control" id="categoryTags" data-role="tagsinput" value="{{$category->hashtags()->pluck('slug')->implode(',')}}"> </div> </div> <div class="form-group"> <div class="text-right"> <button type="submit" class="btn btn-primary btn-sm py-1 font-weight-bold">Update</button> </div> </div> </form> @endsection @push('scripts') <script type="text/javascript"> (function($){"use strict";var defaultOptions={tagClass:function(item){return'badge badge-info'},focusClass:'focus',itemValue:function(item){return item?item.toString():item},itemText:function(item){return this.itemValue(item)},itemTitle:function(item){return null},freeInput:!0,addOnBlur:!0,maxTags:undefined,maxChars:undefined,confirmKeys:[13,44],delimiter:',',delimiterRegex:null,cancelConfirmKeysOnEmpty:!1,onTagExists:function(item,$tag){$tag.addClass('sr-only')},trimValue:!1,allowDuplicates:!1,triggerChange:!0};function TagsInput(element,options){this.isInit=!0;this.itemsArray=[];this.$element=$(element);this.$element.addClass('sr-only');this.isSelect=(element.tagName==='SELECT');this.multiple=(this.isSelect&&element.hasAttribute('multiple'));this.objectItems=options&&options.itemValue;this.placeholderText=element.hasAttribute('placeholder')?this.$element.attr('placeholder'):'';this.inputSize=Math.max(1,this.placeholderText.length);this.$container=$('<div class="bootstrap-tagsinput"></div>');this.$input=$('<input type="text" placeholder="'+this.placeholderText+'"/>').appendTo(this.$container);this.$element.before(this.$container);this.build(options);this.isInit=!1} TagsInput.prototype={constructor:TagsInput,add:function(item,dontPushVal,options){var self=this;if(self.options.maxTags&&self.itemsArray.length>=self.options.maxTags) return;if(item!==!1&&!item) return;if(typeof item==="string"&&self.options.trimValue){item=$.trim(item)} if(typeof item==="object"&&!self.objectItems) throw("Can't add objects when itemValue option is not set");if(item.toString().match(/^\s*$/)) return;if(self.isSelect&&!self.multiple&&self.itemsArray.length>0) self.remove(self.itemsArray[0]);if(typeof item==="string"&&this.$element[0].tagName==='INPUT'){var delimiter=(self.options.delimiterRegex)?self.options.delimiterRegex:self.options.delimiter;var items=item.split(delimiter);if(items.length>1){for(var i=0;i<items.length;i++){this.add(items[i],!0)} if(!dontPushVal) self.pushVal(self.options.triggerChange);return}} var itemValue=self.options.itemValue(item),itemText=self.options.itemText(item),tagClass=self.options.tagClass(item),itemTitle=self.options.itemTitle(item);var existing=$.grep(self.itemsArray,function(item){return self.options.itemValue(item)===itemValue})[0];if(existing&&!self.options.allowDuplicates){if(self.options.onTagExists){var $existingTag=$(".badge",self.$container).filter(function(){return $(this).data("item")===existing});self.options.onTagExists(item,$existingTag)} return} if(self.items().toString().length+item.length+1>self.options.maxInputLength) return;var beforeItemAddEvent=$.Event('beforeItemAdd',{item:item,cancel:!1,options:options});self.$element.trigger(beforeItemAddEvent);if(beforeItemAddEvent.cancel) return;self.itemsArray.push(item);var $tag=$('<span class="badge '+htmlEncode(tagClass)+(itemTitle!==null?('" title="'+itemTitle):'')+'">'+htmlEncode(itemText)+'<span data-role="remove"></span></span>');$tag.data('item',item);self.findInputWrapper().before($tag);$tag.after(' ');var optionExists=($('option[value="'+encodeURIComponent(itemValue)+'"]',self.$element).length||$('option[value="'+htmlEncode(itemValue)+'"]',self.$element).length);if(self.isSelect&&!optionExists){var $option=$('<option selected>'+htmlEncode(itemText)+'</option>');$option.data('item',item);$option.attr('value',itemValue);self.$element.append($option)} if(!dontPushVal) self.pushVal(self.options.triggerChange);if(self.options.maxTags===self.itemsArray.length||self.items().toString().length===self.options.maxInputLength) self.$container.addClass('bootstrap-tagsinput-max');if($('.typeahead, .twitter-typeahead',self.$container).length){self.$input.typeahead('val','')} if(this.isInit){self.$element.trigger($.Event('itemAddedOnInit',{item:item,options:options}))}else{self.$element.trigger($.Event('itemAdded',{item:item,options:options}))}},remove:function(item,dontPushVal,options){var self=this;if(self.objectItems){if(typeof item==="object") item=$.grep(self.itemsArray,function(other){return self.options.itemValue(other)==self.options.itemValue(item)});else item=$.grep(self.itemsArray,function(other){return self.options.itemValue(other)==item});item=item[item.length-1]} if(item){var beforeItemRemoveEvent=$.Event('beforeItemRemove',{item:item,cancel:!1,options:options});self.$element.trigger(beforeItemRemoveEvent);if(beforeItemRemoveEvent.cancel) return;$('.badge',self.$container).filter(function(){return $(this).data('item')===item}).remove();$('option',self.$element).filter(function(){return $(this).data('item')===item}).remove();if($.inArray(item,self.itemsArray)!==-1) self.itemsArray.splice($.inArray(item,self.itemsArray),1)} if(!dontPushVal) self.pushVal(self.options.triggerChange);if(self.options.maxTags>self.itemsArray.length) self.$container.removeClass('bootstrap-tagsinput-max');self.$element.trigger($.Event('itemRemoved',{item:item,options:options}))},removeAll:function(){var self=this;$('.badge',self.$container).remove();$('option',self.$element).remove();while(self.itemsArray.length>0) self.itemsArray.pop();self.pushVal(self.options.triggerChange)},refresh:function(){var self=this;$('.badge',self.$container).each(function(){var $tag=$(this),item=$tag.data('item'),itemValue=self.options.itemValue(item),itemText=self.options.itemText(item),tagClass=self.options.tagClass(item);$tag.attr('class',null);$tag.addClass('badge '+htmlEncode(tagClass));$tag.contents().filter(function(){return this.nodeType==3})[0].nodeValue=htmlEncode(itemText);if(self.isSelect){var option=$('option',self.$element).filter(function(){return $(this).data('item')===item});option.attr('value',itemValue)}})},items:function(){return this.itemsArray},pushVal:function(){var self=this,val=$.map(self.items(),function(item){return self.options.itemValue(item).toString()});self.$element.val(val.join(self.options.delimiter));if(self.options.triggerChange) self.$element.trigger('change')},build:function(options){var self=this;self.options=$.extend({},defaultOptions,options);if(self.objectItems) self.options.freeInput=!1;makeOptionItemFunction(self.options,'itemValue');makeOptionItemFunction(self.options,'itemText');makeOptionFunction(self.options,'tagClass');if(self.options.typeahead){var typeahead=self.options.typeahead||{};makeOptionFunction(typeahead,'source');self.$input.typeahead($.extend({},typeahead,{source:function(query,process){function processItems(items){var texts=[];for(var i=0;i<items.length;i++){var text=self.options.itemText(items[i]);map[text]=items[i];texts.push(text)} process(texts)} this.map={};var map=this.map,data=typeahead.source(query);if($.isFunction(data.success)){data.success(processItems)}else if($.isFunction(data.then)){data.then(processItems)}else{$.when(data).then(processItems)}},updater:function(text){self.add(this.map[text]);return this.map[text]},matcher:function(text){return(text.toLowerCase().indexOf(this.query.trim().toLowerCase())!==-1)},sorter:function(texts){return texts.sort()},highlighter:function(text){var regex=new RegExp('('+this.query+')','gi');return text.replace(regex,"<strong>$1</strong>")}}))} if(self.options.typeaheadjs){var typeaheadjs=self.options.typeaheadjs;if(!$.isArray(typeaheadjs)){typeaheadjs=[null,typeaheadjs]} $.fn.typeahead.apply(self.$input,typeaheadjs).on('typeahead:selected',$.proxy(function(obj,datum,name){var index=0;typeaheadjs.some(function(dataset,_index){if(dataset.name===name){index=_index;return!0} return!1});if(typeaheadjs[index].valueKey){self.add(datum[typeaheadjs[index].valueKey])}else{self.add(datum)} self.$input.typeahead('val','')},self))} self.$container.on('click',$.proxy(function(event){if(!self.$element.attr('disabled')){self.$input.removeAttr('disabled')} self.$input.focus()},self));if(self.options.addOnBlur&&self.options.freeInput){self.$input.on('focusout',$.proxy(function(event){if($('.typeahead, .twitter-typeahead',self.$container).length===0){self.add(self.$input.val());self.$input.val('')}},self))} self.$container.on({focusin:function(){self.$container.addClass(self.options.focusClass)},focusout:function(){self.$container.removeClass(self.options.focusClass)},});self.$container.on('keydown','input',$.proxy(function(event){var $input=$(event.target),$inputWrapper=self.findInputWrapper();if(self.$element.attr('disabled')){self.$input.attr('disabled','disabled');return} switch(event.which){case 8:if(doGetCaretPosition($input[0])===0){var prev=$inputWrapper.prev();if(prev.length){self.remove(prev.data('item'))}} break;case 46:if(doGetCaretPosition($input[0])===0){var next=$inputWrapper.next();if(next.length){self.remove(next.data('item'))}} break;case 37:var $prevTag=$inputWrapper.prev();if($input.val().length===0&&$prevTag[0]){$prevTag.before($inputWrapper);$input.focus()} break;case 39:var $nextTag=$inputWrapper.next();if($input.val().length===0&&$nextTag[0]){$nextTag.after($inputWrapper);$input.focus()} break;default:} var textLength=$input.val().length,wordSpace=Math.ceil(textLength/5),size=textLength+wordSpace+1;$input.attr('size',Math.max(this.inputSize,size))},self));self.$container.on('keypress','input',$.proxy(function(event){var $input=$(event.target);if(self.$element.attr('disabled')){self.$input.attr('disabled','disabled');return} var text=$input.val(),maxLengthReached=self.options.maxChars&&text.length>=self.options.maxChars;if(self.options.freeInput&&(keyCombinationInList(event,self.options.confirmKeys)||maxLengthReached)){if(text.length!==0){self.add(maxLengthReached?text.substr(0,self.options.maxChars):text);$input.val('')} if(self.options.cancelConfirmKeysOnEmpty===!1){event.preventDefault()}} var textLength=$input.val().length,wordSpace=Math.ceil(textLength/5),size=textLength+wordSpace+1;$input.attr('size',Math.max(this.inputSize,size))},self));self.$container.on('click','[data-role=remove]',$.proxy(function(event){if(self.$element.attr('disabled')){return} self.remove($(event.target).closest('.badge').data('item'))},self));if(self.options.itemValue===defaultOptions.itemValue){if(self.$element[0].tagName==='INPUT'){self.add(self.$element.val())}else{$('option',self.$element).each(function(){self.add($(this).attr('value'),!0)})}}},destroy:function(){var self=this;self.$container.off('keypress','input');self.$container.off('click','[role=remove]');self.$container.remove();self.$element.removeData('tagsinput');self.$element.show()},focus:function(){this.$input.focus()},input:function(){return this.$input},findInputWrapper:function(){var elt=this.$input[0],container=this.$container[0];while(elt&&elt.parentNode!==container) elt=elt.parentNode;return $(elt)}};$.fn.tagsinput=function(arg1,arg2,arg3){var results=[];this.each(function(){var tagsinput=$(this).data('tagsinput');if(!tagsinput){tagsinput=new TagsInput(this,arg1);$(this).data('tagsinput',tagsinput);results.push(tagsinput);if(this.tagName==='SELECT'){$('option',$(this)).attr('selected','selected')} $(this).val($(this).val())}else if(!arg1&&!arg2){results.push(tagsinput)}else if(tagsinput[arg1]!==undefined){if(tagsinput[arg1].length===3&&arg3!==undefined){var retVal=tagsinput[arg1](arg2,null,arg3)}else{var retVal=tagsinput[arg1](arg2)} if(retVal!==undefined) results.push(retVal)}});if(typeof arg1=='string'){return results.length>1?results:results[0]}else{return results}};$.fn.tagsinput.Constructor=TagsInput;function makeOptionItemFunction(options,key){if(typeof options[key]!=='function'){var propertyName=options[key];options[key]=function(item){return item[propertyName]}}} function makeOptionFunction(options,key){if(typeof options[key]!=='function'){var value=options[key];options[key]=function(){return value}}} var htmlEncodeContainer=$('<div />');function htmlEncode(value){if(value){return htmlEncodeContainer.text(value).html()}else{return''}} function doGetCaretPosition(oField){var iCaretPos=0;if(document.selection){oField.focus();var oSel=document.selection.createRange();oSel.moveStart('character',-oField.value.length);iCaretPos=oSel.text.length}else if(oField.selectionStart||oField.selectionStart=='0'){iCaretPos=oField.selectionStart} return(iCaretPos)} function keyCombinationInList(keyPressEvent,lookupList){var found=!1;$.each(lookupList,function(index,keyCombination){if(typeof(keyCombination)==='number'&&keyPressEvent.which===keyCombination){found=!0;return!1} if(keyPressEvent.which===keyCombination.which){var alt=!keyCombination.hasOwnProperty('altKey')||keyPressEvent.altKey===keyCombination.altKey,shift=!keyCombination.hasOwnProperty('shiftKey')||keyPressEvent.shiftKey===keyCombination.shiftKey,ctrl=!keyCombination.hasOwnProperty('ctrlKey')||keyPressEvent.ctrlKey===keyCombination.ctrlKey;if(alt&&shift&&ctrl){found=!0;return!1}}});return found} $(function(){$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput()})})(window.jQuery) </script> <script type="text/javascript"> $(document).ready(function() { $('#categoryTags').tagsinput(); $('#categoryTags').on('beforeItemAdd', function(event) { let tag = event.item; axios.post('{{route('admin.discover.create-hashtag')}}', { 'category_id': {{$category->id}}, 'hashtag': tag, 'action': 'create' }).catch(function(err) { event.cancel = true; }); }); $('#categoryTags').on('beforeItemRemove', function(event) { let tag = event.item; axios.post('{{route('admin.discover.create-hashtag')}}', { 'category_id': {{$category->id}}, 'hashtag': tag, 'action': 'delete' }).catch(function(err) { event.cancel = true; }); }); $('.cc-form').on('submit', function(e) { e.preventDefault(); let data = { 'name': document.getElementById('categoryName').value, 'media': document.getElementById('categoryMedia').value, 'active': document.getElementById('categoryActive').checked, 'hashtags': document.getElementById('categoryTags').value }; axios.post('{{request()->url()}}', data) .then(res => { window.location.href = '{{request()->url()}}'; }); }) }); </script> @endpush @push('styles') <style type="text/css"> /* * bootstrap-tagsinput v0.8.0 * */ .bootstrap-tagsinput { background-color: #fff; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); display: inline-block; padding: 4px 6px; color: #555; vertical-align: middle; border-radius: 4px; width: 100%; line-height: 22px; cursor: text; } .bootstrap-tagsinput input { border: none; box-shadow: none; outline: none; background-color: transparent; padding: 0 6px; margin: 0; width: auto; max-width: inherit; } .bootstrap-tagsinput.form-control input::-moz-placeholder { color: #777; opacity: 1; } .bootstrap-tagsinput.form-control input:-ms-input-placeholder { color: #777; } .bootstrap-tagsinput.form-control input::-webkit-input-placeholder { color: #777; } .bootstrap-tagsinput input:focus { border: none; box-shadow: none; } .bootstrap-tagsinput .badge { margin-right: 2px; color: white; background-color:#0275d8; padding:5px 8px;border-radius:3px; border:1px solid #01649e } .bootstrap-tagsinput .badge [data-role="remove"] { margin-left: 8px; cursor: pointer; } .bootstrap-tagsinput .badge [data-role="remove"]:after { content: "×"; padding: 0px 4px; background-color:rgba(0, 0, 0, 0.1); border-radius:50%; font-size:13px } .bootstrap-tagsinput .badge [data-role="remove"]:hover:after { background-color:rgba(0, 0, 0, 0.62); } .bootstrap-tagsinput .badge [data-role="remove"]:hover:active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } </style> @endpush