diff options
| author | laurence <laurenceseo99@gmail.com> | 2013-09-13 06:55:10 +0800 |
|---|---|---|
| committer | laurence <laurenceseo99@gmail.com> | 2013-09-13 06:55:10 +0800 |
| commit | 08810a8fe7f6d2501ca017c2e87e9cdcbace54e5 (patch) | |
| tree | bb2ace996ed7791167894ed4cdca072d772546a3 | |
| parent | b025a948e53ab8476884b4fb2eca5697e4255e1f (diff) | |
laurence
| -rw-r--r-- | colors.htm | 85 | ||||
| -rw-r--r-- | css/style.css | 3 | ||||
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | js/colorpicker.js | 50 | ||||
| -rw-r--r-- | js/jquery.remember-state.js | 193 | ||||
| -rw-r--r-- | js/jquery.remember-state.pack.js | 1 |
6 files changed, 306 insertions, 41 deletions
@@ -2,50 +2,71 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/style.css"> -<link href='http://fonts.googleapis.com/css?family=Chivo:400italic' rel='stylesheet' type='text/css'> </head> <body> <div id="colorpicker"> <div id="container"> <div id="d0" class="colors"></div> </div> - <div id="colornames">CLICK TO CHOOSE THE COLOR</div> + <div id="colornames">CLICK TO CHOOSE THE COLOR</div> <div id="switches"> - <span class="subtitle">OPTIONS</span> - <div id="hexswitch" class="theswitches">CLICK TO SWITCH TO RGB VALUES</div> - <br /> - <div id="infoswitch" class="theswitches">CLICK TO TOGGLE PALATE INFO<span id="infospace">(NONE)</span></div> - <br /> - <div id="backgroundswitch" class="theswitches">BACKGROUNDS...</div> - <div id="bg_menu" class="hide"> - <div class="bgOptions" id="bg1"><span id="bg1text">Dithered</span></div> - <div class="bgOptions" id="bg2">Black</div> - <div class="bgOptions" id="bg3">White</div> - <div class="bgOptions" id="bg4">Gray</div> - <div class="bgOptions" id="bg5"> - <label for="chooseyourown">Choose your own (add a Url)</label> - <input type="text" value="" id="bgURI"> - </div> - <div class="bgOptions" id="selectors"></div> - </div> - <br /> - <div id="preview" style="width: 206px; height: 127px; background-color: rgb(171, 171, 171); border-style: none;"></div> - <div class="subtitle">YOU WILL CHOOSE:<br /> - <input type="text" id="namespace" class="subtitle" /> - <span id="submitvalue" class="defaulttrans">SUBMIT</span></span> - </div> - <br /> - <span id="transparent">to choose transparent as a color, click - <span id="transbutton" class="defaulttrans">HERE</span><span id="extra" class="smalltitle"></span> - </span> - </div> + <form action="" method="post"> + <span class="subtitle">OPTIONS</span> + <div id="hexswitch" class="theswitches">CLICK TO SWITCH TO RGB VALUES</div> + <input type="hidden" name="opt_hexswitch" id="opt_hexswitch" /> + <br /> + <div id="infoswitch" class="theswitches">CLICK TO TOGGLE PALATE INFO<span id="infospace">(NONE)</span></div> + <input type="hidden" name="opt_infoswitch" id="opt_infoswitch" /> + <br /> + <div id="backgroundswitch" class="theswitches">BACKGROUNDS...</div> + <div id="bg_menu" class="hide"> + <div class="bgOptions" id="bg1"><span id="bg1text">Dithered</span></div> + <div class="bgOptions" id="bg2">Black</div> + <div class="bgOptions" id="bg3">White</div> + <div class="bgOptions" id="bg4">Gray</div> + <div class="bgOptions" id="bg5"> + <label for="chooseyourown">Choose your own (add a Url)</label> + <input type="text" value="" id="bgURI" name="bgURI"> + <input type="hidden" name="opt_bgURI" id="opt_bgURI" /> + </div> + <div class="bgOptions" id="selectors"></div> + </div> + <input type="hidden" name="opt_bgColor" id="opt_bgColor" /> + <br /> + <div id="preview" style="width: 206px; height: 127px; background-color: rgb(171, 171, 171); border-style: none;"></div> + <div class="subtitle">YOU WILL CHOOSE:<br /> + <input type="text" id="namespace" name="namespace" class="subtitle" /> + <span id="submitvalue" class="defaulttrans">SUBMIT</span></span> + </div> + <br /> + <span id="transparent">to choose transparent as a color, click + <span id="transbutton" class="defaulttrans">HERE</span><span id="extra" class="smalltitle"></span> + </span> + <span id="noticeDlg"></span> + </form> + </div> <div id="vasebackground"></div> <div id="vase"></div> <div id="vaseshim"></div> - </div> - <script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script> + </div> + <script type="text/javascript" src="./js/jquery-1.10.1.js"></script> <script type="text/javascript" src="./js/data.js"></script> <script type="text/javascript" src="./js/colorpicker.js"></script> <script type="text/javascript" src="./js/jquery.fancybox.js?v=2.1.5"></script> + <script type="text/javascript" src="./js/jquery.remember-state.js"></script> + <script type="text/javascript"> + $('#submitvalue').click(function(){ + $("form").rememberState("save"); + }); + $(function() { + $("form").rememberState({ + objName: "color_info", + noticeDialog:$('#noticeDlg').html("<a href=\"#\" id=\"linkrestore\">Restore</a>"), + noticeSelector:'.remember_state' + }).submit(false); + $('#linkrestore').click(); + ColorPicker.loadColorStorage(); + }); + </script> </body> </html> diff --git a/css/style.css b/css/style.css index 6cc8421..7b944cb 100644 --- a/css/style.css +++ b/css/style.css @@ -202,4 +202,7 @@ label { #controls a:hover{ cursor:pointer; text-decoration:underline; +} +#noticeDlg { + display:none; }
\ No newline at end of file @@ -2,8 +2,8 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/style.css"> -<link href='http://fonts.googleapis.com/css?family=Chivo:400italic' rel='stylesheet' type='text/css'> -<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script> +<script type="text/javascript" src="./js/jquery-1.10.1.js"></script> +<script type="text/javascript" src="./js/jquery.remember-state.js"></script> <script type="text/javascript" src="./js/jquery.fancybox.js?v=2.1.5"></script> <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox.css?v=2.1.5" media="screen" /> </head> @@ -35,10 +35,10 @@ <br /> <span class="shim"></span> - <label><a id="lnkcolorbox" style="font-size: 10px">List of Color Names</a></label> + <label><a id="lnkcolorbox" class="remember_state" style="font-size: 10px">List of Color Names</a></label> <span class="shim"></span> - <label>hue <small>(0-200)</small></label> - <input type="text" id="img-hue" value=""> + <label>hue <small>(0-200)</small></label> + <input type="text" id="img-hue" value=""> <span class="shim"></span> <label>flip horizontally?</label> @@ -73,11 +73,12 @@ type : 'iframe', closeBtn : false, padding : 5, - beforeShow : function(){ + beforeShow : function(){ $('.fancybox-iframe').contents().find('#submitvalue').click(function(){ + $('.fancybox-iframe').contents().find('form').submit(); $.fancybox.close(); }); - }, + }, beforeClose : function(){ x = $('.fancybox-iframe').contents().find('#namespace').val(); }, diff --git a/js/colorpicker.js b/js/colorpicker.js index 785d430..574349f 100644 --- a/js/colorpicker.js +++ b/js/colorpicker.js @@ -87,12 +87,14 @@ var ColorPicker = { var key = event.which || event.keyCode;
if(key === 13) {
$('#colorpicker').css({'background-image':"url('" + $('#bgURI').val() + "')"});
+ $('#opt_bgURI').val($('#bgURI').val());
$('#bgURI').val('');
}
});
}else{
$('#colorpicker').css({'background-image':'none','background-color':$('#' + this.id).html().toLowerCase()});
- }
+ }
+ $('#opt_bgColor').val(this.id);
});
//--------event handler over colorpanel-------
var firstwidth;
@@ -152,6 +154,43 @@ var ColorPicker = { });
}
},
+ loadColorStorage: function() {
+ var opts = $('#opt_hexswitch').val();
+ names = false;
+ rgbs = false;
+ hexes = false;
+ if(opts == 'names') {
+ selectedname = namespace.val();
+ selectedrgb = hextorgb[nametohex[selectedname]];
+ hexswitch.html('CLICK TO SWITCH TO RGB VALUES');
+ rgbs = true;
+ }else if(opts == 'rgbs') {
+ selectedname = rgbtoname[namespace.val()];
+ selectedrgb = namespace.val();
+ hexes = true;
+ hexswitch.html('CLICK TO SWITCH TO HEX VALUES')
+ }else if(opts == 'hexes') {
+ names = true;
+ selectedrgb = hextorgb[namespace.val()];
+ selectedname = rgbtoname[selectedrgb];
+ hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');
+ }
+ colornames.html(selectedname);
+ preview.css({'background-color':selectedrgb,'border-style':'none'});
+ vasebackground.css('background-color',selectedrgb);
+ infostate = parseInt($('#opt_infoswitch').val());
+ ColorPicker.switchcolorinfo();
+ var bgOpt = $('#opt_bgColor').val();
+ if (bgOpt == "bg1")
+ {
+ $('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'});
+ }else if(bgOpt == "bg5"){
+ $('#colorpicker').css({'background-image':"url('" + $('#opt_bgURI').val() + "')"});
+ }else{
+ $('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()});
+ }
+ $('#bgURI').val($('#opt_bgURI').val());
+ },
switchhovercss: function(sel, uno) {
var chng = {};
chng['color'] = 'white';
@@ -191,6 +230,7 @@ var ColorPicker = { namespace.val(selectedname);
names = false;
rgbs = true;
+ $('#opt_hexswitch').val('names');
}else if(hexes == true) {
rgbs = false;
names = false;
@@ -198,6 +238,7 @@ var ColorPicker = { namespace.val(rgbtohex[selectedrgb]);
hexes = false;
names = true;
+ $('#opt_hexswitch').val('hexes');
}else if(rgbs == true) {
names = false;
hexes = false;
@@ -205,6 +246,7 @@ var ColorPicker = { namespace.val(selectedrgb)
rgbs = false;
hexes = true;
+ $('#opt_hexswitch').val('rgbs');
}
},
putitin: function() {
@@ -292,22 +334,26 @@ var ColorPicker = { }
infostate = 2;
infospace.html('(NAMES)');
+ $('#opt_infoswitch').val('1');
}else if(infostate == 0) {
$('.colors').html("");
infostate = 1;
infospace.html('(NONE)');
+ $('#opt_infoswitch').val('0');
}else if(infostate == 2) {
for(var i=0; i < color_values.length; i++) {
$('#d' + i).html(nametohex[divtoname['#d' + i]]);
}
infostate = 3;
infospace.html('(HEXES)');
+ $('#opt_infoswitch').val('2');
}else if(infostate == 3) {
for(var i=0; i < color_values.length; i++) {
$('#d' + i).html(hextorgb[nametohex[divtoname['#d' + i]]]);
}
- infostate = 0;
+ infostate = 0;
infospace.html('(RGBS)');
+ $('#opt_infoswitch').val('3');
}
},
show: function() {
diff --git a/js/jquery.remember-state.js b/js/jquery.remember-state.js new file mode 100644 index 0000000..d695fbd --- /dev/null +++ b/js/jquery.remember-state.js @@ -0,0 +1,193 @@ +(function($) { + /* jQuery form remember state plugin + Name: rememberState + Version: 1.3.2 + Description: When called on a form element, localStorage is used to + remember the values that have been input up to the point of either + saving or unloading. (closing window, navigating away, etc.) If + localStorage isn't available, nothing is bound or stored. + The plugin looks for an element with a class of remember_state to show + a note indicating there is stored data that can be repopulated by clicking + on the anchor within the remember_state container. If the element doesn't + exist, it is created and prepended to the form. + Usage: $("form").rememberState("my_object_name"); + Notes: To trigger the deletion of a form's localStorage object from + outside the plugin, trigger the reset_state event on the form element + by using $("form").trigger("reset_state"); + */ + if (!window.localStorage || !window.JSON) { + if (console && console.log) { + !window.localStorage && console.log("ERROR: you browser does not support" + + " localStorage (use this polyfill https://gist.github.com/350433)"); + !window.JSON&& console.log("ERROR: you browser does not support" + + " JSON (use this polyfill http://bestiejs.github.com/json3/)"); + } + return $.fn.rememberState = function() { return this; }; + } + + var remember_state = { + name: "rememberState", + clearOnSubmit: true, + noticeDialog: (function() { + return $("<p />", {"class": "remember_state"}) + .html('Do you want to <a href="#">restore your previously entered info</a>?'); + })(), + ignore: null, + noticeSelector: ".remember_state", + use_ids: false, + objName: false, + clickNotice: function(e) { + var data = JSON.parse(localStorage.getItem(e.data.instance.objName)), + $f = $(this).closest("form"), + $e; + for (var i in data) { + $e = $f.find("[name=\"" + data[i].name + "\"]"); + if ($e.is(":radio, :checkbox")) { + $e.filter("[value=" + data[i].value + "]").prop("checked", true); + } + else if ($e.is("select")) { + $e.find("[value=" + data[i].value + "]").prop("selected", true); + } + else { + $e.val(data[i].value); + } + $e.change(); + } + e.data.instance.noticeDialog.remove(); + e.preventDefault(); + }, + chooseStorageProp: function() { + if (this.$el.length > 1) { + if (console && console.warn) { + console.warn("WARNING: Cannot process more than one form with the same" + + " object. Attempting to use form IDs instead."); + } + this.objName = this.$el.attr("id"); + } + }, + errorNoID: function() { + if (console && console.log) { + console.log("ERROR: No form ID or object name. Add an ID or pass" + + " in an object name"); + } + }, + saveState: function(e) { + var instance = e.data.instance; + var values = instance.$el.serializeArray(); + // jQuery doesn't currently support datetime-local inputs despite a + // comment by dmethvin stating the contrary: + // http://bugs.jquery.com/ticket/5667 + // Manually storing input type until jQuery is patched + instance.$el.find("input[type='datetime-local']").each(function() { + var $i = $(this); + values.push({ name: $i.attr("name"), value: $i.val() }); + }); + values = instance.removeIgnored(values); + values.length && internals.setObject(instance.objName, values); + }, + save: function() { + var instance = this; + if (!this.saveState) { + instance = this.data(remember_state.name); + } + instance.saveState({ data: { instance: instance } }); + }, + removeIgnored: function(values) { + var ignore = this.ignore; + if (!ignore) { return values; } + $.each(values, function(i, input) { + if ($.inArray(input.name, ignore) !== -1) { + values[i] = false; + } + }); + values = $.grep(values, function(val) { return val; }); + return values; + }, + bindNoticeDialog: function() { + if (!this.noticeDialog.length || !this.noticeDialog.jquery) { + return; + } + this.noticeDialog.find("a").bind("click." + this.name, { + instance: this + }, this.clickNotice); + }, + setName: function() { + this.objName = this.objName || this.$el.attr("id"); + if (!this.objName) { this.errorNoID(); } + }, + bindResetEvents: function() { + if (this.clearOnSubmit) { + this.$el.bind("submit." + this.name, function() { + this.$el.trigger("reset_state"); + $(window).unbind("unload." + this.name); + }); + } + + this.$el.bind("reset_state." + this.name, function() { + localStorage.removeItem(this.objName); + }); + this.$el.find(":reset").bind("click." + this.name, function() { + $(this).closest("form").trigger("reset_state"); + }); + }, + createNoticeDialog: function() { + if (localStorage[this.objName]) { + if (this.noticeDialog.length && this.noticeDialog.jquery) { + this.noticeDialog.prependTo(this.$el); + } + else { + this.$el.find(this.noticeSelector).show(); + } + } + }, + destroy: function(destroy_local_storage) { + var namespace = "." + this.name; + this.$el.unbind(namespace).find(":reset").unbind(namespace); + $(window).unbind(namespace); + destroy_local_storage && localStorage.removeItem(this.objName); + }, + init: function() { + this.bindNoticeDialog(); + this.setName(); + + if (!this.objName) { return; } + + this.bindResetEvents(); + this.createNoticeDialog(); + + $(window).bind("unload." + this.name, { instance: this }, this.saveState); + } + }; + + var internals = { + setObject: function(key, value) { localStorage[key] = JSON.stringify(value); }, + getObject: function(key) { return JSON.parse(localStorage[key]); }, + createPlugin: function(plugin) { + $.fn[plugin.name] = function(opts) { + var $els = this, + method = $.isPlainObject(opts) || !opts ? "" : opts, + args = arguments; + if (method && plugin[method]) { + $els.each(function(i) { + plugin[method].apply($els.eq(i).data(plugin.name), Array.prototype.slice.call(args, 1)); + }); + } + else if (!method) { + $els.each(function(i) { + var plugin_instance = $.extend(true, { + $el: $els.eq(i) + }, plugin, opts); + $els.eq(i).data(plugin.name, plugin_instance); + plugin_instance.init(); + }); + } + else { + $.error('Method ' + method + ' does not exist on jQuery.' + plugin.name); + } + return $els; + }; + } + }; + + internals.createPlugin(remember_state); +})(jQuery); diff --git a/js/jquery.remember-state.pack.js b/js/jquery.remember-state.pack.js new file mode 100644 index 0000000..3aec315 --- /dev/null +++ b/js/jquery.remember-state.pack.js @@ -0,0 +1 @@ +eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(2($){4(!k.h||!k.n){4(8&&8.s){!k.h&&8.s("B: C L D E M"+" h (F 0 N 1q://1r.O.P/1s)");!k.n&&8.s("B: C L D E M"+" n (F 0 N 1t://1u.O.P/1v/)")}9 $.Q.R=2(){9 0}}6 f={3:"R",S:w,j:(2(){9 $("<p />",{"1w":"T"}).1x(\'1y C 1z U <a 1A="#">1B 1C 1D 1E 1F</a>?\')})(),V:1G,W:".T",1H:G,7:G,X:2(e){6 a=n.Y(h.1I(e.l.o.7)),$f=$(0).Z("t"),$e;1J(6 i 10 a){$e=$f.m("[3=\\""+a[i].3+"\\"]");4($e.11(":1K, :1L")){$e.1M("[q="+a[i].q+"]").12("1N",w)}u 4($e.11("1O")){$e.m("[q="+a[i].q+"]").12("1P",w)}u{$e.13(a[i].q)}$e.1Q()}e.l.o.j.1R();e.1S()},1T:2(){4(0.$5.x>1){4(8&&8.14){8.14("1U: 1V 1W 1X 1Y 1Z t 20 21 22"+" H. 23 U F t 24 25.")}0.7=0.$5.I("15")}},16:2(){4(8&&8.s){8.s("B: 26 t 17 18 H 3. 27 19 17 18 28"+" 10 19 H 3")}},y:2(e){6 b=e.l.o;6 c=b.$5.29();b.$5.m("2a[2b=\'2c-2d\']").z(2(){6 a=$(0);c.2e({3:a.I("3"),q:a.13()})});c=b.1a(c);c.x&&g.1b(b.7,c)},2f:2(){6 a=0;4(!0.y){a=0.l(f.3)}a.y({l:{o:a}})},1a:2(b){6 c=0.V;4(!c){9 b}$.z(b,2(i,a){4($.2g(a.3,c)!==-1){b[i]=G}});b=$.2h(b,2(a){9 a});9 b},1c:2(){4(!0.j.x||!0.j.1d){9}0.j.m("a").v("1e."+0.3,{o:0},0.X)},1f:2(){0.7=0.7||0.$5.I("15");4(!0.7){0.16()}},1g:2(){4(0.S){0.$5.v("2i."+0.3,2(){0.$5.1h("J");$(k).A("1i."+0.3)})}0.$5.v("J."+0.3,2(){h.1j(0.7)});0.$5.m(":1k").v("1e."+0.3,2(){$(0).Z("t").1h("J")})},1l:2(){4(h[0.7]){4(0.j.x&&0.j.1d){0.j.2j(0.$5)}u{0.$5.m(0.W).2k()}}},2l:2(a){6 b="."+0.3;0.$5.A(b).m(":1k").A(b);$(k).A(b);a&&h.1j(0.7)},1m:2(){0.1c();0.1f();4(!0.7){9}0.1g();0.1l();$(k).v("1i."+0.3,{o:0},0.y)}};6 g={1b:2(a,b){h[a]=n.2m(b)},2n:2(a){9 n.Y(h[a])},1n:2(d){$.Q[d.3]=2(b){6 c=0,r=$.2o(b)||!b?"":b,1o=2p;4(r&&d[r]){c.z(2(i){d[r].2q(c.K(i).l(d.3),2r.2s.2t.2u(1o,1))})}u 4(!r){c.z(2(i){6 a=$.2v(w,{$5:c.K(i)},d,b);c.K(i).l(d.3,a);a.1m()})}u{$.2w(\'2x \'+r+\' D E 2y 2z 1p.\'+d.3)}9 c}}};g.1n(f)})(1p);',62,160,'this||function|name|if|el|var|objName|console|return||||||||localStorage||noticeDialog|window|data|find|JSON|instance||value|method|log|form|else|bind|true|length|saveState|each|unbind|ERROR|you|does|not|use|false|object|attr|reset_state|eq|browser|support|polyfill|github|com|fn|rememberState|clearOnSubmit|remember_state|to|ignore|noticeSelector|clickNotice|parse|closest|in|is|prop|val|warn|id|errorNoID|ID|or|an|removeIgnored|setObject|bindNoticeDialog|jquery|click|setName|bindResetEvents|trigger|unload|removeItem|reset|createNoticeDialog|init|createPlugin|args|jQuery|https|gist|350433|http|bestiejs|json3|class|html|Do|want|href|restore|your|previously|entered|info|null|use_ids|getItem|for|radio|checkbox|filter|checked|select|selected|change|remove|preventDefault|chooseStorageProp|WARNING|Cannot|process|more|than|one|with|the|same|Attempting|IDs|instead|No|Add|pass|serializeArray|input|type|datetime|local|push|save|inArray|grep|submit|prependTo|show|destroy|stringify|getObject|isPlainObject|arguments|apply|Array|prototype|slice|call|extend|error|Method|exist|on'.split('|'),0,{})) |