From 99797fcc30760bcf150c4d8ebb60de8d5b2830b5 Mon Sep 17 00:00:00 2001 From: Luke Parham Date: Tue, 19 Apr 2016 14:50:50 -0500 Subject: [PATCH] converting code blocks to use syntax toggle --- _docs/asviewcontroller.md | 24 +++++++++++++++-- _docs/display-node.md | 56 ++++++++++++++++++++++++++++++++++----- _docs/layout-engine.md | 51 +++++++++++++++++++++++++++++------ _includes/header.html | 1 + static/main.css | 54 +++++++++++++++++++++++++++++++++++++ static/toggle.js | 27 +++++++++++++++++++ 6 files changed, 196 insertions(+), 17 deletions(-) create mode 100644 static/toggle.js diff --git a/_docs/asviewcontroller.md b/_docs/asviewcontroller.md index 5cada643..d1226bd4 100755 --- a/_docs/asviewcontroller.md +++ b/_docs/asviewcontroller.md @@ -11,7 +11,10 @@ The main difference is that you construct and return the node you'd like managed Consider the following ASViewController subclass that would like to use a custom table node as its managed node. -``` +
+SwiftObjective-C +
+ 
 - (instancetype)initWithModel:(NSArray *)models
 {
     ASTableNode *tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain];
@@ -25,7 +28,24 @@ Consider the following ASViewController subclass that would like to use a custom
     
     return self;
 }
-```
+
+ + +
+
The most important line is: diff --git a/_docs/display-node.md b/_docs/display-node.md index 3e988040..abdd2c2c 100755 --- a/_docs/display-node.md +++ b/_docs/display-node.md @@ -9,24 +9,53 @@ next: cell-node.html ASDisplayNode is the main view abstraction over UIView and CALayer. It initializes and owns a UIView in the same way UIViews create and own their own backing CALayers. -``` +
+SwiftObjective-C + +
+ 
 ASDisplayNode *node = [[ASDisplayNode alloc] init];
 node.backgroundColor = [UIColor orangeColor];
 node.bounds = CGRectMake(0, 0, 100, 100);
 
 NSLog(@"Underlying view: %@", node.view);
-```
+
+ + +
+
A node has all the same properties as a UIView, so using them should feel very familiar to anyone familiar with UIKit. Properties of both views and layers are forwarded to nodes and can be easily accessed. -``` +
+SwiftObjective-C + +
+ 
 ASDisplayNode *node = [[ASDisplayNode alloc] init];
 node.clipsToBounds = YES; 				        // not .masksToBounds
 node.borderColor = [UIColor blueColor];  //layer name when there is no UIView equivalent
-NSLog(@"%@", node.layer);
-```
+
+NSLog(@"Backing layer: %@", node.layer);
+
+ + +
+
As you can see, naming defaults to the UIView conventions*** unless there is no UIView equivalent. You also have access to your underlying CALayer just as you would when dealing with a plain UIView. @@ -36,12 +65,25 @@ When used with one of the +SwiftObjective-C + +
+ 
 ASDisplayNode *node = [ASDisplayNode alloc] initWithViewBlock:^{
 	SomeView *view = [[SomeView alloc] init];
 	return view;
 }];
-```
+
+ + +
+ Doing this allows you to wrap existing views if that is preferable to converting the UIView subclass to an ASDisplayNode subclass. diff --git a/_docs/layout-engine.md b/_docs/layout-engine.md index 8d5551fd..eca23b06 100755 --- a/_docs/layout-engine.md +++ b/_docs/layout-engine.md @@ -9,17 +9,33 @@ AsyncDisplayKit's layout engine is based on the CSS Box Model. While it is the The main way you participate in this system is by implementing `-layoutSpecThatFits:` in a node subclass. Here, you declaratively build up layout specs from the inside out, returning the final spec which will contain the rest. -``` +
+SwiftObjective-C +
+ 
 - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
 {
   ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec];
