mirror of
https://github.com/haselkern/Minecraft-ArmorStand.git
synced 2025-05-17 15:05:33 +00:00
Deleted all old things, added Vue skeleton
This commit is contained in:
parent
665a22a24b
commit
5c5f34dc36
26 changed files with 13725 additions and 2640 deletions
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
17
.eslintrc.js
Normal file
17
.eslintrc.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
25
.github/workflows/build-deploy.yml
vendored
Normal file
25
.github/workflows/build-deploy.yml
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
name: Build and Deploy
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
jobs:
|
||||||
|
build-and-deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout 🛎️
|
||||||
|
uses: actions/checkout@v2.3.1
|
||||||
|
with:
|
||||||
|
persist-credentials: false
|
||||||
|
|
||||||
|
- name: Install and Build 🔧
|
||||||
|
run: |
|
||||||
|
npm install
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
- name: Deploy 🚀
|
||||||
|
uses: JamesIves/github-pages-deploy-action@3.6.2
|
||||||
|
with:
|
||||||
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
BRANCH: gh-pages
|
||||||
|
FOLDER: dist
|
||||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
36
README.md
36
README.md
|
|
@ -1,8 +1,36 @@
|
||||||
Minecraft Armor Stand
|
# Minecraft Armorstand
|
||||||
=================
|
|
||||||
|
|
||||||
### [Try it out](http://haselkern.github.io/Minecraft-ArmorStand)
|
## [Try it out](http://haselkern.github.io/Minecraft-ArmorStand)
|
||||||
|
|
||||||
In Minecraft 1.8 Armor stands were introduced. Unfortunately, the syntax to summon one is quite confusing and not very intuitive, especially when you're trying to create an awesome pose. This tool provides a graphical interface so that you can focus on the looks and not worry about the code.
|
In Minecraft 1.8 armorstands were introduced. Unfortunately, the syntax to summon one is quite confusing and not very intuitive, especially when you're trying to create an awesome pose. This tool provides a graphical interface so that you can focus on the looks and not worry about the code.
|
||||||
|
|
||||||
If you would like to see a feature implemented, feel free to open an issue or submit a pull request.
|
If you would like to see a feature implemented, feel free to open an issue or submit a pull request.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
To install all required dependencies run:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Run this when developing. It will automatically rebuild the project on changes.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
The project will automatically build on pushes on the master branch. If you want to build the production build locally, you can run this to generate the `dist` directory.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Run the linter to check for mistakes:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
## TODO
|
||||||
|
Currently Vue 3 does not support Postcss 8, so we use a compatibility build of it. Some time in the future, [this should be upgraded](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
BIN
images/help.png
BIN
images/help.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
BIN
images/icon.png
BIN
images/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 360 B |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
BIN
images/slots.png
BIN
images/slots.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
333
index.htm
333
index.htm
|
|
@ -1,333 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Minecraft Armor stand</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="description" content="Create poses for Minecraft armor stands in a breeze! Free, fast, open source.">
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<link rel="stylesheet" href="js/colpick.css">
|
|
||||||
<link rel="icon" type="image/png" href="images/icon.png">
|
|
||||||
|
|
||||||
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
||||||
<script>
|
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
||||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
||||||
ga('create', 'UA-71932800-2', 'auto');
|
|
||||||
ga('send', 'pageview');
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="js/colpick.js"></script>
|
|
||||||
<script src="js/main.js"></script>
|
|
||||||
|
|
||||||
<div id="gl"></div>
|
|
||||||
|
|
||||||
<div class="right card">
|
|
||||||
|
|
||||||
<div class="padding underline">
|
|
||||||
<h1>MINECRAFT ARMOR STAND</h1>
|
|
||||||
<center>
|
|
||||||
<a href="https://github.com/haselkern/Minecraft-ArmorStand" target="_blank"><img src="images/github.png" alt="GitHub" title="GitHub" /></a>
|
|
||||||
<a href="https://www.twitter.com/haselcode" target="_blank"><img src="images/twitter.png" alt="Twitter" title="Twitter" /></a>
|
|
||||||
<a href="https://haselkern.com/armorstand" target="_blank"><img src="images/help.png" alt="haselkern.com/armorstand" title="help" /></a>
|
|
||||||
</center>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="padding underline">
|
|
||||||
<select id="mcversion">
|
|
||||||
<option value="1.16">Minecraft 1.16 and above</option>
|
|
||||||
<option value="1.14">Minecraft 1.14 & 1.15</option>
|
|
||||||
<option value="1.13">Minecraft 1.13</option>
|
|
||||||
<option value="1.11">Minecraft 1.11 & 1.12</option>
|
|
||||||
<option value="1.9">Minecraft 1.9 & 1.10</option>
|
|
||||||
<option value="1.8">Minecraft 1.8</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="padding underline">
|
|
||||||
<label><input type="checkbox" name="invisible">Invisible</label><br>
|
|
||||||
<label><input type="checkbox" name="invulnerable">Invulnerable</label><br>
|
|
||||||
<label><input type="checkbox" name="persistencerequired">PersistenceRequired</label><br>
|
|
||||||
<label><input type="checkbox" name="nobaseplate">No Base Plate</label><br>
|
|
||||||
<label><input type="checkbox" name="nogravity">No Gravity</label><br>
|
|
||||||
<label><input type="checkbox" name="showarms">Show Arms</label><br>
|
|
||||||
<label><input type="checkbox" name="small">Small</label><br>
|
|
||||||
<label><input type="checkbox" name="marker">Marker</label><br>
|
|
||||||
<div id="centercorrected">
|
|
||||||
<label><input type="checkbox" id="center-corrected" name="center-corrected">Center-corrected</label><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="padding underline">
|
|
||||||
<table class="rotations">
|
|
||||||
<tr>
|
|
||||||
<td>Rotation:</td>
|
|
||||||
<td colspan="3"><input type="range" name="rotation" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Head:</td>
|
|
||||||
<td><input type="range" name="headX" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="headY" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="headZ" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Body:</td>
|
|
||||||
<td><input type="range" name="bodyX" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="bodyY" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="bodyZ" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Left Leg:</td>
|
|
||||||
<td><input type="range" name="leftLegX" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="leftLegY" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="leftLegZ" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Right Leg:</td>
|
|
||||||
<td><input type="range" name="rightLegX" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="rightLegY" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="rightLegZ" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<div id="inputarms">
|
|
||||||
<table class="rotations">
|
|
||||||
<tr>
|
|
||||||
<td>Left Arm:</td>
|
|
||||||
<td><input type="range" name="leftArmX" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="leftArmY" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="leftArmZ" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Right Arm:</td>
|
|
||||||
<td><input type="range" name="rightArmX" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="rightArmY" min="0" max="360" value="0"></td>
|
|
||||||
<td><input type="range" name="rightArmZ" min="0" max="360" value="0"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="padding underline">
|
|
||||||
<label><input type="checkbox" name="useequipment">Enable equipment</label><br>
|
|
||||||
<div id="customequipment">
|
|
||||||
<p>
|
|
||||||
Enter the text id of an item (for example <i>stone</i> or <i>iron_sword</i>) into the appropriate slots. You can enter an arbitrary item for the head or hand, but the other slots must contain an appropriate item.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<input type="text" class="equipment" name="equipHandRight" placeholder="Item in right hand">
|
|
||||||
<input type="text" class="equipment" id="equipHandLeft" name="equipHandLeft" placeholder="Item in left hand">
|
|
||||||
|
|
||||||
<input type="text" class="equipment" name="equipShoes" placeholder="Boots" list="list-shoes">
|
|
||||||
<datalist id="list-shoes">
|
|
||||||
<option value="chainmail_boots">
|
|
||||||
<option value="diamond_boots">
|
|
||||||
<option value="golden_boots">
|
|
||||||
<option value="netherite_boots">
|
|
||||||
<option value="iron_boots">
|
|
||||||
<option value="leather_boots">
|
|
||||||
</datalist>
|
|
||||||
<div class="colorfield" id="shoecolor"></div>
|
|
||||||
|
|
||||||
<input type="text" class="equipment" name="equipLeggings" placeholder="Leggings" list="list-leggings">
|
|
||||||
<datalist id="list-leggings">
|
|
||||||
<option value="chainmail_leggings">
|
|
||||||
<option value="diamond_leggings">
|
|
||||||
<option value="golden_leggings">
|
|
||||||
<option value="netherite_leggings">
|
|
||||||
<option value="iron_leggings">
|
|
||||||
<option value="leather_leggings">
|
|
||||||
</datalist>
|
|
||||||
<div class="colorfield" id="leggingscolor"></div>
|
|
||||||
|
|
||||||
<input type="text" class="equipment" name="equipChestplate" placeholder="Chestplate" list="list-chestplate">
|
|
||||||
<datalist id="list-chestplate">
|
|
||||||
<option value="chainmail_chestplate">
|
|
||||||
<option value="diamond_chestplate">
|
|
||||||
<option value="golden_chestplate">
|
|
||||||
<option value="netherite_chestplate">
|
|
||||||
<option value="iron_chestplate">
|
|
||||||
<option value="leather_chestplate">
|
|
||||||
</datalist>
|
|
||||||
<div class="colorfield" id="chestplatecolor"></div>
|
|
||||||
|
|
||||||
<input type="text" class="equipment" name="equipHelmet" placeholder="Helmet" list="list-helmet">
|
|
||||||
<datalist id="list-helmet">
|
|
||||||
<option value="turtle_helmet">
|
|
||||||
<option value="chainmail_helmet">
|
|
||||||
<option value="diamond_helmet">
|
|
||||||
<option value="golden_helmet">
|
|
||||||
<option value="netherite_helmet">
|
|
||||||
<option value="iron_helmet">
|
|
||||||
<option value="leather_helmet">
|
|
||||||
</datalist>
|
|
||||||
<div class="colorfield" id="helmetcolor"></div>
|
|
||||||
|
|
||||||
<br>Helmet specifies
|
|
||||||
<select id="equipCustomHeadMode">
|
|
||||||
<option value="item">Item Name</option>
|
|
||||||
<option value="player">Player Name</option>
|
|
||||||
<option value="url">Image URL</option>
|
|
||||||
<option value="givecode">Give Code</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div id="minecraft-heads">
|
|
||||||
<br>
|
|
||||||
You can find lots of different heads here. Pick one and copy the <i>Give-Code</i> into the helmet field:
|
|
||||||
<br>
|
|
||||||
<a href="http://minecraft-heads.com/" target="_blank"><img src="images/mc-heads.png" alt="minecraft-heads.com" /></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="padding underline">
|
|
||||||
<input type="text" name="customname" id="customname" placeholder="Custom name">
|
|
||||||
<label><input type="checkbox" name="showcustomname">Show custom name</label><br>
|
|
||||||
<div id="namecustomization">
|
|
||||||
<p>
|
|
||||||
In 1.13, you can now add formats to the name tags.
|
|
||||||
Enter the color id (for example red, dark_blue) in the name color field to give it a color.
|
|
||||||
</p>
|
|
||||||
<input type="text" name="namecolor" id="namecolor" placeholder="Name color" list="list-colors">
|
|
||||||
<datalist id="list-colors">
|
|
||||||
<option value="aqua">
|
|
||||||
<option value="black">
|
|
||||||
<option value="blue">
|
|
||||||
<option value="dark_aqua">
|
|
||||||
<option value="dark_blue">
|
|
||||||
<option value="dark_gray">
|
|
||||||
<option value="dark_green">
|
|
||||||
<option value="dark_purple">
|
|
||||||
<option value="dark_red">
|
|
||||||
<option value="gold">
|
|
||||||
<option value="gray">
|
|
||||||
<option value="green">
|
|
||||||
<option value="light_purple">
|
|
||||||
<option value="red">
|
|
||||||
<option value="white">
|
|
||||||
<option value="yellow">
|
|
||||||
</datalist>
|
|
||||||
<div>
|
|
||||||
<label><input type="checkbox" id="namebold" name="namebold">Bold</label>
|
|
||||||
<label><input type="checkbox" id="nameitalic" name="nameitalic">Italic</label>
|
|
||||||
<label><input type="checkbox" id="nameobfuscated" name="nameobfuscated">Obfuscated</label>
|
|
||||||
<label><input type="checkbox" id="namestrikethrough" name="namestrikethrough">Strikethrough</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="padding">
|
|
||||||
<!-- THANK YOU to reddit user Oozebull for this part. -->
|
|
||||||
<label><input type="checkbox" name="usedisabledslots">Lock Slot Interaction</label>
|
|
||||||
<div id="disabledslots">
|
|
||||||
<div>
|
|
||||||
<span class="first"> </span>
|
|
||||||
<span class="sprite" style="background-position: 0px 0px"></span>
|
|
||||||
<span class="sprite" style="background-position: 0px -16px"></span>
|
|
||||||
<span class="sprite" style="background-position: 0px -32px"></span>
|
|
||||||
<span class="sprite" style="background-position: 0px -48px"></span>
|
|
||||||
<span class="sprite" style="background-position: 0px -64px"></span>
|
|
||||||
<span class="sprite offhand" style="background-position: 0px -80px"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<span class="first">Remove</span>
|
|
||||||
<span><input id="dH" type="checkbox"></input></span>
|
|
||||||
<span><input id="dC" type="checkbox"></input></span>
|
|
||||||
<span><input id="dL" type="checkbox"></input></span>
|
|
||||||
<span><input id="dB" type="checkbox"></input></span>
|
|
||||||
<span><input id="dW" type="checkbox"></input></span>
|
|
||||||
<span><input id="dO" type="checkbox"></input></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="first">Replace</span>
|
|
||||||
<span><input id="rH" type="checkbox"></input></span>
|
|
||||||
<span><input id="rC" type="checkbox"></input></span>
|
|
||||||
<span><input id="rL" type="checkbox"></input></span>
|
|
||||||
<span><input id="rB" type="checkbox"></input></span>
|
|
||||||
<span><input id="rW" type="checkbox"></input></span>
|
|
||||||
<span><input id="rO" type="checkbox"></input></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="first">Place</span>
|
|
||||||
<span><input id="pH" type="checkbox"></input></span>
|
|
||||||
<span><input id="pC" type="checkbox"></input></span>
|
|
||||||
<span><input id="pL" type="checkbox"></input></span>
|
|
||||||
<span><input id="pB" type="checkbox"></input></span>
|
|
||||||
<span><input id="pW" type="checkbox"></input></span>
|
|
||||||
<span><input id="pO" type="checkbox"></input></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="code">
|
|
||||||
<div id="code-copy-hint">click to copy</div>
|
|
||||||
<div id="code"></div>
|
|
||||||
</div>
|
|
||||||
<div id="codeinfo" class="padding">
|
|
||||||
<b>Please note:</b>
|
|
||||||
This command is too long to be executed from chat. You need to place it inside a command block. (see below)
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right card">
|
|
||||||
<span style="cursor: pointer;" onclick="javascript:$('#saveandload').slideToggle();">
|
|
||||||
+ Save and Load
|
|
||||||
</span>
|
|
||||||
<div id="saveandload">
|
|
||||||
<div class="padding">
|
|
||||||
<div id="save" class="padding underline">
|
|
||||||
<p>
|
|
||||||
Save your current armor stand creation
|
|
||||||
</p>
|
|
||||||
<input type="text" name="creationname" id="creationname" placeholder="My armor stand"/>
|
|
||||||
<button style="display:inline-block" id="savecreation" onclick="javascript:saveData();">Save Creation</button><br>
|
|
||||||
</div>
|
|
||||||
<div id="load" class="padding underline">
|
|
||||||
<p id="loadmessage">
|
|
||||||
Load your saved creations
|
|
||||||
</p>
|
|
||||||
<div id="loadlistopts">
|
|
||||||
<select id="loadlist"></select>
|
|
||||||
<button id="loadcreation" style="display:inline-block;" onclick="javascript:loadData($(`#loadlist`).val());">Load Creation</button>
|
|
||||||
<button id="deletesave" style="display:inline-block;" onclick="javascript:deleteSave($(`#loadlist`).val());">Delete Creation</button><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right card">
|
|
||||||
<span style="cursor: pointer;" onclick="javascript:$('#getcommandblock').slideToggle();">
|
|
||||||
+ Obtain a command block
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<div id="getcommandblock">
|
|
||||||
<div class="padding">
|
|
||||||
If your command is longer than 256 characters (100 before Minecraft 1.11), it needs to be executed with a <i>command block</i>. Obtain one by typing:
|
|
||||||
</div>
|
|
||||||
<div class="code">
|
|
||||||
/give @p minecraft:command_block
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right card">
|
|
||||||
<span class="" style="cursor: pointer;" onclick="javascript:$('#troubleshooting').slideToggle();">
|
|
||||||
+ Troubleshooting
|
|
||||||
</span>
|
|
||||||
<div id="troubleshooting">
|
|
||||||
<p>
|
|
||||||
<b>This thing uses WebGL!</b>
|
|
||||||
If you don't see anything on the left enable WebGL in your browser or visit the <a href="http://get.webgl.org/">official WebGL website</a> to troubleshoot problems.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
420
js/colpick.css
420
js/colpick.css
|
|
@ -1,420 +0,0 @@
|
||||||
/*
|
|
||||||
colpick Color Picker / colpick.com
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*Main container*/
|
|
||||||
.colpick {
|
|
||||||
position: absolute;
|
|
||||||
width: 346px;
|
|
||||||
height: 170px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: none;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
background:#ebebeb;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
/*Prevents selecting text when dragging the selectors*/
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
-o-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
/*Color selection box with gradients*/
|
|
||||||
.colpick_color {
|
|
||||||
position: absolute;
|
|
||||||
left: 7px;
|
|
||||||
top: 7px;
|
|
||||||
width: 156px;
|
|
||||||
height: 156px;
|
|
||||||
overflow: hidden;
|
|
||||||
outline: 1px solid #aaa;
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
.colpick_color_overlay1 {
|
|
||||||
position: absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
width: 156px;
|
|
||||||
height: 156px;
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
|
|
||||||
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
|
|
||||||
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
|
|
||||||
}
|
|
||||||
.colpick_color_overlay2 {
|
|
||||||
position: absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
width: 156px;
|
|
||||||
height: 156px;
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
|
|
||||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
|
|
||||||
}
|
|
||||||
/*Circular color selector*/
|
|
||||||
.colpick_selector_outer {
|
|
||||||
background:none;
|
|
||||||
position: absolute;
|
|
||||||
width: 11px;
|
|
||||||
height: 11px;
|
|
||||||
margin: -6px 0 0 -6px;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.colpick_selector_inner{
|
|
||||||
position: absolute;
|
|
||||||
width: 9px;
|
|
||||||
height: 9px;
|
|
||||||
border: 1px solid white;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
/*Vertical hue bar*/
|
|
||||||
.colpick_hue {
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
left: 175px;
|
|
||||||
width: 19px;
|
|
||||||
height: 156px;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
cursor: n-resize;
|
|
||||||
}
|
|
||||||
/*Hue bar sliding indicator*/
|
|
||||||
.colpick_hue_arrs {
|
|
||||||
position: absolute;
|
|
||||||
left: -8px;
|
|
||||||
width: 35px;
|
|
||||||
height: 7px;
|
|
||||||
margin: -7px 0 0 0;
|
|
||||||
}
|
|
||||||
.colpick_hue_larr {
|
|
||||||
position:absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: 6px solid transparent;
|
|
||||||
border-bottom: 6px solid transparent;
|
|
||||||
border-left: 7px solid #858585;
|
|
||||||
}
|
|
||||||
.colpick_hue_rarr {
|
|
||||||
position:absolute;
|
|
||||||
right:0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: 6px solid transparent;
|
|
||||||
border-bottom: 6px solid transparent;
|
|
||||||
border-right: 7px solid #858585;
|
|
||||||
}
|
|
||||||
/*New color box*/
|
|
||||||
.colpick_new_color {
|
|
||||||
position: absolute;
|
|
||||||
left: 207px;
|
|
||||||
top: 6px;
|
|
||||||
width: 60px;
|
|
||||||
height: 27px;
|
|
||||||
background: #f00;
|
|
||||||
border: 1px solid #8f8f8f;
|
|
||||||
}
|
|
||||||
/*Current color box*/
|
|
||||||
.colpick_current_color {
|
|
||||||
position: absolute;
|
|
||||||
left: 277px;
|
|
||||||
top: 6px;
|
|
||||||
width: 60px;
|
|
||||||
height: 27px;
|
|
||||||
background: #f00;
|
|
||||||
border: 1px solid #8f8f8f;
|
|
||||||
}
|
|
||||||
/*Input field containers*/
|
|
||||||
.colpick_field, .colpick_hex_field {
|
|
||||||
position: absolute;
|
|
||||||
height: 20px;
|
|
||||||
width: 60px;
|
|
||||||
overflow:hidden;
|
|
||||||
background:#f3f3f3;
|
|
||||||
color:#b8b8b8;
|
|
||||||
font-size:12px;
|
|
||||||
border:1px solid #bdbdbd;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.colpick_rgb_r {
|
|
||||||
top: 40px;
|
|
||||||
left: 207px;
|
|
||||||
}
|
|
||||||
.colpick_rgb_g {
|
|
||||||
top: 67px;
|
|
||||||
left: 207px;
|
|
||||||
}
|
|
||||||
.colpick_rgb_b {
|
|
||||||
top: 94px;
|
|
||||||
left: 207px;
|
|
||||||
}
|
|
||||||
.colpick_hsb_h {
|
|
||||||
top: 40px;
|
|
||||||
left: 277px;
|
|
||||||
}
|
|
||||||
.colpick_hsb_s {
|
|
||||||
top: 67px;
|
|
||||||
left: 277px;
|
|
||||||
}
|
|
||||||
.colpick_hsb_b {
|
|
||||||
top: 94px;
|
|
||||||
left: 277px;
|
|
||||||
}
|
|
||||||
.colpick_hex_field {
|
|
||||||
width: 68px;
|
|
||||||
left: 207px;
|
|
||||||
top: 121px;
|
|
||||||
}
|
|
||||||
/*Text field container on focus*/
|
|
||||||
.colpick_focus {
|
|
||||||
border-color: #999;
|
|
||||||
}
|
|
||||||
/*Field label container*/
|
|
||||||
.colpick_field_letter {
|
|
||||||
position: absolute;
|
|
||||||
width: 12px;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
padding-left: 4px;
|
|
||||||
background: #efefef;
|
|
||||||
border-right: 1px solid #bdbdbd;
|
|
||||||
font-weight: bold;
|
|
||||||
color:#777;
|
|
||||||
}
|
|
||||||
/*Text inputs*/
|
|
||||||
.colpick_field input, .colpick_hex_field input {
|
|
||||||
position: absolute;
|
|
||||||
right: 11px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
color: #555;
|
|
||||||
text-align: right;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.colpick_hex_field input {
|
|
||||||
right: 4px;
|
|
||||||
}
|
|
||||||
/*Field up/down arrows*/
|
|
||||||
.colpick_field_arrs {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 9px;
|
|
||||||
height: 21px;
|
|
||||||
cursor: n-resize;
|
|
||||||
}
|
|
||||||
.colpick_field_uarr {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 4px solid transparent;
|
|
||||||
border-right: 4px solid transparent;
|
|
||||||
border-bottom: 4px solid #959595;
|
|
||||||
}
|
|
||||||
.colpick_field_darr {
|
|
||||||
position: absolute;
|
|
||||||
bottom:5px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 4px solid transparent;
|
|
||||||
border-right: 4px solid transparent;
|
|
||||||
border-top: 4px solid #959595;
|
|
||||||
}
|
|
||||||
/*Submit/Select button*/
|
|
||||||
.colpick_submit {
|
|
||||||
position: absolute;
|
|
||||||
left: 207px;
|
|
||||||
top: 149px;
|
|
||||||
width: 130px;
|
|
||||||
height: 22px;
|
|
||||||
line-height:22px;
|
|
||||||
background: #efefef;
|
|
||||||
text-align: center;
|
|
||||||
color: #555;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight:bold;
|
|
||||||
border: 1px solid #bdbdbd;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.colpick_submit:hover {
|
|
||||||
background:#f3f3f3;
|
|
||||||
border-color:#999;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*full layout with no submit button*/
|
|
||||||
.colpick_full_ns .colpick_submit, .colpick_full_ns .colpick_current_color{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.colpick_full_ns .colpick_new_color {
|
|
||||||
width: 130px;
|
|
||||||
height: 25px;
|
|
||||||
}
|
|
||||||
.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsb_h {
|
|
||||||
top: 42px;
|
|
||||||
}
|
|
||||||
.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsb_s {
|
|
||||||
top: 73px;
|
|
||||||
}
|
|
||||||
.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsb_b {
|
|
||||||
top: 104px;
|
|
||||||
}
|
|
||||||
.colpick_full_ns .colpick_hex_field {
|
|
||||||
top: 135px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rgbhex layout*/
|
|
||||||
.colpick_rgbhex .colpick_hsb_h, .colpick_rgbhex .colpick_hsb_s, .colpick_rgbhex .colpick_hsb_b {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex {
|
|
||||||
width:282px;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit {
|
|
||||||
width:68px;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex .colpick_new_color {
|
|
||||||
width:34px;
|
|
||||||
border-right:none;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex .colpick_current_color {
|
|
||||||
width:34px;
|
|
||||||
left:240px;
|
|
||||||
border-left:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*rgbhex layout, no submit button*/
|
|
||||||
.colpick_rgbhex_ns .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex_ns .colpick_new_color{
|
|
||||||
width:68px;
|
|
||||||
border: 1px solid #8f8f8f;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex_ns .colpick_rgb_r {
|
|
||||||
top: 42px;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex_ns .colpick_rgb_g {
|
|
||||||
top: 73px;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex_ns .colpick_rgb_b {
|
|
||||||
top: 104px;
|
|
||||||
}
|
|
||||||
.colpick_rgbhex_ns .colpick_hex_field {
|
|
||||||
top: 135px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*hex layout*/
|
|
||||||
.colpick_hex .colpick_hsb_h, .colpick_hex .colpick_hsb_s, .colpick_hex .colpick_hsb_b, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.colpick_hex {
|
|
||||||
width:206px;
|
|
||||||
height:201px;
|
|
||||||
}
|
|
||||||
.colpick_hex .colpick_hex_field {
|
|
||||||
width:72px;
|
|
||||||
height:25px;
|
|
||||||
top:168px;
|
|
||||||
left:80px;
|
|
||||||
}
|
|
||||||
.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input {
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
.colpick_hex .colpick_new_color {
|
|
||||||
left:9px;
|
|
||||||
top:168px;
|
|
||||||
width:30px;
|
|
||||||
border-right:none;
|
|
||||||
}
|
|
||||||
.colpick_hex .colpick_current_color {
|
|
||||||
left:39px;
|
|
||||||
top:168px;
|
|
||||||
width:30px;
|
|
||||||
border-left:none;
|
|
||||||
}
|
|
||||||
.colpick_hex .colpick_submit {
|
|
||||||
left:164px;
|
|
||||||
top: 168px;
|
|
||||||
width:30px;
|
|
||||||
height:25px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*hex layout, no submit button*/
|
|
||||||
.colpick_hex_ns .colpick_submit, .colpick_hex_ns .colpick_current_color {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.colpick_hex_ns .colpick_hex_field {
|
|
||||||
width:80px;
|
|
||||||
}
|
|
||||||
.colpick_hex_ns .colpick_new_color{
|
|
||||||
width:60px;
|
|
||||||
border: 1px solid #8f8f8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Dark color scheme*/
|
|
||||||
.colpick_dark {
|
|
||||||
background: #161616;
|
|
||||||
border-color: #2a2a2a;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_color {
|
|
||||||
outline-color: #333;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_hue {
|
|
||||||
border-color: #555;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field {
|
|
||||||
background: #101010;
|
|
||||||
border-color: #2d2d2d;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_field_letter {
|
|
||||||
background: #131313;
|
|
||||||
border-color: #2d2d2d;
|
|
||||||
color: #696969;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input {
|
|
||||||
color: #7a7a7a;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_field_uarr {
|
|
||||||
border-bottom-color:#696969;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_field_darr {
|
|
||||||
border-top-color:#696969;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_focus {
|
|
||||||
border-color:#444;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_submit {
|
|
||||||
background: #131313;
|
|
||||||
border-color:#2d2d2d;
|
|
||||||
color:#7a7a7a;
|
|
||||||
}
|
|
||||||
.colpick_dark .colpick_submit:hover {
|
|
||||||
background-color:#101010;
|
|
||||||
border-color:#444;
|
|
||||||
}
|
|
||||||
520
js/colpick.js
520
js/colpick.js
|
|
@ -1,520 +0,0 @@
|
||||||
/*
|
|
||||||
colpick Color Picker
|
|
||||||
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses
|
|
||||||
|
|
||||||
For usage and examples: colpick.com/plugin
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function ($) {
|
|
||||||
var colpick = function () {
|
|
||||||
var
|
|
||||||
tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
|
|
||||||
defaults = {
|
|
||||||
showEvent: 'click',
|
|
||||||
onShow: function () {},
|
|
||||||
onBeforeShow: function(){},
|
|
||||||
onHide: function () {},
|
|
||||||
onChange: function () {},
|
|
||||||
onSubmit: function () {},
|
|
||||||
colorScheme: 'light',
|
|
||||||
color: '3289c7',
|
|
||||||
livePreview: true,
|
|
||||||
flat: false,
|
|
||||||
layout: 'full',
|
|
||||||
submit: 1,
|
|
||||||
submitText: 'OK',
|
|
||||||
height: 156
|
|
||||||
},
|
|
||||||
//Fill the inputs of the plugin
|
|
||||||
fillRGBFields = function (hsb, cal) {
|
|
||||||
var rgb = hsbToRgb(hsb);
|
|
||||||
$(cal).data('colpick').fields
|
|
||||||
.eq(1).val(rgb.r).end()
|
|
||||||
.eq(2).val(rgb.g).end()
|
|
||||||
.eq(3).val(rgb.b).end();
|
|
||||||
},
|
|
||||||
fillHSBFields = function (hsb, cal) {
|
|
||||||
$(cal).data('colpick').fields
|
|
||||||
.eq(4).val(Math.round(hsb.h)).end()
|
|
||||||
.eq(5).val(Math.round(hsb.s)).end()
|
|
||||||
.eq(6).val(Math.round(hsb.b)).end();
|
|
||||||
},
|
|
||||||
fillHexFields = function (hsb, cal) {
|
|
||||||
$(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb));
|
|
||||||
},
|
|
||||||
//Set the round selector position
|
|
||||||
setSelector = function (hsb, cal) {
|
|
||||||
$(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100}));
|
|
||||||
$(cal).data('colpick').selectorIndic.css({
|
|
||||||
left: parseInt($(cal).data('colpick').height * hsb.s/100, 10),
|
|
||||||
top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//Set the hue selector position
|
|
||||||
setHue = function (hsb, cal) {
|
|
||||||
$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10));
|
|
||||||
},
|
|
||||||
//Set current and new colors
|
|
||||||
setCurrentColor = function (hsb, cal) {
|
|
||||||
$(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb));
|
|
||||||
},
|
|
||||||
setNewColor = function (hsb, cal) {
|
|
||||||
$(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb));
|
|
||||||
},
|
|
||||||
//Called when the new color is changed
|
|
||||||
change = function (ev) {
|
|
||||||
var cal = $(this).parent().parent(), col;
|
|
||||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
|
||||||
cal.data('colpick').color = col = hexToHsb(fixHex(this.value));
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
|
||||||
cal.data('colpick').color = col = fixHSB({
|
|
||||||
h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
|
|
||||||
s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
|
|
||||||
b: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
|
|
||||||
});
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
} else {
|
|
||||||
cal.data('colpick').color = col = rgbToHsb(fixRGB({
|
|
||||||
r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
|
|
||||||
g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
|
|
||||||
b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
|
|
||||||
}));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
}
|
|
||||||
setSelector(col, cal.get(0));
|
|
||||||
setHue(col, cal.get(0));
|
|
||||||
setNewColor(col, cal.get(0));
|
|
||||||
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]);
|
|
||||||
},
|
|
||||||
//Change style on blur and on focus of inputs
|
|
||||||
blur = function (ev) {
|
|
||||||
$(this).parent().removeClass('colpick_focus');
|
|
||||||
},
|
|
||||||
focus = function () {
|
|
||||||
$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
|
|
||||||
$(this).parent().addClass('colpick_focus');
|
|
||||||
},
|
|
||||||
//Increment/decrement arrows functions
|
|
||||||
downIncrement = function (ev) {
|
|
||||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
|
||||||
var field = $(this).parent().find('input').focus();
|
|
||||||
var current = {
|
|
||||||
el: $(this).parent().addClass('colpick_slider'),
|
|
||||||
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
|
||||||
y: ev.pageY,
|
|
||||||
field: field,
|
|
||||||
val: parseInt(field.val(), 10),
|
|
||||||
preview: $(this).parent().parent().data('colpick').livePreview
|
|
||||||
};
|
|
||||||
$(document).mouseup(current, upIncrement);
|
|
||||||
$(document).mousemove(current, moveIncrement);
|
|
||||||
},
|
|
||||||
moveIncrement = function (ev) {
|
|
||||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
|
|
||||||
if (ev.data.preview) {
|
|
||||||
change.apply(ev.data.field.get(0), [true]);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
upIncrement = function (ev) {
|
|
||||||
change.apply(ev.data.field.get(0), [true]);
|
|
||||||
ev.data.el.removeClass('colpick_slider').find('input').focus();
|
|
||||||
$(document).off('mouseup', upIncrement);
|
|
||||||
$(document).off('mousemove', moveIncrement);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
//Hue slider functions
|
|
||||||
downHue = function (ev) {
|
|
||||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
|
||||||
var current = {
|
|
||||||
cal: $(this).parent(),
|
|
||||||
y: $(this).offset().top
|
|
||||||
};
|
|
||||||
$(document).on('mouseup touchend',current,upHue);
|
|
||||||
$(document).on('mousemove touchmove',current,moveHue);
|
|
||||||
|
|
||||||
var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
|
||||||
change.apply(
|
|
||||||
current.cal.data('colpick')
|
|
||||||
.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
|
|
||||||
.get(0),
|
|
||||||
[current.cal.data('colpick').livePreview]
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
moveHue = function (ev) {
|
|
||||||
var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
|
||||||
change.apply(
|
|
||||||
ev.data.cal.data('colpick')
|
|
||||||
.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
|
|
||||||
.get(0),
|
|
||||||
[ev.data.preview]
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
upHue = function (ev) {
|
|
||||||
fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
||||||
fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
||||||
$(document).off('mouseup touchend',upHue);
|
|
||||||
$(document).off('mousemove touchmove',moveHue);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
//Color selector functions
|
|
||||||
downSelector = function (ev) {
|
|
||||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
|
||||||
var current = {
|
|
||||||
cal: $(this).parent(),
|
|
||||||
pos: $(this).offset()
|
|
||||||
};
|
|
||||||
current.preview = current.cal.data('colpick').livePreview;
|
|
||||||
|
|
||||||
$(document).on('mouseup touchend',current,upSelector);
|
|
||||||
$(document).on('mousemove touchmove',current,moveSelector);
|
|
||||||
|
|
||||||
var payeX,pageY;
|
|
||||||
if(ev.type == 'touchstart') {
|
|
||||||
pageX = ev.originalEvent.changedTouches[0].pageX,
|
|
||||||
pageY = ev.originalEvent.changedTouches[0].pageY;
|
|
||||||
} else {
|
|
||||||
pageX = ev.pageX;
|
|
||||||
pageY = ev.pageY;
|
|
||||||
}
|
|
||||||
|
|
||||||
change.apply(
|
|
||||||
current.cal.data('colpick').fields
|
|
||||||
.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
|
|
||||||
.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
|
|
||||||
.get(0),
|
|
||||||
[current.preview]
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
moveSelector = function (ev) {
|
|
||||||
var payeX,pageY;
|
|
||||||
if(ev.type == 'touchmove') {
|
|
||||||
pageX = ev.originalEvent.changedTouches[0].pageX,
|
|
||||||
pageY = ev.originalEvent.changedTouches[0].pageY;
|
|
||||||
} else {
|
|
||||||
pageX = ev.pageX;
|
|
||||||
pageY = ev.pageY;
|
|
||||||
}
|
|
||||||
|
|
||||||
change.apply(
|
|
||||||
ev.data.cal.data('colpick').fields
|
|
||||||
.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
|
|
||||||
.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
|
|
||||||
.get(0),
|
|
||||||
[ev.data.preview]
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
upSelector = function (ev) {
|
|
||||||
fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
||||||
fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|
||||||
$(document).off('mouseup touchend',upSelector);
|
|
||||||
$(document).off('mousemove touchmove',moveSelector);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
//Submit button
|
|
||||||
clickSubmit = function (ev) {
|
|
||||||
var cal = $(this).parent();
|
|
||||||
var col = cal.data('colpick').color;
|
|
||||||
cal.data('colpick').origColor = col;
|
|
||||||
setCurrentColor(col, cal.get(0));
|
|
||||||
cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el);
|
|
||||||
},
|
|
||||||
//Show/hide the color picker
|
|
||||||
show = function (ev) {
|
|
||||||
// Prevent the trigger of any direct parent
|
|
||||||
ev.stopPropagation();
|
|
||||||
var cal = $('#' + $(this).data('colpickId'));
|
|
||||||
cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
|
|
||||||
var pos = $(this).offset();
|
|
||||||
var top = pos.top + this.offsetHeight;
|
|
||||||
var left = pos.left;
|
|
||||||
var viewPort = getViewport();
|
|
||||||
var calW = cal.width();
|
|
||||||
if (left + calW > viewPort.l + viewPort.w) {
|
|
||||||
left -= calW;
|
|
||||||
}
|
|
||||||
cal.css({left: left + 'px', top: top + 'px'});
|
|
||||||
if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
|
|
||||||
cal.show();
|
|
||||||
}
|
|
||||||
//Hide when user clicks outside
|
|
||||||
$('html').mousedown({cal:cal}, hide);
|
|
||||||
cal.mousedown(function(ev){ev.stopPropagation();})
|
|
||||||
},
|
|
||||||
hide = function (ev) {
|
|
||||||
if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
|
||||||
ev.data.cal.hide();
|
|
||||||
}
|
|
||||||
$('html').off('mousedown', hide);
|
|
||||||
},
|
|
||||||
getViewport = function () {
|
|
||||||
var m = document.compatMode == 'CSS1Compat';
|
|
||||||
return {
|
|
||||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
|
||||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
|
|
||||||
};
|
|
||||||
},
|
|
||||||
//Fix the values if the user enters a negative or high value
|
|
||||||
fixHSB = function (hsb) {
|
|
||||||
return {
|
|
||||||
h: Math.min(360, Math.max(0, hsb.h)),
|
|
||||||
s: Math.min(100, Math.max(0, hsb.s)),
|
|
||||||
b: Math.min(100, Math.max(0, hsb.b))
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fixRGB = function (rgb) {
|
|
||||||
return {
|
|
||||||
r: Math.min(255, Math.max(0, rgb.r)),
|
|
||||||
g: Math.min(255, Math.max(0, rgb.g)),
|
|
||||||
b: Math.min(255, Math.max(0, rgb.b))
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fixHex = function (hex) {
|
|
||||||
var len = 6 - hex.length;
|
|
||||||
if (len > 0) {
|
|
||||||
var o = [];
|
|
||||||
for (var i=0; i<len; i++) {
|
|
||||||
o.push('0');
|
|
||||||
}
|
|
||||||
o.push(hex);
|
|
||||||
hex = o.join('');
|
|
||||||
}
|
|
||||||
return hex;
|
|
||||||
},
|
|
||||||
restoreOriginal = function () {
|
|
||||||
var cal = $(this).parent();
|
|
||||||
var col = cal.data('colpick').origColor;
|
|
||||||
cal.data('colpick').color = col;
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
setSelector(col, cal.get(0));
|
|
||||||
setHue(col, cal.get(0));
|
|
||||||
setNewColor(col, cal.get(0));
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
init: function (opt) {
|
|
||||||
opt = $.extend({}, defaults, opt||{});
|
|
||||||
//Set color
|
|
||||||
if (typeof opt.color == 'string') {
|
|
||||||
opt.color = hexToHsb(opt.color);
|
|
||||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
|
||||||
opt.color = rgbToHsb(opt.color);
|
|
||||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
|
||||||
opt.color = fixHSB(opt.color);
|
|
||||||
} else {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
//For each selected DOM element
|
|
||||||
return this.each(function () {
|
|
||||||
//If the element does not have an ID
|
|
||||||
if (!$(this).data('colpickId')) {
|
|
||||||
var options = $.extend({}, opt);
|
|
||||||
options.origColor = opt.color;
|
|
||||||
//Generate and assign a random ID
|
|
||||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
|
||||||
$(this).data('colpickId', id);
|
|
||||||
//Set the tpl's ID and get the HTML
|
|
||||||
var cal = $(tpl).attr('id', id);
|
|
||||||
//Add class according to layout
|
|
||||||
cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
|
|
||||||
//Add class if the color scheme is not default
|
|
||||||
if(options.colorScheme != 'light') {
|
|
||||||
cal.addClass('colpick_'+options.colorScheme);
|
|
||||||
}
|
|
||||||
//Setup submit button
|
|
||||||
cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
|
|
||||||
//Setup input fields
|
|
||||||
options.fields = cal.find('input').change(change).blur(blur).focus(focus);
|
|
||||||
cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
|
|
||||||
//Setup hue selector
|
|
||||||
options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
|
|
||||||
options.selectorIndic = options.selector.find('div.colpick_selector_outer');
|
|
||||||
//Store parts of the plugin
|
|
||||||
options.el = this;
|
|
||||||
options.hue = cal.find('div.colpick_hue_arrs');
|
|
||||||
huebar = options.hue.parent();
|
|
||||||
//Paint the hue bar
|
|
||||||
var UA = navigator.userAgent.toLowerCase();
|
|
||||||
var isIE = navigator.appName === 'Microsoft Internet Explorer';
|
|
||||||
var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
|
|
||||||
var ngIE = ( isIE && IEver < 10 );
|
|
||||||
var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
|
|
||||||
if(ngIE) {
|
|
||||||
var i, div;
|
|
||||||
for(i=0; i<=11; i++) {
|
|
||||||
div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
|
|
||||||
huebar.append(div);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
stopList = stops.join(',');
|
|
||||||
huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
|
|
||||||
}
|
|
||||||
cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
|
|
||||||
options.newColor = cal.find('div.colpick_new_color');
|
|
||||||
options.currentColor = cal.find('div.colpick_current_color');
|
|
||||||
//Store options and fill with default color
|
|
||||||
cal.data('colpick', options);
|
|
||||||
fillRGBFields(options.color, cal.get(0));
|
|
||||||
fillHSBFields(options.color, cal.get(0));
|
|
||||||
fillHexFields(options.color, cal.get(0));
|
|
||||||
setHue(options.color, cal.get(0));
|
|
||||||
setSelector(options.color, cal.get(0));
|
|
||||||
setCurrentColor(options.color, cal.get(0));
|
|
||||||
setNewColor(options.color, cal.get(0));
|
|
||||||
//Append to body if flat=false, else show in place
|
|
||||||
if (options.flat) {
|
|
||||||
cal.appendTo(this).show();
|
|
||||||
cal.css({
|
|
||||||
position: 'relative',
|
|
||||||
display: 'block'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
cal.appendTo(document.body);
|
|
||||||
$(this).on(options.showEvent, show);
|
|
||||||
cal.css({
|
|
||||||
position:'absolute'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//Shows the picker
|
|
||||||
showPicker: function() {
|
|
||||||
return this.each( function () {
|
|
||||||
if ($(this).data('colpickId')) {
|
|
||||||
show.apply(this);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//Hides the picker
|
|
||||||
hidePicker: function() {
|
|
||||||
return this.each( function () {
|
|
||||||
if ($(this).data('colpickId')) {
|
|
||||||
$('#' + $(this).data('colpickId')).hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//Sets a color as new and current (default)
|
|
||||||
setColor: function(col, setCurrent) {
|
|
||||||
setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
|
|
||||||
if (typeof col == 'string') {
|
|
||||||
col = hexToHsb(col);
|
|
||||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
|
||||||
col = rgbToHsb(col);
|
|
||||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
|
||||||
col = fixHSB(col);
|
|
||||||
} else {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
return this.each(function(){
|
|
||||||
if ($(this).data('colpickId')) {
|
|
||||||
var cal = $('#' + $(this).data('colpickId'));
|
|
||||||
cal.data('colpick').color = col;
|
|
||||||
cal.data('colpick').origColor = col;
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
setHue(col, cal.get(0));
|
|
||||||
setSelector(col, cal.get(0));
|
|
||||||
|
|
||||||
setNewColor(col, cal.get(0));
|
|
||||||
cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]);
|
|
||||||
if(setCurrent) {
|
|
||||||
setCurrentColor(col, cal.get(0));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}();
|
|
||||||
//Color space convertions
|
|
||||||
var hexToRgb = function (hex) {
|
|
||||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
|
||||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
|
||||||
};
|
|
||||||
var hexToHsb = function (hex) {
|
|
||||||
return rgbToHsb(hexToRgb(hex));
|
|
||||||
};
|
|
||||||
var rgbToHsb = function (rgb) {
|
|
||||||
var hsb = {h: 0, s: 0, b: 0};
|
|
||||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
|
||||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
|
||||||
var delta = max - min;
|
|
||||||
hsb.b = max;
|
|
||||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
|
||||||
if (hsb.s != 0) {
|
|
||||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
|
||||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
|
||||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
|
||||||
} else hsb.h = -1;
|
|
||||||
hsb.h *= 60;
|
|
||||||
if (hsb.h < 0) hsb.h += 360;
|
|
||||||
hsb.s *= 100/255;
|
|
||||||
hsb.b *= 100/255;
|
|
||||||
return hsb;
|
|
||||||
};
|
|
||||||
var hsbToRgb = function (hsb) {
|
|
||||||
var rgb = {};
|
|
||||||
var h = hsb.h;
|
|
||||||
var s = hsb.s*255/100;
|
|
||||||
var v = hsb.b*255/100;
|
|
||||||
if(s == 0) {
|
|
||||||
rgb.r = rgb.g = rgb.b = v;
|
|
||||||
} else {
|
|
||||||
var t1 = v;
|
|
||||||
var t2 = (255-s)*v/255;
|
|
||||||
var t3 = (t1-t2)*(h%60)/60;
|
|
||||||
if(h==360) h = 0;
|
|
||||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
|
||||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
|
||||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
|
||||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
|
||||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
|
||||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
|
||||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
|
||||||
}
|
|
||||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
|
||||||
};
|
|
||||||
var rgbToHex = function (rgb) {
|
|
||||||
var hex = [
|
|
||||||
rgb.r.toString(16),
|
|
||||||
rgb.g.toString(16),
|
|
||||||
rgb.b.toString(16)
|
|
||||||
];
|
|
||||||
$.each(hex, function (nr, val) {
|
|
||||||
if (val.length == 1) {
|
|
||||||
hex[nr] = '0' + val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return hex.join('');
|
|
||||||
};
|
|
||||||
var hsbToHex = function (hsb) {
|
|
||||||
return rgbToHex(hsbToRgb(hsb));
|
|
||||||
};
|
|
||||||
$.fn.extend({
|
|
||||||
colpick: colpick.init,
|
|
||||||
colpickHide: colpick.hidePicker,
|
|
||||||
colpickShow: colpick.showPicker,
|
|
||||||
colpickSetColor: colpick.setColor
|
|
||||||
});
|
|
||||||
$.extend({
|
|
||||||
colpick:{
|
|
||||||
rgbToHex: rgbToHex,
|
|
||||||
rgbToHsb: rgbToHsb,
|
|
||||||
hsbToHex: hsbToHex,
|
|
||||||
hsbToRgb: hsbToRgb,
|
|
||||||
hexToHsb: hexToHsb,
|
|
||||||
hexToRgb: hexToRgb
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})(jQuery);
|
|
||||||
1187
js/main.js
1187
js/main.js
File diff suppressed because it is too large
Load diff
13546
package-lock.json
generated
Normal file
13546
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
26
package.json
Normal file
26
package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "minecraft-armorstand",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"autoprefixer": "^9.8.6",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"postcss": "^7.0.35",
|
||||||
|
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
|
||||||
|
"vue": "^3.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^7.0.0-0"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
postcss.config.js
Normal file
9
postcss.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
const autoprefixer = require("autoprefixer");
|
||||||
|
const tailwindcss = require("tailwindcss");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require("tailwindcss"),
|
||||||
|
require("autoprefixer"),
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>Minecraft Armorstand</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but Minecraft Armorstand doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
src/App.vue
Normal file
9
src/App.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<h1>Hello Vue!</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
3
src/assets/tailwind.css
Normal file
3
src/assets/tailwind.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
5
src/main.js
Normal file
5
src/main.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import "./assets/tailwind.css";
|
||||||
|
|
||||||
|
createApp(App).mount("#app");
|
||||||
176
style.css
176
style.css
|
|
@ -1,176 +0,0 @@
|
||||||
html, body{
|
|
||||||
height: 100%;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas{
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
background-color: #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
div{
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1{
|
|
||||||
text-align: center;
|
|
||||||
font-family: "Oswald", sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
background-color: rgb(230, 230, 230);
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgb(220, 220, 220);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: rgb(200, 200, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
|
|
||||||
outline:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"], select{
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
input[type="text"]:not(:last-child){
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
#customname{
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gl{
|
|
||||||
width: 60%;
|
|
||||||
height: 100%;
|
|
||||||
float: left;
|
|
||||||
cursor: move;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card{
|
|
||||||
background-color: #ffffff;
|
|
||||||
box-shadow: 0 2px 4px #555555;
|
|
||||||
margin: 0.5em;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right{
|
|
||||||
margin-left: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding{
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.underline{
|
|
||||||
border-bottom: 1px dashed #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code{
|
|
||||||
word-wrap: break-word;
|
|
||||||
padding: 1em;
|
|
||||||
font-family: monospace;
|
|
||||||
background-color: #37474f;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
#code-copy-hint{
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-align: right;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots .first{
|
|
||||||
width: 60px;
|
|
||||||
display: inline-block;
|
|
||||||
clear: left;
|
|
||||||
text-align: right;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots span{
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots div{
|
|
||||||
height: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots div + div{
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots input[type=checkbox]{
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#disabledslots .sprite{
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: url("images/slots.png");
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Things needed for colorpicker */
|
|
||||||
.colorfield{
|
|
||||||
display: inline-block;
|
|
||||||
width: 15%;
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 1em;
|
|
||||||
background-color: #ff8800;
|
|
||||||
border: 1px solid #777;
|
|
||||||
}
|
|
||||||
|
|
||||||
.equipment{
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotations{
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotations tr td:nth-child(1){
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotations input{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
5
vue.config.js
Normal file
5
vue.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
publicPath: process.env.NODE_ENV === 'production'
|
||||||
|
? '/test/'
|
||||||
|
: '/'
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue