├── LICENSE ├── README.md ├── assets ├── customizer-post-meta.gif ├── customizer-toggle-more.gif ├── logo-width.gif ├── palette-or-no-palette.jpg ├── svg-logo.gif └── wcag-color-contrast.gif ├── css └── customizer-range-value-control.css ├── functions.php ├── js ├── customizer-color-control-change-config.js ├── customizer-preview.js ├── customizer-range-value-control.js ├── customizer-toggle-control.js ├── customizer-validate-wcag-color-contrast.js └── image-picker │ ├── image-picker.css │ ├── image-picker.js │ └── image-picker.min.js ├── languages └── 2016-customizer-demo.pot ├── pure-css-toggle-buttons ├── README.txt ├── license.txt └── pure-css-togle-buttons.css ├── screenshot.png ├── style.css ├── svg.json └── svg ├── logo01.svg └── logo02.svg /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | {one line to give the program's name and a brief idea of what it does.} 635 | Copyright (C) {year} {name of author} 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | {project} Copyright (C) {year} {fullname} 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A Customizer Demo Theme 2 | 3 | This Twenty Sixteen child theme demonstrate the following **proof of concepts**: 4 | 5 | 1. How to use the customizer postmessage transport and a preview script to toggle complex theme elements on or off. ([learn more](https://soderlind.no/wordpress-customizer-demo-in-twenty-sixteen-toggle-post-meta-on-or-off/)) 6 | 1. How to select and add an SVG logo using [Customizer SVG Picker Option](https://github.com/soderlind/class-customizer-svg-picker-option) 7 | 1. Replaced WordPress customizer checkbox control with my [Customizer Toggle Control](https://github.com/soderlind/class-customizer-toggle-control) 8 | 1. Toggle [visibility](https://github.com/soderlind/2016-customizer-demo/blob/master/js/customizer-toggle-control.js#L29-L52) 9 | 1. Replace the range control with a [range & value control](https://github.com/soderlind/class-customizer-range-value-control). 10 | 1. [Validate WCAG Color Contrast for Customizer Color Control](https://github.com/soderlind/customizer-validate-wcag-color-contrast) 11 | 1. [Change the config of the Customizer Color Control](https://github.com/soderlind/customizer-color-control-change-config) 12 | 13 | 14 | ## Prerequisite 15 | 16 | This demo is implemented as a child theme to [Twenty Sixteen](https://wordpress.org/themes/twentysixteen/), so Twenty Sixteen must be installed. 17 | 18 | ## Installation 19 | 20 | You know the drill, [download](https://github.com/soderlind/2016-customizer-demo/archive/master.zip), install and activate the theme. 21 | 22 | ## Use 23 | 24 | ### Toggle complex theme elements on or off 25 | 26 | 27 | 28 | ### SVG logo Custom Customizer Component 29 | 30 | 31 | 32 | ### Toggle visibility 33 | 34 | 35 | 36 | ### Range & Value Control 37 | 38 | 39 | 40 | ### Validate WCAG Color Contrast for Customizer Color Control 41 | 42 | 43 | 44 | ### Change the config of the Customizer Color Control 45 | 46 | 47 | 48 | ## Copyright and License 49 | 50 | **2016-customizer-demo** is copyright 2016 Per Soderlind 51 | 52 | **2016-customizer-demo** is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version. 53 | 54 | **2016-customizer-demo** is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the [GNU General Public License](LICENSE) for more details. 55 | 56 | You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see http://www.gnu.org/licenses/. 57 | -------------------------------------------------------------------------------- /assets/customizer-post-meta.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/assets/customizer-post-meta.gif -------------------------------------------------------------------------------- /assets/customizer-toggle-more.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/assets/customizer-toggle-more.gif -------------------------------------------------------------------------------- /assets/logo-width.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/assets/logo-width.gif -------------------------------------------------------------------------------- /assets/palette-or-no-palette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/assets/palette-or-no-palette.jpg -------------------------------------------------------------------------------- /assets/svg-logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/assets/svg-logo.gif -------------------------------------------------------------------------------- /assets/wcag-color-contrast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/assets/wcag-color-contrast.gif -------------------------------------------------------------------------------- /css/customizer-range-value-control.css: -------------------------------------------------------------------------------- 1 | /* 2 | *, *:before, *:after { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family: sans-serif; 8 | padding: 60px 20px; 9 | } 10 | 11 | @media (min-width: 600px) { 12 | body { 13 | padding: 60px; 14 | } 15 | } 16 | */ 17 | /*.range-slider { 18 | margin: 60px 0 0 0%; 19 | }*/ 20 | 21 | .range-slider { 22 | width: 100%; 23 | } 24 | 25 | .range-slider__range { 26 | -webkit-appearance: none; 27 | width: calc(100% - (95px)); 28 | height: 10px; 29 | border-radius: 5px; 30 | background: #d7dcdf; 31 | outline: none; 32 | padding: 0; 33 | margin: 0; 34 | } 35 | 36 | .range-slider__range::-webkit-slider-thumb { 37 | -webkit-appearance: none; 38 | appearance: none; 39 | width: 20px; 40 | height: 20px; 41 | border-radius: 50%; 42 | background: #0085ba; 43 | cursor: pointer; 44 | -webkit-transition: background .15s ease-in-out; 45 | transition: background .15s ease-in-out; 46 | } 47 | 48 | .range-slider__range::-webkit-slider-thumb:hover { 49 | background: #0085ba; 50 | } 51 | 52 | .range-slider__range:active::-webkit-slider-thumb { 53 | background: #0085ba; 54 | } 55 | 56 | .range-slider__range::-moz-range-thumb { 57 | width: 20px; 58 | height: 20px; 59 | border: 0; 60 | border-radius: 50%; 61 | background: #0085ba; 62 | cursor: pointer; 63 | -webkit-transition: background .15s ease-in-out; 64 | transition: background .15s ease-in-out; 65 | } 66 | 67 | .range-slider__range::-moz-range-thumb:hover { 68 | background: #0085ba; 69 | } 70 | 71 | .range-slider__range:active::-moz-range-thumb { 72 | background: #0085ba; 73 | } 74 | 75 | .range-slider__value { 76 | display: inline-block; 77 | position: relative; 78 | width: 60px; 79 | color: #fff; 80 | line-height: 20px; 81 | text-align: center; 82 | border-radius: 3px; 83 | background: #0085ba; 84 | padding: 5px 10px; 85 | margin-left: 8px; 86 | } 87 | 88 | /*.range-slider__value:after { 89 | position: absolute; 90 | top: 8px; 91 | left: -7px; 92 | width: 0; 93 | height: 0; 94 | border-top: 7px solid transparent; 95 | border-right: 7px solid #0085ba; 96 | border-bottom: 7px solid transparent; 97 | content: ''; 98 | }*/ 99 | 100 | ::-moz-range-track { 101 | background: #d7dcdf; 102 | border: 0; 103 | } 104 | 105 | input::-moz-focus-inner, input::-moz-focus-outer { 106 | border: 0; 107 | } 108 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | add_section( 'post_meta', array( 24 | 'title' => _x( 'Post Meta', 'customizer menu section', '2016-customizer-demo' ), 25 | 'priority' => 25, 26 | ) ); 27 | $wp_customize->add_setting( 'show_author', array( 28 | 'default' => '1', 29 | 'capability' => 'manage_options', 30 | 'transport' => 'postMessage', 31 | ) ); 32 | $wp_customize->add_control( new Customizer_Toggle_Control( $wp_customize, 'show_author', array( 33 | 'settings' => 'show_author', 34 | 'label' => _x( 'Show Author', 'customizer menu setting', '2016-customizer-demo' ), 35 | 'section' => 'post_meta', 36 | 'type' => 'ios', 37 | ) ) ); 38 | $wp_customize->add_setting( 'show_date', array( 39 | 'default' => '1', 40 | 'capability' => 'manage_options', 41 | 'transport' => 'postMessage', 42 | ) ); 43 | $wp_customize->add_control( new Customizer_Toggle_Control( $wp_customize, 'show_date', array( 44 | 'settings' => 'show_date', 45 | 'label' => _x( 'Show Date', 'customizer menu setting', '2016-customizer-demo' ), 46 | 'section' => 'post_meta', 47 | 'type' => 'ios', 48 | ) ) ); 49 | $wp_customize->add_section( 'svg_logo', array( 50 | 'title' => _x( 'SVG Logo', 'customizer menu section', '2016-customizer-demo' ), 51 | 'priority' => 10, 52 | ) ); 53 | $wp_customize->add_setting( 'svg_logo_remove', array( 54 | 'default' => true, 55 | 'capability' => 'edit_theme_options', 56 | 'transport' => 'postMessage', 57 | ) ); 58 | $wp_customize->add_control( new Customizer_Toggle_Control( $wp_customize, 'svg_logo_remove', array( 59 | 'label' => esc_html__( 'Display SVG logo', '2016-customizer-demo' ), 60 | 'section' => 'svg_logo', 61 | 'settings' => 'svg_logo_remove', 62 | 'type' => 'ios',// light, ios, flat 63 | ) ) ); 64 | $wp_customize->add_setting( 'svg_logo_url', array( 65 | 'default' => get_theme_mod( 'svg_logo_url', get_template_directory_uri() . '/svg/logo01.svg' ), 66 | 'capability' => 'edit_theme_options', 67 | 'transport' => 'postMessage', 68 | ) ); 69 | $wp_customize->add_control( new Customizer_SVG_Picker_Option( $wp_customize, 'svg_logo_url', array( 70 | 'section' => 'svg_logo', 71 | 'settings' => 'svg_logo_url', 72 | 'type' => 'svg', 73 | ) ) ); 74 | $wp_customize->add_setting( 'svg_logo_width', array( 75 | 'default' => get_theme_mod( 'svg_logo_width', '240' ), 76 | 'capability' => 'edit_theme_options', 77 | 'transport' => 'postMessage', 78 | ) ); 79 | 80 | $wp_customize->add_control( new Customizer_Range_Value_Control( $wp_customize, 'svg_logo_width', array( 81 | 'type' => 'range-value', 82 | 'section' => 'svg_logo', 83 | 'settings' => 'svg_logo_width', 84 | 'label' => __( 'Logo Width' ), 85 | 'input_attrs' => array( 86 | 'min' => 1, 87 | 'max' => 240, 88 | 'step' => 1, 89 | 'suffix' => 'px', 90 | ), 91 | ) ) ); 92 | 93 | } 94 | add_action( 'customize_register','customize_post_meta' ); 95 | 96 | /** 97 | * Enqueue customizer preview script. 98 | * 99 | * @author soderlind 100 | * @version 1.0.0 101 | */ 102 | function customize_preview_post_meta() { 103 | wp_enqueue_script( 'customize_preview_post_meta', get_stylesheet_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview', 'jquery' ), rand(), true ); 104 | } 105 | add_action( 'customize_preview_init', 'customize_preview_post_meta' ); 106 | 107 | /** 108 | * Load translations for 2016-customizer-demo 109 | * 110 | * @author soderlind 111 | * @version 1.0.0 112 | */ 113 | function customizer_demo_theme_setup() { 114 | load_theme_textdomain( '2016-customizer-demo', get_stylesheet_directory() . '/languages' ); 115 | } 116 | add_action( 'after_setup_theme', 'customizer_demo_theme_setup' ); 117 | 118 | /** 119 | * Extend the default twentysixteen_entry_meta() function with test for 'show_author' and 'show_date' 120 | * 121 | * @author soderlind 122 | * @version 1.0.0 123 | */ 124 | function twentysixteen_entry_meta() { 125 | if ( 'post' === get_post_type() && '1' == get_theme_mod( 'show_author', '1' ) ) { 126 | $author_avatar_size = apply_filters( 'twentysixteen_author_avatar_size', 49 ); 127 | printf( '%1$s%2$s %4$s', 128 | get_avatar( get_the_author_meta( 'user_email' ), $author_avatar_size ), 129 | _x( 'Author', 'Used before post author name.', '2016-customizer-demo' ), 130 | esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), 131 | get_the_author() 132 | ); 133 | } 134 | 135 | if ( in_array( get_post_type(), array( 'post', 'attachment' ) ) && '1' == get_theme_mod( 'show_date', '1' ) ) { 136 | twentysixteen_entry_date(); 137 | } 138 | 139 | $format = get_post_format(); 140 | if ( current_theme_supports( 'post-formats', $format ) ) { 141 | printf( '%1$s%3$s', 142 | sprintf( '%s ', _x( 'Format', 'Used before post format.', '2016-customizer-demo' ) ), 143 | esc_url( get_post_format_link( $format ) ), 144 | get_post_format_string( $format ) 145 | ); 146 | } 147 | 148 | if ( 'post' === get_post_type() ) { 149 | twentysixteen_entry_taxonomies(); 150 | } 151 | 152 | if ( ! is_singular() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) { 153 | echo ''; 154 | comments_popup_link( sprintf( __( 'Leave a comment on %s', '2016-customizer-demo' ), get_the_title() ) ); 155 | echo ''; 156 | } 157 | } 158 | 159 | 160 | /** 161 | * Add custom customizer control 162 | * Check for WP_Customizer_Control existence before adding custom control because WP_Customize_Control 163 | * is loaded on customizer page only 164 | * 165 | * @see _wp_customize_include() 166 | */ 167 | if ( class_exists( 'WP_Customize_Control' ) ) { 168 | /** 169 | * Custom customizer option control 170 | */ 171 | class Customizer_SVG_Picker_Option extends WP_Customize_Control { 172 | public $type = 'svg'; 173 | 174 | /** 175 | * Create a option list with URLs to SVG files. The SVG files are defined in svg.json 176 | * 177 | * @author soderlind 178 | * @version 1.1.0 179 | * @param string $selected_value 180 | * @return string select tag with options 181 | */ 182 | private function _list_svg( $selected_value = '' ) { 183 | $ret = ''; 184 | $svg_data_file = dirname( __FILE__ ) . '/svg.json'; 185 | if ( file_exists( $svg_data_file ) ) { 186 | $svg_data = file_get_contents( $svg_data_file ); 187 | $svgs = json_decode( $svg_data,true ); 188 | // TODO: add error control for `if ( null === $svgs && json_last_error() !== JSON_ERROR_NONE ) {}` 189 | 190 | $ret = ''; 199 | } 200 | return $ret; 201 | } 202 | 203 | /** 204 | * Enqueue the image-picker jQuery plugin (https://rvera.github.io/image-picker/) 205 | */ 206 | function enqueue() { 207 | wp_enqueue_style( 'image-picker', get_stylesheet_directory_uri() . '/js/image-picker/image-picker.css' ); 208 | $css = ' 209 | .svg-logo { 210 | width: 55px; 211 | /*text-align: center;*/ 212 | } 213 | .svg-logo img { 214 | background-color: #ffffff; 215 | } 216 | '; 217 | wp_add_inline_style( 'image-picker', $css ); 218 | 219 | wp_enqueue_script( 'image-picker', get_stylesheet_directory_uri() . '/js/image-picker/image-picker.js', array( 'jquery' ), '1.0.11', true ); 220 | wp_add_inline_script( 'image-picker', 'jQuery(document).ready(function($){ 221 | $("select.image-picker").imagepicker({ 222 | selected : function(){ 223 | $("#selected_svg").val( $(this).val() ); // save selected svg logo in hidden field 224 | $("#selected_svg").change(); // trigger Save & Publish change in customizer 225 | } 226 | }); 227 | });', 'after' ); 228 | } 229 | 230 | public function render_content() { 231 | ?> 232 | 239 | 292 | 302 | 327 | 337 | %2$s', 357 | esc_url( home_url( '/' ) ), 358 | sprintf( '',$svg_logo_url, $svg_logo_width ) 359 | ); 360 | } 361 | } else { 362 | remove_theme_mod( 'svg_logo_url' ); 363 | } 364 | return $html; 365 | } 366 | add_filter( 'get_custom_logo', 'add_svg_logo' ); 367 | 368 | 369 | 370 | /** 371 | * Enqueue customizer control scripts. 372 | */ 373 | function on_customize_controls_enqueue_scripts() { 374 | $handle = 'wcag-validate-customizer-color-contrast'; 375 | $src = get_stylesheet_directory_uri() . '/js/customizer-validate-wcag-color-contrast.js'; 376 | $deps = [ 'customize-controls' ]; 377 | wp_enqueue_script( $handle, $src, $deps ); 378 | 379 | $exports = [ 380 | 'validate_color_contrast' => [ 381 | // key = current color control , values = array with color controls to check color contrast against 382 | 'page_background_color' => [ 'main_text_color', 'secondary_text_color' ], 383 | 'main_text_color' => [ 'page_background_color' ], 384 | 'secondary_text_color' => [ 'page_background_color' ], 385 | ], 386 | ]; 387 | wp_scripts()->add_data( $handle, 'data', sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) ) ); 388 | 389 | $handle = 'color-control-config'; 390 | $src = get_stylesheet_directory_uri() . '/js/customizer-color-control-change-config.js'; 391 | $deps = [ 'wp-color-picker' ]; 392 | wp_enqueue_script( $handle, $src, $deps , rand()); 393 | // options you can set, see the Iris Options at http://automattic.github.io/Iris/ 394 | $options = [ 395 | 'hide' => false, 396 | 'palettes' => [ // empty array will remove the palette from the control. 397 | '#000000', 398 | '#ffffff', 399 | '#c32d41', 400 | '#144696', 401 | '#e4e0e0', 402 | '#f4f1f0', 403 | ], 404 | ]; 405 | 406 | wp_scripts()->add_data( $handle, 'data', sprintf( 'var _ColorControlConfig = %s;', wp_json_encode( $options ) ) ); 407 | } 408 | add_action( 'customize_controls_enqueue_scripts', 'on_customize_controls_enqueue_scripts' ); 409 | -------------------------------------------------------------------------------- /js/customizer-color-control-change-config.js: -------------------------------------------------------------------------------- 1 | /* global jQuery.wp.wpColorPicker, _ColorControlPalette */ 2 | /* exported _ColorControlConfig */ 3 | var ColorControlConfig = ( function( $, colorpicker, options ) { 4 | var default_config = { 5 | defaultColor: false, 6 | change: false, 7 | clear: false, 8 | hide: true, 9 | palettes: true, 10 | width: 255, 11 | mode: 'hsv', 12 | type: 'full', 13 | slider: 'horizontal' 14 | }; 15 | if ( options ) { // only modify if options is set 16 | $.extend( colorpicker.prototype.options, default_config, options ); 17 | } 18 | }( jQuery, jQuery.wp.wpColorPicker, _ColorControlConfig ) ); 19 | -------------------------------------------------------------------------------- /js/customizer-preview.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Script run inside a Customizer preview frame. 3 | */ 4 | ( function( $ ) { 5 | /** 6 | * Author on/off 7 | * 'show_author' is the name of the setting, as added by the $wp_customize->add_setting call 8 | * @type {String} 9 | */ 10 | wp.customize( 'show_author', function( value ) { 11 | value.bind( function( to ) { 12 | /** 13 | * Add template if missing (eg not added by the theme becuse of if statement). 14 | */ 15 | if ( 0 == $( '.byline' ).length ) { 16 | $( 'Author admin' ) 17 | .prependTo( '.entry-footer' ); 18 | } 19 | /** 20 | * Toggle date on/off. 21 | */ 22 | $( '.byline' ).toggle( '1' == to ); 23 | } ); 24 | } ); 25 | /** 26 | * Post date on/off 27 | * 'show_date' is the name of the setting, as added by the $wp_customize->add_setting call 28 | * @type {String} 29 | */ 30 | wp.customize( 'show_date', function( value ) { 31 | value.bind( function( to ) { 32 | /** 33 | * Add template if missing (eg not added by the theme becuse of if statement). 34 | */ 35 | if ( 0 == $( '.posted-on' ).length ) { 36 | $( 'Posted on ' ) 37 | .insertBefore( '.edit-link' ); 38 | } 39 | /** 40 | * Toggle date on/off. 41 | */ 42 | $( '.posted-on' ).toggle( '1' == to ); 43 | } ); 44 | } ); 45 | /** 46 | * Update SVG URL 47 | * 'svg_logo_url' is the name of the setting, as added by the $wp_customize->add_setting call 48 | * @type {String} 49 | */ 50 | wp.customize( 'svg_logo_url', function( value ) { 51 | value.bind( function( to ) { 52 | if ( 0 == $( '.svg-logo' ).length ) { 53 | $( '.custom-logo-link' ).css( 'display', 'block' ); 54 | $( '.custom-logo' ).addClass( 'svg-logo' ); 55 | } 56 | $( '.svg-logo' ).attr( 'src', to ); 57 | svg_logo_tmp_url = to; 58 | } ); 59 | } ); 60 | /** 61 | * Change SVG width 62 | * 'svg_logo_width' is the name of the setting, as added by the $wp_customize->add_setting call 63 | * @type {String} 64 | */ 65 | wp.customize( 'svg_logo_width', function( value ) { 66 | value.bind( function( to ) { 67 | $( '.svg-logo' ).width( to ); 68 | } ); 69 | } ); 70 | 71 | 72 | wp.customize( 'svg_logo_remove', function( value ) { 73 | value.bind( function( to ) { 74 | $( '.custom-logo-link' ).toggle( '1' == to ); 75 | } ); 76 | } ); 77 | 78 | } )( jQuery ); 79 | -------------------------------------------------------------------------------- /js/customizer-range-value-control.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Script run inside a Customizer control sidebar 3 | */ 4 | (function($) { 5 | wp.customize.bind('ready', function() { 6 | rangeSlider(); 7 | }); 8 | 9 | var rangeSlider = function() { 10 | var slider = $('.range-slider'), 11 | range = $('.range-slider__range'), 12 | value = $('.range-slider__value'); 13 | 14 | slider.each(function() { 15 | 16 | value.each(function() { 17 | var value = $(this).prev().attr('value'); 18 | var suffix = ($(this).prev().attr('suffix')) ? $(this).prev().attr('suffix') : ''; 19 | $(this).html(value + suffix); 20 | }); 21 | 22 | range.on('input', function() { 23 | var suffix = ($(this).attr('suffix')) ? $(this).attr('suffix') : ''; 24 | $(this).next(value).html(this.value + suffix ); 25 | }); 26 | }); 27 | }; 28 | 29 | })(jQuery); 30 | -------------------------------------------------------------------------------- /js/customizer-toggle-control.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Script run inside a Customizer control sidebar 3 | * 4 | * Enable / disable the control title by toggeling its .disabled-control-title style class on or off. 5 | */ 6 | ( function( $ ) { 7 | wp.customize.bind( 'ready', function() { 8 | var customize = this; // Customize object alias. 9 | // Array with the control names 10 | var toggleControls = [ 11 | 'svg_logo_remove', 12 | 'show_date', 13 | 'show_author' 14 | ]; 15 | $.each( toggleControls, function( index, control_name ) { 16 | customize( control_name, function( value ) { 17 | var controlTitle = customize.control( control_name ).container.find( '.customize-control-title' ); // Get control title. 18 | // 1. On loading. 19 | controlTitle.toggleClass('disabled-control-title', !value.get() ); 20 | // 2. Binding to value change. 21 | value.bind( function( to ) { 22 | controlTitle.toggleClass( 'disabled-control-title', !value.get() ); 23 | } ); 24 | 25 | 26 | } ); 27 | } ); 28 | 29 | // from http://126kr.com/article/6kifl0u7nn6 30 | customize( 'svg_logo_remove', function( value ) { 31 | var svgControls = [ 32 | 'svg_logo_url', 33 | 'svg_logo_width' 34 | ]; 35 | 36 | $.each( svgControls, function( index, id ) { 37 | customize.control( id, function( control ) { 38 | /** 39 | * Toggling function 40 | */ 41 | var toggle = function( to ) { 42 | control.toggle( to ); 43 | }; 44 | 45 | // 1. On loading. 46 | toggle( value.get() ); 47 | 48 | // 2. On value change. 49 | value.bind( toggle ); 50 | } ); 51 | } ); 52 | } ); 53 | 54 | } ); 55 | } )( jQuery ); 56 | -------------------------------------------------------------------------------- /js/customizer-validate-wcag-color-contrast.js: -------------------------------------------------------------------------------- 1 | /* global wp, _validateWCAGColorContrastExports */ 2 | /* exported validateWCAGColorContrast */ 3 | var validateWCAGColorContrast = ( function( $, api, exports ) { 4 | var self = { 5 | validate_color_contrast: [] 6 | }; 7 | if ( exports ) { 8 | $.extend( self, exports ); 9 | } 10 | /** 11 | * Add contrast validation to a control if it is entitled (is a valid color control). 12 | * 13 | * @param {wp.customize.Control} setting - Control. 14 | * @param {wp.customize.Value} setting.validationMessage - Validation message. 15 | * @return {boolean} Whether validation was added. 16 | */ 17 | self.addWCAGColorContrastValidation = function( setting ) { 18 | var initialValidate; 19 | 20 | if ( ! self.isColorControl( setting ) ) { 21 | return false; 22 | } 23 | initialValidate = setting.validate; 24 | 25 | /** 26 | * Wrap the setting's validate() method to do validation on the value to be sent to the server. 27 | * 28 | * @param {mixed} value - New value being assigned to the setting. 29 | * @returns {*} 30 | */ 31 | setting.validate = function( value ) { 32 | var setting = this, title, validationError; 33 | var current_color = value; 34 | var current_id = this.id; 35 | 36 | var all_color_controls = _.union( _.flatten( _.values( self.validate_color_contrast ) ) ); 37 | 38 | // remove other (old) notifications 39 | _.each ( _.without ( all_color_controls , current_id ), function( other_color_control_id ) { 40 | var other_control = api.control.instance( other_color_control_id ); 41 | notice = other_control.container.find('.notice'); 42 | notice.hide(); 43 | } ); 44 | 45 | // find other color controls and check contrast with current color control 46 | var other_color_controls = self.validate_color_contrast[ current_id ]; 47 | 48 | _.each ( other_color_controls, function( other_color_control_id ) { 49 | var other_control = api.control.instance( other_color_control_id); 50 | var other_color = other_control.container.find('.color-picker-hex').val(); 51 | var name = $( '#customize-control-' + other_color_control_id + ' .customize-control-title').text(); 52 | var contrast = self.hex( current_color, other_color ); 53 | var score = self.score( contrast ); 54 | 55 | // contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : "" 56 | if ( contrast < 4.5 ) { 57 | setting.notifications.remove( other_color_control_id ); 58 | validationWarning = new api.Notification( other_color_control_id, { message: self.sprintf( 'WCAG conflict with "%s"
contrast: %s' ,name, contrast), type: 'warning' } ); 59 | setting.notifications.add( validationWarning.code, validationWarning ); 60 | // console.log( color_control_id + ' ' + color + ' ' + contrast + ' ' + score ); 61 | } else { 62 | setting.notifications.remove( other_color_control_id ); 63 | } 64 | } ); 65 | 66 | return value; 67 | }; 68 | 69 | return true; 70 | }; 71 | 72 | /** 73 | * Return whether the setting is entitled (i.e. if it is a title or has a title). 74 | * 75 | * @param {wp.customize.Setting} setting - Setting. 76 | * @returns {boolean} 77 | */ 78 | self.isColorControl = function( setting ) { 79 | return _.findKey( self.validate_color_contrast, function( key, value ) { 80 | return value == setting.id; 81 | } ); 82 | }; 83 | 84 | api.bind( 'add', function( setting ) { 85 | self.addWCAGColorContrastValidation( setting ); 86 | } ); 87 | 88 | 89 | self.sprintf = function( format ) { 90 | for( var i=1; i < arguments.length; i++ ) { 91 | format = format.replace( /%s/, arguments[i] ); 92 | } 93 | return format; 94 | }; 95 | 96 | /** 97 | * Methods used to calculate WCAG Color Contrast 98 | */ 99 | 100 | // from https://github.com/sindresorhus/hex-rgb 101 | self.hexRgb = function (hex) { 102 | if (typeof hex !== 'string') { 103 | throw new TypeError('Expected a string'); 104 | } 105 | 106 | hex = hex.replace(/^#/, ''); 107 | 108 | if (hex.length === 3) { 109 | hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; 110 | } 111 | 112 | var num = parseInt(hex, 16); 113 | 114 | return [num >> 16, num >> 8 & 255, num & 255]; 115 | }; 116 | 117 | // from https://github.com/tmcw/relative-luminance 118 | // # Relative luminance 119 | // 120 | // http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef 121 | // https://en.wikipedia.org/wiki/Luminance_(relative) 122 | // https://en.wikipedia.org/wiki/Luminosity_function 123 | // https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients 124 | 125 | // red, green, and blue coefficients 126 | var rc = 0.2126, 127 | gc = 0.7152, 128 | bc = 0.0722, 129 | // low-gamma adjust coefficient 130 | lowc = 1 / 12.92; 131 | 132 | self.adjustGamma = function( g ) { 133 | return Math.pow((g + 0.055) / 1.055, 2.4); 134 | }; 135 | 136 | /** 137 | * Given a 3-element array of R, G, B varying from 0 to 255, return the luminance 138 | * as a number from 0 to 1. 139 | * @param {Array} rgb 3-element array of a color 140 | * @returns {number} luminance, between 0 and 1 141 | * @example 142 | * var luminance = require('relative-luminance'); 143 | * var black_lum = luminance([0, 0, 0]); // 0 144 | */ 145 | self.relativeLuminance = function (rgb) { 146 | var rsrgb = rgb[0] / 255; 147 | var gsrgb = rgb[1] / 255; 148 | var bsrgb = rgb[2] / 255; 149 | 150 | var r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma(rsrgb), 151 | g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma(gsrgb), 152 | b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma(bsrgb); 153 | 154 | return r * rc + g * gc + b * bc; 155 | }; 156 | 157 | 158 | // from https://github.com/tmcw/wcag-contrast 159 | /** 160 | * Get the contrast ratio between two relative luminance values 161 | * @param {number} a luminance value 162 | * @param {number} b luminance value 163 | * @returns {number} contrast ratio 164 | * @example 165 | * luminance(1, 1); // = 1 166 | */ 167 | self.luminance = function(a, b) { 168 | var l1 = Math.max(a, b); 169 | var l2 = Math.min(a, b); 170 | return (l1 + 0.05) / (l2 + 0.05); 171 | }; 172 | 173 | /** 174 | * Get a score for the contrast between two colors as rgb triplets 175 | * @param {array} a 176 | * @param {array} b 177 | * @returns {number} contrast ratio 178 | * @example 179 | * rgb([0, 0, 0], [255, 255, 255]); // = 21 180 | */ 181 | self.rgb = function(a, b) { 182 | return self.luminance(self.relativeLuminance(a), self.relativeLuminance(b)); 183 | }; 184 | 185 | /** 186 | * Get a score for the contrast between two colors as hex strings 187 | * @param {string} a hex value 188 | * @param {string} b hex value 189 | * @returns {number} contrast ratio 190 | * @example 191 | * hex('#000', '#fff'); // = 21 192 | */ 193 | self.hex = function(a, b) { 194 | return self.rgb(self.hexRgb(a), self.hexRgb(b)); 195 | }; 196 | 197 | /** 198 | * Get a textual score from a numeric contrast value 199 | * @param {number} contrast 200 | * @returns {string} score 201 | * @example 202 | * score(10); // = 'AAA' 203 | */ 204 | self.score = function(contrast) { 205 | return contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : ""; 206 | }; 207 | 208 | return self; 209 | 210 | }( jQuery, wp.customize, _validateWCAGColorContrastExports ) ); 211 | -------------------------------------------------------------------------------- /js/image-picker/image-picker.css: -------------------------------------------------------------------------------- 1 | ul.thumbnails.image_picker_selector { 2 | overflow: auto; 3 | list-style-image: none; 4 | list-style-position: outside; 5 | list-style-type: none; 6 | padding: 0px; 7 | margin: 0px; } 8 | ul.thumbnails.image_picker_selector ul { 9 | overflow: auto; 10 | list-style-image: none; 11 | list-style-position: outside; 12 | list-style-type: none; 13 | padding: 0px; 14 | margin: 0px; } 15 | ul.thumbnails.image_picker_selector li.group {width:100%;} 16 | ul.thumbnails.image_picker_selector li.group_title { 17 | float: none; } 18 | ul.thumbnails.image_picker_selector li { 19 | margin: 0px 12px 12px 0px; 20 | float: left; } 21 | ul.thumbnails.image_picker_selector li .thumbnail { 22 | padding: 6px; 23 | border: 1px solid #dddddd; 24 | -webkit-user-select: none; 25 | -moz-user-select: none; 26 | -ms-user-select: none; } 27 | ul.thumbnails.image_picker_selector li .thumbnail img { 28 | -webkit-user-drag: none; } 29 | ul.thumbnails.image_picker_selector li .thumbnail.selected { 30 | background: #0088cc; } 31 | -------------------------------------------------------------------------------- /js/image-picker/image-picker.js: -------------------------------------------------------------------------------- 1 | // Image Picker 2 | // by Rodrigo Vera 3 | // 4 | // Version 0.3.1 5 | // Full source at https://github.com/rvera/image-picker 6 | // MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE 7 | // Generated by CoffeeScript 1.11.0 8 | (function() { 9 | var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options, 10 | bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, 11 | indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; 12 | 13 | jQuery.fn.extend({ 14 | imagepicker: function(opts) { 15 | if (opts == null) { 16 | opts = {}; 17 | } 18 | return this.each(function() { 19 | var select; 20 | select = jQuery(this); 21 | if (select.data("picker")) { 22 | select.data("picker").destroy(); 23 | } 24 | select.data("picker", new ImagePicker(this, sanitized_options(opts))); 25 | if (opts.initialized != null) { 26 | return opts.initialized.call(select.data("picker")); 27 | } 28 | }); 29 | } 30 | }); 31 | 32 | sanitized_options = function(opts) { 33 | var default_options; 34 | default_options = { 35 | hide_select: true, 36 | show_label: false, 37 | initialized: void 0, 38 | changed: void 0, 39 | clicked: void 0, 40 | selected: void 0, 41 | limit: void 0, 42 | limit_reached: void 0 43 | }; 44 | return jQuery.extend(default_options, opts); 45 | }; 46 | 47 | both_array_are_equal = function(a, b) { 48 | var i, j, len, x; 49 | if ((!a || !b) || (a.length !== b.length)) { 50 | return false; 51 | } 52 | a = a.slice(0); 53 | b = b.slice(0); 54 | a.sort(); 55 | b.sort(); 56 | for (i = j = 0, len = a.length; j < len; i = ++j) { 57 | x = a[i]; 58 | if (b[i] !== x) { 59 | return false; 60 | } 61 | } 62 | return true; 63 | }; 64 | 65 | ImagePicker = (function() { 66 | function ImagePicker(select_element, opts1) { 67 | this.opts = opts1 != null ? opts1 : {}; 68 | this.sync_picker_with_select = bind(this.sync_picker_with_select, this); 69 | this.select = jQuery(select_element); 70 | this.multiple = this.select.attr("multiple") === "multiple"; 71 | if (this.select.data("limit") != null) { 72 | this.opts.limit = parseInt(this.select.data("limit")); 73 | } 74 | this.build_and_append_picker(); 75 | } 76 | 77 | ImagePicker.prototype.destroy = function() { 78 | var j, len, option, ref; 79 | ref = this.picker_options; 80 | for (j = 0, len = ref.length; j < len; j++) { 81 | option = ref[j]; 82 | option.destroy(); 83 | } 84 | this.picker.remove(); 85 | this.select.off("change", this.sync_picker_with_select); 86 | this.select.removeData("picker"); 87 | return this.select.show(); 88 | }; 89 | 90 | ImagePicker.prototype.build_and_append_picker = function() { 91 | if (this.opts.hide_select) { 92 | this.select.hide(); 93 | } 94 | this.select.on("change", this.sync_picker_with_select); 95 | if (this.picker != null) { 96 | this.picker.remove(); 97 | } 98 | this.create_picker(); 99 | this.select.after(this.picker); 100 | return this.sync_picker_with_select(); 101 | }; 102 | 103 | ImagePicker.prototype.sync_picker_with_select = function() { 104 | var j, len, option, ref, results; 105 | ref = this.picker_options; 106 | results = []; 107 | for (j = 0, len = ref.length; j < len; j++) { 108 | option = ref[j]; 109 | if (option.is_selected()) { 110 | results.push(option.mark_as_selected()); 111 | } else { 112 | results.push(option.unmark_as_selected()); 113 | } 114 | } 115 | return results; 116 | }; 117 | 118 | ImagePicker.prototype.create_picker = function() { 119 | this.picker = jQuery("
    "); 120 | this.picker_options = []; 121 | this.recursively_parse_option_groups(this.select, this.picker); 122 | return this.picker; 123 | }; 124 | 125 | ImagePicker.prototype.recursively_parse_option_groups = function(scoped_dom, target_container) { 126 | var container, j, k, len, len1, option, option_group, ref, ref1, results; 127 | ref = scoped_dom.children("optgroup"); 128 | for (j = 0, len = ref.length; j < len; j++) { 129 | option_group = ref[j]; 130 | option_group = jQuery(option_group); 131 | container = jQuery("
      "); 132 | container.append(jQuery("
    • " + (option_group.attr("label")) + "
      • ")); 133 | target_container.append(jQuery("
    • ").append(container)); 134 | this.recursively_parse_option_groups(option_group, container); 135 | } 136 | ref1 = (function() { 137 | var l, len1, ref1, results1; 138 | ref1 = scoped_dom.children("option"); 139 | results1 = []; 140 | for (l = 0, len1 = ref1.length; l < len1; l++) { 141 | option = ref1[l]; 142 | results1.push(new ImagePickerOption(option, this, this.opts)); 143 | } 144 | return results1; 145 | }).call(this); 146 | results = []; 147 | for (k = 0, len1 = ref1.length; k < len1; k++) { 148 | option = ref1[k]; 149 | this.picker_options.push(option); 150 | if (!option.has_image()) { 151 | continue; 152 | } 153 | results.push(target_container.append(option.node)); 154 | } 155 | return results; 156 | }; 157 | 158 | ImagePicker.prototype.has_implicit_blanks = function() { 159 | var option; 160 | return ((function() { 161 | var j, len, ref, results; 162 | ref = this.picker_options; 163 | results = []; 164 | for (j = 0, len = ref.length; j < len; j++) { 165 | option = ref[j]; 166 | if (option.is_blank() && !option.has_image()) { 167 | results.push(option); 168 | } 169 | } 170 | return results; 171 | }).call(this)).length > 0; 172 | }; 173 | 174 | ImagePicker.prototype.selected_values = function() { 175 | if (this.multiple) { 176 | return this.select.val() || []; 177 | } else { 178 | return [this.select.val()]; 179 | } 180 | }; 181 | 182 | ImagePicker.prototype.toggle = function(imagepicker_option, original_event) { 183 | var new_values, old_values, selected_value; 184 | old_values = this.selected_values(); 185 | selected_value = imagepicker_option.value().toString(); 186 | if (this.multiple) { 187 | if (indexOf.call(this.selected_values(), selected_value) >= 0) { 188 | new_values = this.selected_values(); 189 | new_values.splice(jQuery.inArray(selected_value, old_values), 1); 190 | this.select.val([]); 191 | this.select.val(new_values); 192 | } else { 193 | if ((this.opts.limit != null) && this.selected_values().length >= this.opts.limit) { 194 | if (this.opts.limit_reached != null) { 195 | this.opts.limit_reached.call(this.select); 196 | } 197 | } else { 198 | this.select.val(this.selected_values().concat(selected_value)); 199 | } 200 | } 201 | } else { 202 | if (this.has_implicit_blanks() && imagepicker_option.is_selected()) { 203 | this.select.val(""); 204 | } else { 205 | this.select.val(selected_value); 206 | } 207 | } 208 | if (!both_array_are_equal(old_values, this.selected_values())) { 209 | this.select.change(); 210 | if (this.opts.changed != null) { 211 | return this.opts.changed.call(this.select, old_values, this.selected_values(), original_event); 212 | } 213 | } 214 | }; 215 | 216 | return ImagePicker; 217 | 218 | })(); 219 | 220 | ImagePickerOption = (function() { 221 | function ImagePickerOption(option_element, picker, opts1) { 222 | this.picker = picker; 223 | this.opts = opts1 != null ? opts1 : {}; 224 | this.clicked = bind(this.clicked, this); 225 | this.option = jQuery(option_element); 226 | this.create_node(); 227 | } 228 | 229 | ImagePickerOption.prototype.destroy = function() { 230 | return this.node.find(".thumbnail").off("click", this.clicked); 231 | }; 232 | 233 | ImagePickerOption.prototype.has_image = function() { 234 | return this.option.data("img-src") != null; 235 | }; 236 | 237 | ImagePickerOption.prototype.is_blank = function() { 238 | return !((this.value() != null) && this.value() !== ""); 239 | }; 240 | 241 | ImagePickerOption.prototype.is_selected = function() { 242 | var select_value; 243 | select_value = this.picker.select.val(); 244 | if (this.picker.multiple) { 245 | return jQuery.inArray(this.value(), select_value) >= 0; 246 | } else { 247 | return this.value() === select_value; 248 | } 249 | }; 250 | 251 | ImagePickerOption.prototype.mark_as_selected = function() { 252 | return this.node.find(".thumbnail").addClass("selected"); 253 | }; 254 | 255 | ImagePickerOption.prototype.unmark_as_selected = function() { 256 | return this.node.find(".thumbnail").removeClass("selected"); 257 | }; 258 | 259 | ImagePickerOption.prototype.value = function() { 260 | return this.option.val(); 261 | }; 262 | 263 | ImagePickerOption.prototype.label = function() { 264 | if (this.option.data("img-label")) { 265 | return this.option.data("img-label"); 266 | } else { 267 | return this.option.text(); 268 | } 269 | }; 270 | 271 | ImagePickerOption.prototype.clicked = function(event) { 272 | this.picker.toggle(this, event); 273 | if (this.opts.clicked != null) { 274 | this.opts.clicked.call(this.picker.select, this, event); 275 | } 276 | if ((this.opts.selected != null) && this.is_selected()) { 277 | return this.opts.selected.call(this.picker.select, this, event); 278 | } 279 | }; 280 | 281 | ImagePickerOption.prototype.create_node = function() { 282 | var image, imgAlt, imgClass, thumbnail; 283 | this.node = jQuery("
    • "); 284 | image = jQuery(""); 285 | image.attr("src", this.option.data("img-src")); 286 | thumbnail = jQuery("
      "); 287 | imgClass = this.option.data("img-class"); 288 | if (imgClass) { 289 | this.node.addClass(imgClass); 290 | image.addClass(imgClass); 291 | thumbnail.addClass(imgClass); 292 | } 293 | imgAlt = this.option.data("img-alt"); 294 | if (imgAlt) { 295 | image.attr('alt', imgAlt); 296 | } 297 | thumbnail.on("click", this.clicked); 298 | thumbnail.append(image); 299 | if (this.opts.show_label) { 300 | thumbnail.append(jQuery("

      ").html(this.label())); 301 | } 302 | this.node.append(thumbnail); 303 | return this.node; 304 | }; 305 | 306 | return ImagePickerOption; 307 | 308 | })(); 309 | 310 | }).call(this); 311 | -------------------------------------------------------------------------------- /js/image-picker/image-picker.min.js: -------------------------------------------------------------------------------- 1 | // Image Picker 2 | // by Rodrigo Vera 3 | // 4 | // Version 0.3.1 5 | // Full source at https://github.com/rvera/image-picker 6 | // MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE 7 | // Image Picker 8 | // by Rodrigo Vera 9 | // 10 | // Version 0.3.0 11 | // Full source at https://github.com/rvera/image-picker 12 | // MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE 13 | (function(){var t,e,i,s,l=function(t,e){return function(){return t.apply(e,arguments)}},n=[].indexOf||function(t){for(var e=0,i=this.length;i>e;e++)if(e in this&&this[e]===t)return e;return-1};jQuery.fn.extend({imagepicker:function(e){return null==e&&(e={}),this.each(function(){var i;return i=jQuery(this),i.data("picker")&&i.data("picker").destroy(),i.data("picker",new t(this,s(e))),null!=e.initialized?e.initialized.call(i.data("picker")):void 0})}}),s=function(t){var e;return e={hide_select:!0,show_label:!1,initialized:void 0,changed:void 0,clicked:void 0,selected:void 0,limit:void 0,limit_reached:void 0},jQuery.extend(e,t)},i=function(t,e){return 0===jQuery(t).not(e).length&&0===jQuery(e).not(t).length},t=function(){function t(t,e){this.opts=null!=e?e:{},this.sync_picker_with_select=l(this.sync_picker_with_select,this),this.select=jQuery(t),this.multiple="multiple"===this.select.attr("multiple"),null!=this.select.data("limit")&&(this.opts.limit=parseInt(this.select.data("limit"))),this.build_and_append_picker()}return t.prototype.destroy=function(){var t,e,i,s;for(s=this.picker_options,e=0,i=s.length;i>e;e++)t=s[e],t.destroy();return this.picker.remove(),this.select.unbind("change"),this.select.removeData("picker"),this.select.show()},t.prototype.build_and_append_picker=function(){var t=this;return this.opts.hide_select&&this.select.hide(),this.select.change(function(){return t.sync_picker_with_select()}),null!=this.picker&&this.picker.remove(),this.create_picker(),this.select.after(this.picker),this.sync_picker_with_select()},t.prototype.sync_picker_with_select=function(){var t,e,i,s,l;for(s=this.picker_options,l=[],e=0,i=s.length;i>e;e++)t=s[e],t.is_selected()?l.push(t.mark_as_selected()):l.push(t.unmark_as_selected());return l},t.prototype.create_picker=function(){return this.picker=jQuery("

        "),this.picker_options=[],this.recursively_parse_option_groups(this.select,this.picker),this.picker},t.prototype.recursively_parse_option_groups=function(t,i){var s,l,n,r,c,o,h,a,p,u;for(a=t.children("optgroup"),r=0,o=a.length;o>r;r++)n=a[r],n=jQuery(n),s=jQuery("
          "),s.append(jQuery("
        • "+n.attr("label")+"
          • ")),i.append(jQuery("
        • ").append(s)),this.recursively_parse_option_groups(n,s);for(p=function(){var i,s,n,r;for(n=t.children("option"),r=[],i=0,s=n.length;s>i;i++)l=n[i],r.push(new e(l,this,this.opts));return r}.call(this),u=[],c=0,h=p.length;h>c;c++)l=p[c],this.picker_options.push(l),l.has_image()&&u.push(i.append(l.node));return u},t.prototype.has_implicit_blanks=function(){var t;return function(){var e,i,s,l;for(s=this.picker_options,l=[],e=0,i=s.length;i>e;e++)t=s[e],t.is_blank()&&!t.has_image()&&l.push(t);return l}.call(this).length>0},t.prototype.selected_values=function(){return this.multiple?this.select.val()||[]:[this.select.val()]},t.prototype.toggle=function(t){var e,s,l;return s=this.selected_values(),l=""+t.value(),this.multiple?n.call(this.selected_values(),l)>=0?(e=this.selected_values(),e.splice(jQuery.inArray(l,s),1),this.select.val([]),this.select.val(e)):null!=this.opts.limit&&this.selected_values().length>=this.opts.limit?null!=this.opts.limit_reached&&this.opts.limit_reached.call(this.select):this.select.val(this.selected_values().concat(l)):this.has_implicit_blanks()&&t.is_selected()?this.select.val(""):this.select.val(l),i(s,this.selected_values())||(this.select.change(),null==this.opts.changed)?void 0:this.opts.changed.call(this.select,s,this.selected_values())},t}(),e=function(){function t(t,e,i){this.picker=e,this.opts=null!=i?i:{},this.clicked=l(this.clicked,this),this.option=jQuery(t),this.create_node()}return t.prototype.destroy=function(){return this.node.find(".thumbnail").unbind()},t.prototype.has_image=function(){return null!=this.option.data("img-src")},t.prototype.is_blank=function(){return!(null!=this.value()&&""!==this.value())},t.prototype.is_selected=function(){var t;return t=this.picker.select.val(),this.picker.multiple?jQuery.inArray(this.value(),t)>=0:this.value()===t},t.prototype.mark_as_selected=function(){return this.node.find(".thumbnail").addClass("selected")},t.prototype.unmark_as_selected=function(){return this.node.find(".thumbnail").removeClass("selected")},t.prototype.value=function(){return this.option.val()},t.prototype.label=function(){return this.option.data("img-label")?this.option.data("img-label"):this.option.text()},t.prototype.clicked=function(){return this.picker.toggle(this),null!=this.opts.clicked&&this.opts.clicked.call(this.picker.select,this),null!=this.opts.selected&&this.is_selected()?this.opts.selected.call(this.picker.select,this):void 0},t.prototype.create_node=function(){var t,e;return this.node=jQuery("
        • "),t=jQuery(""),t.attr("src",this.option.data("img-src")),e=jQuery("
          "),e.click({option:this},function(t){return t.data.option.clicked()}),e.append(t),this.opts.show_label&&e.append(jQuery("

          ").html(this.label())),this.node.append(e),this.node},t}()}).call(this); -------------------------------------------------------------------------------- /languages/2016-customizer-demo.pot: -------------------------------------------------------------------------------- 1 | #, fuzzy 2 | msgid "" 3 | msgstr "" 4 | "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n" 5 | "Project-Id-Version: 2016 Customizer Demo\n" 6 | "POT-Creation-Date: 2016-10-07 14:02+0200\n" 7 | "PO-Revision-Date: 2016-10-07 13:59+0200\n" 8 | "Last-Translator: \n" 9 | "Language-Team: \n" 10 | "MIME-Version: 1.0\n" 11 | "Content-Type: text/plain; charset=UTF-8\n" 12 | "Content-Transfer-Encoding: 8bit\n" 13 | "X-Generator: Poedit 1.8.9\n" 14 | "X-Poedit-Basepath: ..\n" 15 | "X-Poedit-WPHeader: style.css\n" 16 | "X-Poedit-SourceCharset: UTF-8\n" 17 | "X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;" 18 | "esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;" 19 | "_nx_noop:3c,1,2;__ngettext_noop:1,2\n" 20 | "X-Poedit-SearchPath-0: .\n" 21 | "X-Poedit-SearchPathExcluded-0: *.js\n" 22 | 23 | #: functions.php:22 24 | msgctxt "customizer menu section" 25 | msgid "Post Meta" 26 | msgstr "" 27 | 28 | #: functions.php:32 29 | msgctxt "customizer menu setting" 30 | msgid "Show Author" 31 | msgstr "" 32 | 33 | #: functions.php:43 34 | msgctxt "customizer menu setting" 35 | msgid "Show Date" 36 | msgstr "" 37 | 38 | #: functions.php:83 39 | msgctxt "Used before post author name." 40 | msgid "Author" 41 | msgstr "" 42 | 43 | #: functions.php:96 44 | msgctxt "Used before post format." 45 | msgid "Format" 46 | msgstr "" 47 | 48 | #: functions.php:108 49 | #, php-format 50 | msgid "Leave a comment on %s" 51 | msgstr "" 52 | -------------------------------------------------------------------------------- /pure-css-toggle-buttons/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at http://codepen.io/mallendeo/pen/eLIiG. 2 | 3 | -------------------------------------------------------------------------------- /pure-css-toggle-buttons/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /pure-css-toggle-buttons/pure-css-togle-buttons.css: -------------------------------------------------------------------------------- 1 | input[type=checkbox].tgl { 2 | display: none; 3 | } 4 | input[type=checkbox].tgl, input[type=checkbox].tgl:after, input[type=checkbox].tgl:before, input[type=checkbox].tgl *, input[type=checkbox].tgl *:after, input[type=checkbox].tgl *:before, input[type=checkbox].tgl + .tgl-btn { 5 | box-sizing: border-box; 6 | } 7 | input[type=checkbox].tgl::-moz-selection, input[type=checkbox].tgl:after::-moz-selection, input[type=checkbox].tgl:before::-moz-selection, input[type=checkbox].tgl *::-moz-selection, input[type=checkbox].tgl *:after::-moz-selection, input[type=checkbox].tgl *:before::-moz-selection, input[type=checkbox].tgl + .tgl-btn::-moz-selection { 8 | background: none; 9 | } 10 | input[type=checkbox].tgl::selection, input[type=checkbox].tgl:after::selection, input[type=checkbox].tgl:before::selection, input[type=checkbox].tgl *::selection, input[type=checkbox].tgl *:after::selection, input[type=checkbox].tgl *:before::selection, input[type=checkbox].tgl + .tgl-btn::selection { 11 | background: none; 12 | } 13 | input[type=checkbox].tgl + .tgl-btn { 14 | outline: 0; 15 | display: block; 16 | width: 4em; 17 | height: 2em; 18 | position: relative; 19 | cursor: pointer; 20 | -webkit-user-select: none; 21 | -moz-user-select: none; 22 | -ms-user-select: none; 23 | user-select: none; 24 | } 25 | input[type=checkbox].tgl + .tgl-btn:after, input[type=checkbox].tgl + .tgl-btn:before { 26 | position: relative; 27 | display: block; 28 | content: ""; 29 | width: 50%; 30 | height: 100%; 31 | } 32 | input[type=checkbox].tgl + .tgl-btn:after { 33 | left: 0; 34 | } 35 | input[type=checkbox].tgl + .tgl-btn:before { 36 | display: none; 37 | } 38 | input[type=checkbox].tgl:checked + .tgl-btn:after { 39 | left: 50%; 40 | } 41 | 42 | input[type=checkbox].tgl-light + .tgl-btn { 43 | background: #f0f0f0; 44 | border-radius: 2em; 45 | padding: 2px; 46 | -webkit-transition: all .4s ease; 47 | transition: all .4s ease; 48 | } 49 | input[type=checkbox].tgl-light + .tgl-btn:after { 50 | border-radius: 50%; 51 | background: #fff; 52 | -webkit-transition: all .2s ease; 53 | transition: all .2s ease; 54 | } 55 | input[type=checkbox].tgl-light:checked + .tgl-btn { 56 | background: #9FD6AE; 57 | } 58 | 59 | input[type=checkbox].tgl-ios + .tgl-btn { 60 | background: #fbfbfb; 61 | border-radius: 2em; 62 | padding: 2px; 63 | -webkit-transition: all .4s ease; 64 | transition: all .4s ease; 65 | border: 1px solid #e8eae9; 66 | } 67 | input[type=checkbox].tgl-ios + .tgl-btn:after { 68 | border-radius: 2em; 69 | background: #fbfbfb; 70 | -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; 71 | transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; 72 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); 73 | } 74 | input[type=checkbox].tgl-ios + .tgl-btn:hover:after { 75 | will-change: padding; 76 | } 77 | input[type=checkbox].tgl-ios + .tgl-btn:active { 78 | box-shadow: inset 0 0 0 2em #e8eae9; 79 | } 80 | input[type=checkbox].tgl-ios + .tgl-btn:active:after { 81 | padding-right: .8em; 82 | } 83 | input[type=checkbox].tgl-ios:checked + .tgl-btn { 84 | background: #86d993; 85 | } 86 | input[type=checkbox].tgl-ios:checked + .tgl-btn:active { 87 | box-shadow: none; 88 | } 89 | input[type=checkbox].tgl-ios:checked + .tgl-btn:active:after { 90 | margin-left: -.8em; 91 | } 92 | 93 | input[type=checkbox].tgl-flat + .tgl-btn { 94 | padding: 2px; 95 | -webkit-transition: all .2s ease; 96 | transition: all .2s ease; 97 | background: #fff; 98 | border: 4px solid #f2f2f2; 99 | border-radius: 2em; 100 | } 101 | input[type=checkbox].tgl-flat + .tgl-btn:after { 102 | -webkit-transition: all .2s ease; 103 | transition: all .2s ease; 104 | background: #f2f2f2; 105 | content: ""; 106 | border-radius: 1em; 107 | } 108 | input[type=checkbox].tgl-flat:checked + .tgl-btn { 109 | border: 4px solid #7FC6A6; 110 | } 111 | input[type=checkbox].tgl-flat:checked + .tgl-btn:after { 112 | left: 50%; 113 | background: #7FC6A6; 114 | } 115 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/soderlind/2016-customizer-demo/8e186bc8965e920176fe20b29725d2ef266a5c2f/screenshot.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: 2016 Customizer Demo 3 | Theme URI: https://github.com/soderlind/2016-customizer-demo 4 | Description: Demo of Customizer proof of concepts 5 | Author: Per Soderlind 6 | Author URI: https://soderlind.no 7 | Template: twentysixteen 8 | Version: 1.3.1 9 | License: GNU General Public License v2 or later 10 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 11 | Tags: demo, customizer 12 | Text Domain: 2016-customizer-demo 13 | */ 14 | -------------------------------------------------------------------------------- /svg.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "file" : "svg/logo01.svg" }, 3 | { "file" : "svg/logo02.svg" } 4 | ] 5 | -------------------------------------------------------------------------------- /svg/logo01.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | logo 01 11 | 12 | 13 | 14 | undefined 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /svg/logo02.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | logo 02 11 | 12 | 13 | 14 | undefined 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | --------------------------------------------------------------------------------