webmaster/crew_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added upload clipart module

Browse Source
This commit is contained in:
franknstayn
2019-11-20 14:47:31 +08:00
parent f42a900e3d
commit c539b41371
4 changed files with 130 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
resources/views/admin/main.blade.php
View File

@@ -185,8 +185,8 @@ desired effect
<!-- select2 -->
<script src="{{ asset('/bower_components/select2/dist/js/select2.min.js') }}"></script>
<script>
$(function () {
<script>
$(document).ready(function() {
// var hash = window.location.hash;
// hash && $('ul.nav a[href="' + hash + '"]').tab('show');
@@ -227,7 +227,8 @@ desired effect
var obj = canvas.getActiveObject();
$('.available-colors').html('');
$('.available-colors').append('<h4> Colors: </h4>');
$('.available-colors').append('Colors:<div class="row"><div class="col-md-12">')
for (var j in obj.paths) {
var i = j;
@@ -240,7 +241,8 @@ desired effect
$('.available-colors').append('<button type="button" data-id="' + id + '" data-orig-color="'+fill+'" id="btn_' + id + '" data-toggle="popover" title="HEX Color" data-content="' + fill + '" class="btn btn-default change_color" style="background-color:' + fill + '"></button>');
}
$('.available-colors').append('</div></div>');
$('.additional-info').css("display", "block");
$('[data-toggle="popover"]').popover({
@@ -464,8 +466,6 @@ desired effect
submitHandler: submitForm_frm_create_user_as_store_owner
});
$('#with_password_opt').change(function() {
if($(this).prop('checked')){
$('.store-password-field').css({
@@ -484,26 +484,17 @@ desired effect
});
function changeColor(pathid, hexc) {
//hexcolor();
var obj = canvas.getActiveObject();
for (var j in obj.paths) {
var id = obj.paths[j].get('id');
if (id == pathid) {
//console.log(objects[j].toObject(['idNumber']));
//console.log(objects[j].getText());
obj.paths[j].setFill(hexc);
/* objects[j].setText(p_name.toString());
objects[j].centerH();
objects[j].setCoords(); */
canvas.renderAll();
break;
}
}
//:red;
$('#btn_' + pathid).css({
'background-color': hexc
})
@@ -611,6 +602,9 @@ desired effect
$('#user_id').val(e.params.data.id);
});
$("#sel_clipart_category").select2();
$(".select2-select-user").select2({
placeholder: "Select a state",
allowClear: true,
@@ -654,67 +648,64 @@ desired effect
templateResult: formatUserList,
templateSelection: formatUserListSelection,
})
});
function submitClipartForm(){
var obj = canvas.getActiveObject(canvas.setActiveObject(canvas.item(0)));
obj.set({
left: 0,
top: 0
}).scale(1);
$('.change_color').each(function(i, elem) {
var def_color = $(elem).data('orig-color');
var def_id = $(elem).data('id');
var id = obj.paths[i].get('id');
if (id == def_id) {
obj.paths[i].setFill(def_color);
}
});
var normal_obj = canvas.getActiveObject(obj);
var svg = canvas.toSVG({
width: normal_obj.getWidth(),
height: normal_obj.getHeight(),
viewBox: {
x: '0',
y: '0',
width: normal_obj.getWidth(),
height: normal_obj.getHeight()
}
});
$.ajax({
type: "POST",
url : "{{ url('admin/clipart/save-svg-clipart') }}",
data: new FormData($('#frm_clipart')[0]),
processData: false,
contentType: false,
beforeSend: function(xhr){
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
success: function(response){
if(response.success){
alert(response.message);
location.reload();
}
}
});
}
}); // end document ready
function submitClipartForm(){
var obj = canvas.getActiveObject(canvas.setActiveObject(canvas.item(0)));
obj.set({
left: 0,
top: 0
}).scale(1);
$('.change_color').each(function(i, elem) {
var def_color = $(elem).data('orig-color');
var def_id = $(elem).data('id');
var id = obj.paths[i].get('id');
if (id == def_id) {
obj.paths[i].setFill(def_color);
}
});
var normal_obj = canvas.getActiveObject(obj);
var svg = canvas.toSVG({
width: normal_obj.getWidth(),
height: normal_obj.getHeight(),
viewBox: {
x: '0',
y: '0',
width: normal_obj.getWidth(),
height: normal_obj.getHeight()
}
});
var files = $("#svg_clipart")[0].files[0];
var getCategory = $('#category').val();
var getTags = $('#tags').val();
$.ajax({
type: "POST",
url : "{{ url('admin/clipart/save-svg-clipart') }}",
data: {
svg_data : svg,
category : getCategory,
tags : getTags,
filename : files.name
},
beforeSend: function(xhr){
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
success: function(response){
// $('#c).html(response)
}
});
}
function submitAddCategoryForm(){
var data = $("#frm_add_category").serialize();
@@ -882,7 +873,6 @@ desired effect
reader.onload = function(e) {
$('#'+id).attr('src', e.target.result);
// for lightbox
$('.'+id+'_href').attr('href', e.target.result);
$('.'+id+'_img').attr('src', e.target.result);
}

52
resources/views/admin_pages/clipart.blade.php
View File

@@ -1,5 +1,10 @@
@extends('admin.main')
@section('content')
<style>
.additional-info{
display:none;
}
</style>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
@@ -16,7 +21,7 @@
<!-- Main content -->
<section class="content container-fluid">
<div class="row">
<div class="col-md-3">
<!-- <div class="col-md-3">
<button class="btn btn-primary btn-block margin-bottom" data-toggle="modal" data-target="#modal_add_category"><i class="fa fa-plus"></i> Add Categories</button>
<div class="box box-solid">
<div class="box-header with-border">
@@ -48,39 +53,33 @@
</a>
</li>
@endforeach
<!-- <li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Store Management</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="{{ url('admin/create-store') }}"><i class="fa fa-plus"></i> Create New Store</a></li>
<li><a href="{{ url('admin/stores-list') }}"><i class="fa fa-list"></i> List of Stores</a></li>
</ul>
</li> -->
</ul>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="col-md-9">
</div> -->
<div class="col-md-12">
<div class="box">
<div class="box-header with-border">
<h4 class="box-title">Clipart</h4>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-6">
<div class="canvas-container" style="width:100%">
<canvas id="canvas" height="434px" style="border: 1px solid #ecf0f5;"></canvas>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-heading">
Preview
</div>
<div class="panel-body">
<div class="canvas-container" style="width:100%">
<canvas id="canvas" height="434px" style="border: 1px solid #ecf0f5;"></canvas>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-12">
<button type="button" id="btnClear" class="btn btn-default btn-clear" style="margin-top: 10px;">Clear Canvas</button>
</div> -->
<div class="col-md-6">
<div class="col-md-5">
<form id="frm_clipart">
<div class="form-group">
Select clipart: (SVG Format only)
@@ -91,23 +90,22 @@
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="available-colors"></div>
</div>
</div>
<div class="available-colors"></div>
</div>
<div class="additional-info">
<div class="form-group">
Select Category *
<div class="row">
<div class="col-sm-12">
<select class="form-control" name="category" id="category">
<div class="col-sm-8">
<select class="form-control" name="category" id="sel_clipart_category" style="width:100%">
@foreach($clipart_categories_array as $clipart_category)
<option value="{{ $clipart_category->Id }}">{{ $clipart_category->CategoryName }}</option>
@endforeach
</select>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Add Category</button>
</div>
</div>
</div>
<div class="form-group">