-  verticalStack.direction  		   = ASStackLayoutDirectionVertical;
+  verticalStack.direction          = ASStackLayoutDirectionVertical;
   verticalStack.spacing            = 4.0;
   [verticalStack setChildren:_commentNodes];
-  
+
   return verticalStack;
 }
-```
+
+ + +
+
Whle this example is extremely simple, it gives you an idea of how to use a layout spec. A stack layout spec, for instance, defines a layout of nodes in which the chlidren will be laid out adjacently, in the direction specified, with the spacing specified. It is very similar to `UIStackView` but with the added benefit of backwards compatibility. @@ -29,22 +45,41 @@ Layout spec's children can be any object whose class conforms to the ` +SwiftObjective-C +
-``` + 
 - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
 {
   ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec];
-  verticalStack.direction  		   = ASStackLayoutDirectionVertical;
+  verticalStack.direction        = ASStackLayoutDirectionVertical;
   verticalStack.spacing            = 4.0;
   [verticalStack setChildren:_commentNodes];
   
   UIEdgeInsets insets = UIEdgeInsetsMake(8, 8, 8, 8);
   ASInsetLayoutSpec *insetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets 
-  																		child:verticalStack];
+                                      child:verticalStack];
   
   return insetSpec;
 }
-```
+
+ + +
+ You can easily do that by making that stack the child of an inset layout spec. diff --git a/_includes/header.html b/_includes/header.html index 1e5d79f6..87b6567c 100755 --- a/_includes/header.html +++ b/_includes/header.html @@ -15,6 +15,7 @@ + diff --git a/static/main.css b/static/main.css index f92d2568..7c403dbd 100755 --- a/static/main.css +++ b/static/main.css @@ -716,3 +716,57 @@ a { font-size: 36px; } } .post-title .edit-page-link { font-size: 18px; } + + +body { + background-color: #fff; + color: #333; + font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; + font-size: 1em; + line-height: 1.5; +} + +.language-toggle { + display: block; + box-sizing: border-box; + font-size: 125% + -webkit-font-smoothing: antialiased; + line-height: 1.5; + margin-bottom: 1em; + padding-right: 10px; +} +.language-toggle a.active { + color: #222220 !important; +} +.language-toggle a { + cursor: pointer; + display: block; + float: right; + padding-left: 0.5em; + + color: #a3a39e !important; + text-decoration: none; + transition: color 0.1s linear; +} +.language-toggle:after { + content: ""; + display: table; + clear: both; +} + +.highlight-group { + margin-top: 1em; + font-family: BodyFontFamily,"Georgia Pro",Georgia,Times; + margin: 0; + border-top: 3px #008ED4 solid; + background: #f8f7f5; + border-radius: 4px; +} + +.hidden { + display: none; +} +.code { + padding-left: 20px; + padding-bottom: 10px; +} diff --git a/static/toggle.js b/static/toggle.js new file mode 100644 index 00000000..65b9b5e2 --- /dev/null +++ b/static/toggle.js @@ -0,0 +1,27 @@ +document.addEventListener("DOMContentLoaded", function() { + var swiftButtons = document.getElementsByClassName("swiftButton"); + var objectiveCButons = document.getElementsByClassName("objcButton"); + var objcCodes = document.getElementsByClassName("objcCode"); + var swiftCodes = document.getElementsByClassName("swiftCode"); + + var totalCodeSections = swiftButtons.length; + for(var i = 0; i < totalCodeSections; i++) { + swiftButtons[i].onclick = function () { + for (var i = 0; i < totalCodeSections; i++) { + swiftCodes[i].classList.remove("hidden"); + objcCodes[i].classList.add("hidden"); + objectiveCButons[i].classList.remove("active"); + swiftButtons[i].classList.add("active"); + }; + } + + objectiveCButons[i].onclick = function () { + for (var i = 0; i < totalCodeSections; i++) { + swiftCodes[i].classList.add("hidden"); + objcCodes[i].classList.remove("hidden"); + objectiveCButons[i].classList.add("active"); + swiftButtons[i].classList.remove("active"); + }; + } + } +}); \ No newline at end of file