pixelfed/resources/views/admin/discover/show.blade.php
2019-02-10 16:57:14 -07:00

249 lines
18 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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