mirror of https://github.com/pixelfed/pixelfed.git
Add admin discover edit view
This commit is contained in:
Daniel Supernault
parent
f057ab689a
commit
94877eeb49
|
|
@ -0,0 +1,249 @@
|
|||
@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
|
||||
Loading…
Reference in New Issue